<marquee> Tag in HTML – Full Details with suitable example

  • The <marquee> tag is an HTML element used to create scrolling text or images that move automatically across a webpage.
  • The <marquee> tag is used to move any text, image or any graphics in html.
  • It was introduced in older versions of HTML and is not part of the HTML5 standard (deprecated). However, many browsers still support it for backward compatibility.

Syntax (Marquee Tag in HTML)

<marquee> Tag in HTML – Full Details with suitable example

<marquee attribute="value">Scrolling Content</marquee>

Anything placed inside <marquee> (text, images, links, etc.) will scroll automatically.

Attributes of <marquee>

Here are the commonly used attributes:

  1. direction

    • Defines the scrolling direction.

    • Values: left (default), right, up, down.

    • Example:

      <marquee direction="right">Scrolling to Right</marquee>

  2. behavior

    • Defines the type of scrolling.

    • Values:

      • scroll → Scrolls continuously (default).

      • slide → Stops when it reaches the end.

      • alternate → Bounces back and forth.

    • Example:

      <marquee behavior="alternate">Bouncing Text</marquee>

  3. scrollamount

    • Sets the speed of scrolling (in pixels). Higher value = faster speed.

    • Example:

      <marquee scrollamount="10">Fast Scrolling</marquee>

  4. scrolldelay

    • Defines the delay between each scroll movement (in milliseconds).

    • Example:

      <marquee scrolldelay="200">Slow Delay Scrolling</marquee>

  5. loop

    • Defines how many times the marquee will scroll.

    • Default: infinite.

    • Example:

      <marquee loop="3">Scrolls 3 Times Only</marquee>

  6. bgcolor

    • Sets the background color of the marquee area.

    • Example:

      <marquee bgcolor="yellow">Colored Background</marquee>

  7. width & height

    • Defines the marquee area size.

    • Example:

      <marquee width="400" height="50">Custom Size</marquee>

Examples (Marquee Tag in HTML)

Example 1: Basic Scrolling Text

<marquee>Welcome to My Website!</marquee>

Example 2: Scroll Direction

<marquee direction="right">Scrolling Right</marquee>
<marquee direction="up">Scrolling Up</marquee>

Example 3: Behavior Types

<marquee behavior="scroll">Normal Scroll</marquee>
<marquee behavior="slide">Slide Scroll</marquee>
<marquee behavior="alternate">Bouncing Scroll</marquee>

Example 4: Speed Control

<marquee scrollamount="2">Slow Speed</marquee>
<marquee scrollamount="15">Fast Speed</marquee>

Example 5: Image inside Marquee

<marquee direction="left" scrollamount="5">
<img src="logo.png" width="100" height="50" alt="Logo">
</marquee>

Example 6: Marquee with Background and Size

<marquee bgcolor="lightblue" width="400" height="60" direction="right" scrollamount="8">
Scrolling with Background Color and Fixed Size
</marquee>

Important Notes

  • <marquee> is deprecated in HTML5 (not recommended for new projects).

  • Modern alternatives: CSS animations or JavaScript for scrolling effects.

  • Example using CSS (recommended):

Marquee Tag in HTML – Full Details with suitable example

<!DOCTYPE html>
<html>
<head>
<title>Marquee Example</title>
</head>
<body>
<b>Hello Students!</b>
<marquee direction=”left” behavior=”alternate” scrollamount=”25″>
Welcome to My Website! www.csaccept.com
</marquee>
</body>
</html>