HTML 5 Marquee Tag with attributes

Created By Editorial Board

HTML 5 Marquee Tag with attributes:

HTML 5 marquee tag is utilized to scroll specific text or string in particular direction. HTML marquee tag is common same like other html 5 tags. We will learn about html marquee tag with new additional attributes. As everyone knows, If we need something else in scroll form then we utilize this tag. In above line, I mentioned about additional attributes like direction of string, marquee scrolling speed, marquee stop if cursor over on string and again if cursor out on string, marquee scrolling in loops and many more additional attributes. Mostly we utilize this marquee tag in news headlines on website under header. Let’s start, Hopefully all we know about this one simple marquee.

<html>
<title>Marquee tag tutorial by knowledgeidea.com</title>
<head></head>
<body>
<marquee>Breaking news:Wordpress have multiple features</marquee>
</body>
</html>

Above marquee code is quit simple. Now adding some additional attributes inside marquee to enhance marquee tag.

<html>
<title>Marquee tag tutorial by knowledgeidea.com</title>
<head></head>
<body>
<marquee behavior="scroll" bgcolor="yellow" onmouseover="this.stop();" onmouseout="this.start
();">Breaking news:How are you pakistan... how about you</marquee>
</body>
</html>

Keep attention on above marquee code, In which you will see some code like behaviour=”scroll” this attribute scroll string or text with consistency. Slightly ahead, you will see bgcolor=”yellow” using for background colour, hope you already familiar with background colour attribute. Slightly ahead, you will see onmouseover=”this.stop();” It does stop scroll the text when someone else take cursor over the text or string. Next is onmouseover=”this.start();” It does starts scroll the text when someone else take out cursor over the text.

Now add few attribute in the above marquee tag. You can see that, we are going in depth of marquee tag on every turn. Let’s see.

<html>
<title>Marquee tag tutorial by knowledgeidea.com</title>
<head></head>
<body>
<marquee behavior="scroll" bgcolor="yellow" scrolldelay="5" loop="3">Breaking news:How are you pakistan... how about you</marquee>
</body>
</html>

As we said above, We can take control on marquee speed easily. You will find scrolldelay=”5″ this attribute monetize the marquee speed with accuracy. This attribute delay the marquee with the provided number of value, you can try 5,10,100 number values etc with scrolldelay=”number values”as yourself for practice. Few characters ahead, you can see loop=”3″ this attribute work as a scrolling loop means that, if you put 3 number value of loop then its scrolls the text three-time and stop after finish the loop.Some important marquee attributes are explicitly explain given as under.

Attributes	Value	Short description
bgcolor=”Green”	Name of color & color code like, #fffff	Use for background color.
behavior=”Scroll”	Value could be Scroll,Slide,right,left,up,down,alternate	Use for scrolling direction.
onmouseover=”this.stop();”	Value must be this.stop();	Use for stop scrolling text or string.
onmouseout=”this.start();”	Value must be this.start();	Use for start scrolling text or string.
Scrolldelay=”5″	Value in Numbers	Use for delay reduce/delay time in marquee.
scrollamount=”10″	Value in Numbers	Use for increment/Grow in speed.
Loop=”4″	Value in Numbers	Use for circling/loop text with in given value of number
width=”12px” height=”12%”	Both attributes value in numbers or percentage	User for adjust marque area/height or width

Above all attributes are mentioned with short description, you can simply add these attributes inside marquees and try it yourself. Hopefully you will see satisfy result. I personally suggest you 🙂 See the list of important html 5 tags.

Let us know, about your opinion and skillful ideas. If you have further query then you can comment below. You can subscribe our newsletter to keep update yourself. Your feedback is respectful for us.

3.5 2 votes

Article Rating