How to move a text in HTML ?
Moving text in HTML refers to changing its position within the document’s layout structure. This can be achieved by adjusting HTML elements’ attributes such as style or class and <marquee> tag to modify their positioning, or by dynamically manipulating the HTML structure using JavaScript.
Syntax
<marquee> Contents... </marquee>
Steps
- Open an HTML file in a text editor to begin.
- Now place the <marquee> tags before and after the text to enable text movement.
- Optionally, use the direction attribute within <marquee> to set the text’s movement direction.
- If desired, use the behavior attribute to alternate the text’s movement direction.
- At last, customize the appearance by adding style attributes like ‘background’, ‘border’, etc, within the <marquee> tag.
Example 1: In this example, we will see the use of a <marquee> tag.
<!DOCTYPE html>
<html>
<body>
<h2 style="text-align: center; color: green;">
Welcome To GFG
</h2>
<marquee> Lets Move this text.</marquee>
<marquee direction="right" behavior="alternate"
style="border:black 2px solid">
Beginner for Beginner
</marquee>
</body>
</html>
Output:
Example 2: In this example, we creates a scrolling text effect using the <marquee> tag, displaying “w3wiki” in green color and large font size.
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
<style>
#GFG {
color: green;
font-size: large;
}
</style>
</head>
<body>
<marquee width="50%" id="GFG">
w3wiki
</marquee>
</body>
</html>
Output: