[Secrets] HTML Marquee Tag And Its Attributes

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:14 mins read
You are currently viewing [Secrets] HTML Marquee Tag And Its Attributes

The HTML marquee tags create a scrolling or a moving element across the HTML document horizontally or vertically. This tag is very helpful for creating a notification, or moving content. But it is no longer available in HTML 5.

HTML marquee tag now a deprecated tag in HTML 5. W3C recommends not using the element in HTML 5 document. It still works in Browsers but not so for long, It may remove any time.

As an alternative of this tag in HTML 5, you can use CSS or JavaScript to create similar effects in your document.

In this article, you can learn marquee tags all attributes, methods, and event handlers. Also, you can learn default CSS by a Browser.

Marquee Tag – Syntax

An HTML marquee tag represents with <marquee> tag. First write the opening <marquee> tag and close </marquee> tag. Write between this tag what you want to scroll (text, image or an element).

<marquee>This is a notification<marquee>
This is a notification

Marquee Tag – Attributes

Marquee tag have special attributes

  • direction – The direction attribute sets the direction of the marquee tag. It has four values up, down, left, or right. By default, this value is set to left.
    • up – The Direction attribute value up set the marquee tag direction to up.
    • down – The Direction attribute value down set the marquee tag direction to down.
    • left – Set the marquee tag direction to left. When you don’t specify any value this set by default.
    • right – Set the direction value of the marquee tag to right.
  • behavior – This attribute species how the text, image, or an element scrolled within the marquee tag. It may have three values scroll, slide, or alternate.
    • scroll – The behavior attribute value scroll defines the marquee will scrolling in a specified direction.
    • slide – The slide value defines the marquee will be slide in a specified direction for one time.
    • alternate – The alternate value set the marquee behavior to alternate.
  • scrollamount – Set the scrolling speed in each pixel after the interval. By default, this value is set to 6. The greater value will speed up the marquee.
  • scrolldelay – Set the intervals in milliseconds between each jump. By default, its value is set to 85 milliseconds. If the millisecond specified less than 60, it will be ignored by Browser.
  • truespeed – The true speed and the scrolldelay attribute are related to each other. If the truespeed attribute is specified the scrolldelay attribute value less than 60 will not be ignored.
  • loop – The loop attribute specifies how many times the marquee will scroll. If no value is specified the default value is -1 which represents that the marquee will scroll for infinite times.
  • bgcolor – The bgcolor attribute specifies the background color of the marquee tag through the color name or color codes.
  • height – The height attribute specifies the height of the marquee.
  • width – Similarly the width attribute specifies the width of the marquee.
  • hspace – The hspace attribute sets the marquee tags horizontally margin.
  • vspace – vspace attribute specifies the vertical margin of the marquee tag.

Marquee Tag Direction Attribute

Direction attribute value is set to up.

<marquee direction="up">This is a notification</marquee>
This is a notification

Direction attribute value is set to down.

<marquee direction="down">This is a notification</marquee>
This is a notification

Direction attribute value is set to right.

<marquee direction="right">This is a notification</marquee>
This is a notification

Direction attribute value is set to left. This vale is set default by a Browser.

<marquee direction="left">This is a notification</marquee>
This is a notification

Behavior -Attribute

Behavior attribute is set to scroll. This value is set default by a Browser.

<marquee behavior="scroll">This is a notification</marquee>
This is a notification

Behavior attribute value is set to slide. This Movement will happen once.

<marquee behavior="scroll">This is a notification</marquee>
This is a notification

Behavior attribute value is set to alternate.

<marquee behavior="alternate">This is a notification</marquee>
This is a notification

The scrollamount attribute

The scrollamount attribute Set the scrolling speed in each pixel after the interval. By default, this value is set to 6. The greater value will speed up the marquee

<marquee scrollamount="2">This is a notification</marquee>
This is a notification

The scrolldelay attribute

The scrolldelay attribute Set the intervals in miliseconds betwween each jump. By default its value is set to 85 milisecond. If the milisecond specified less than 60, it will be ignored by Browser.

<marquee scrolldelay="500">This is a notification</marquee>
This is a notification

truespeed Attribute

The true speed and the scrolldelay attribute are related to each other. If the truespeed attribute is specified the scrolldelay attribute value less than 60 will not be igonered.

<marquee scrolldelay="20" truespeed="truespeed">This is a notification</marquee>
This is a notification

Loop Attribute

It specifies how many times the marquee will scroll. If no value is specified the default value is -1 which represents that the marquee will scroll for infinite times.

<marquee loop="10">This is a notification</marquee>
This is a notification

bgcolor Attribute

The bgcolor attribute specifies the background color of the marquee tag through the color name or color codes.

<marquee bgcolor="lightblue">This is a notification</marquee>
This is a notification

height Attribute

The height attribute specifies the height of the marquee. You can define its value in pixel or percentage.

<marquee height="100px">This is a notification</marquee>
This is a notification

width Attribute

The width attribute specifies the width of the marquee. You can defines its value in pixel or percentage.

<marquee width="300px">This is a notification</marquee>
This is a notification

hspace Attribute

The hspace attribute specifies the horizontal margin of the marquee tag in pixel or percentage.

<marquee hspace="100px">This is a notification</marquee>
This is a notification

vspace Attribute

The vspace attribute specifies the horizontal margin of the marquee tag in pixel or percentage.

<marquee vspace="50px">This is a notification</marquee>
This is a notification

Marquee Tag Methods

The marquee tag has two types of method start() and stop(). These methods are used to start and stop scrolling of the marquee.

Start() Method

The start() method are used to start scrolling of the marquee.

Stop() Method

And the stop() method are used to stop scrolling of the marquee. Here is the real example of this two method.

<marquee onmousehover="stop()" onmouseout="start()">This is a notification</marquee>
This is a notification

Marquee Tag Event Handlers

Actually events are fire when the particular action are performed. In the previous example we use onmouseover and onmouseout events. The marquee tag support global event, but it also support the following three event onbounce, onfinish and onstart.

onbounce

This events fires when the marquee reached the ends of its scroll position. Its only fire when its behavior attribute value is set to alternate.

onfinish

the event fires when the marquee finish its scrolling. This event work only if the loop attribute does not set to infinite.

onstart

This event fires when the marquee start scrolling.

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply