HTML <marquee> is used to slide or scroll contents in an HTML page. The contents can be texts or images or any HTML elements. They can be styled as well adding CSS to the marquee element itself or by adding some inline styles to the contents.
<marquee>This is an HTML marquee.</marquee>
HTML Marquee - Attributes
The default marquee content scrolls from the right end to the left end of the screen and then restarts from the right but we can add different attributes to change its speed, direction, behavior, etc.
HTML Marquee - Behavior Attribute
The default marquee behavior is to scroll from right end to the left end of the screen and restart from the right. But, with behavior attribute, you can make it stop on the left end or move in reverse direction from the left to right end.
<marquee behavior="alternate"> This is an HTML marquee with behaviour set as alternate. </marquee>
<marquee behavior="scroll"> This is an HTML marquee with behaviour set as scroll. </marquee>
<marquee behavior="slide"> This is an HTML marquee with behaviour set as slide. </marquee>
HTML Marquee - Width Attribute
You can also set the width of an HTML marquee either in pixel value or in percentage value with relation to the width of the screen.
<marquee width="50%"> This is an HTML marquee with width defined. </marquee>
HTML Marquee - Scrollamount Attribute
You can also set the speed of the marquee scroll using scrollamount attribute. The default scrollamount is 6. Increase the number to make the marquee scroll faster or decrease it to make the marquee scroll slower.
<marquee scrollamount="10"> This is an HTML marquee with speed defined. </marquee>
HTML Marquee - Direction Attribute
You can also set the direction where the marquee content be heading towards. The default value is left and other available options are right, up and down.
When you set the direction of an HTML marquee to move vertically instead of the default horizontal direction, you will need to define the height of the marquee as well to make it look good. Hence, the height attribute comes handy in such cases.
<marquee direction="up" height="100"> This is an HTML marquee with direction defined. </marquee>
HTML Marquee - Onmouseover and Onmouseout Attributes
<marquee onmouseover="stop()" onmouseout="start()"> This is an HTML marquee with action on mouse movement defined using <strong>onmouseover</strong> and <strong>onmouseout</strong>. </marquee>