How to Move Text HTML

Sometimes, you may want to add some important text on your website, and you wish everyone would see it. If you add this important text like any other text, there are high chances that most of the people will ignore it.

Although there are many ways by which you can catch the user’s attention, like you can style the text with any eye catching color or change the background of the text. But the most appropriate way is to keep the text moving, Like this:

Example

This is a moving text!….

So, to do that we will use an HTML <marquee> tag. Along with this <marquee> tag we have to use various other attributes to make the movable text somewhat stylish.

HTML `<marquee>` Tag

HTML <marquee> tag is used to create a moving text on a web page. For example you can see in an above example how the text “This is a moving text!….” is continuously moving from left to right and right to left. Here is how you can add the <marquee> tag in an html document.

Example

<html>
<head>
</head>
<body>
<h1>HTML marquee Tag.</h1>
<marquee>This is a moving text.</marquee>
</body>
</html>

Copy the Code and Run it Here

Run this code on our free HTML Editor and you will see how the text “This is a moving text.” is moving from one position to another.

Now we can also add various attributes along with the <marquee> tag, to make this moving text look more stylish.

HTML `<marquee>` Tag Attributes

We can add various attributes along with the <marquee> tag, that controls behavior and appearance of the text. Those attributes are:

The behavior Attribute

This attribute specifies the scrolling behavior of the text. It’s possible values are:

scroll:- This attribute value scrolls the text continuously, It is a default attribute value.
slide:- This attribute value scrolls the text in a sliding motion.
alternate:- This attribute value scrolls the text back and forth.

In an example below let’s write a code and add this behavior attribute along with the <marquee> tag.

Example

<html>
<head>
</head>
<body>
<h1>HTML marquee Tag.</h1>
<marquee behvior="alternate">This is a moving text.</marquee>
</body>
</html>

Copy the Code and Run it Here

The direction Attribute

The direction attribute specifies the direction of the scrolling text. It’s possible values are:

Left:- This attribute value scrolls the text from right to left. It is a default value of the direction attribute.
right:- This attribute value scrolls the text from left to right.
up:- This attribute value scrolls the text from bottom to top.
down:- This type of attribute value scrolls the text from top to bottom.

Here is how we can add this attribute along with the <marquee> tag.

Example

<html>
<head>
</head>
<body>
<h1>HTML marquee Tag.</h1>
<marquee behvior="alternate" direction="up">This is a moving text.</marquee>
</body>
</html>

Copy the Code and Run it Here

The `scrollamount` Attribute

The scrollamount attribute is used to set the speed of the scrolling text. It represents the number of pixels the text moves in each animation frame. The higher value means the faster scrolling speed. It’s default value is around 6px.

Here is how we can add the scrollamount attribute along with the <marquee> tag.

Example

<html>
<head>
</head>
<body>
<h1>HTML marquee Tag.</h1>
<marquee behvior="alternate" direction="up" scrollamount="8px">This is a moving text.</marquee>
</body>
</html>

Copy the Code and Run it Here

The `width & height` Attribute

The width and height attribute specifies the width and height of the marquee container. You can add it’s value either in pixels (px) or in percentage (%).

In an below example, let’s write a code and add all these attributes along with the <marquee> tag.

Example

<html>
<head>
</head>
<body>
<h1>HTML marquee Tag.</h1>
<marquee behvior="alternate" direction="left" scrollamount="8px" width="300px" height="100px">This is a moving text.</marquee>
</body>
</html>

Copy the Code and Run it Here

The `style` Attribute

The style attribute helps us to make our scrolling text stylish. We can change the color, background color, add borders of the scrolling text with the help of style attribute.

Here is an example of how we can make our scrolling text stylish by using the style attribute along with the <marquee> tag.

Example

<html>
<head>
</head>
<body>
<h1>HTML marquee Tag.</h1>
<marquee behvior="alternate" direction="left" scrollamount="8px" width="300px" height="100px" style="background:aqua; border:red 2px SOLID">This is a moving text.</marquee>
</body>
</html>

Copy the Code and Run it Here

You can set the width and height of the tag according to your preference, and make it look more stylish. How to Move Text HTML.

Previous

Next

Share This Post!

How to Move Text HTML