HTML Marquee Tag

Mohammed Imtiyaz Jan 26, 2015
Next

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag.

Syntax

A simple syntax to use HTML <marquee> tag is as follows

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text message or image
</marquee>

Attributes & Descriptions

Attribute Value Description
behavior
  • scroll
  • slide
  • alternate
 Defines the type of scrolling.
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname
 Defines the background color of the marquee tag.
direction
  • up
  • down
  • left
  • right
 Defines the direction of the scrolling text.
height pixels or % Defines the height of marquee.
loop number Specifies how many times the text should loop in marquee. The default value is infinite, which means that the marquee loops endlessly.
scrollamount number Define scrolling speed.
width pixels or % Defines the width of marquee.

Below are few examples to demonstrate the usage of marquee tag.

Example 1

<!DOCTYPE html>
<html>
<head>
    <title>HTML Marquee Tag</title>
</head>
<body>
    <marquee direction="up"
             scrollamount="5"
             onmouseover="this.stop();"
             onmouseout="this.start();">
        <p>ASP.Net</p>
        <p>C#</p>
        <p>Vb.net</p>
        <p>HTML</p>
        <p>jQuery</p>
    </marquee>
</body>
</html>

ASP.Net

C#

Vb.net

HTML

jQuery

Example 2

<!DOCTYPE html>
<html>
   <head>
      <title>HTML marquee Tag</title>
   </head>	
   <body>
      <marquee>This is basic example of marquee</marquee>
   </body>	
</html>

This will obtain the following result

This is basic example of marquee

Example 3

<!DOCTYPE html>
<html>
   <head>
      <title>HTML marquee Tag</title>
   </head>
   <body>
      <marquee width="50%">This example will take only 50% width</marquee>
   </body>
</html>
This example will take only 50% width

Example 4

<!DOCTYPE html>
<html>
   <head>
      <title>HTML marquee Tag</title>
   </head>
   <body>
      <marquee direction="right">This text will scroll from left to right</marquee>
   </body>
</html>
This text will scroll from left to right

Example 5

<!DOCTYPE html>
<html>
   <head>
      <title>HTML marquee Tag</title>
   </head>
   <body>
      <marquee direction="up">This text will scroll from bottom to up</marquee>
   </body>
</html>
This text will scroll from bottom to up

Recent Post

Tags

ASP.Net Javascript SQL HTML Ajax Apps