HTML - Marquee

The <marquee> element in HTML is a container tag used to create scrolling, ticker-style animations for text or images horizontally or vertically across a display area. Originally introduced by Microsoft Internet Explorer in the 1990s, the marquee tag became a staple for breaking news banners and notification tickers.

Important Standard Notice: The <marquee> tag is officially deprecated/obsolete in HTML5 and violates modern WCAG accessibility guidelines. However, it is still frequently included in university BCA, MCA, and diploma examination syllabi. Below, we cover both the traditional exam attributes and the modern CSS3 animation standard used by professional developers today.

1. Traditional <marquee> Tag Attributes Reference

For university exams and viva questions, you should know these core attributes:

Attribute	Allowed Values	Description & Behavior
`direction`	`left`, `right`, `up`, `down`	Sets the direction in which the content scrolls. Default is `left`.
`behavior`	`scroll`, `slide`, `alternate`	scroll: Continuously wraps around from one side to the other (default). slide: Scrolls in once and stops permanently at the boundary. alternate: Bounces back and forth between left and right edges like a ping-pong ball.
`scrollamount`	Number (pixels)	Defines the jump distance in pixels per animation frame. Higher numbers increase scrolling speed (e.g. `scrollamount="10"`).
`scrolldelay`	Number (milliseconds)	Defines the delay between animation steps in milliseconds (e.g. `scrolldelay="100"`).
`loop`	Number / `infinite`	Specifies how many times the marquee should cycle. A value of `-1` or `infinite` loops perpetually.
`bgcolor`	Color name / HEX	Sets the background color of the scrolling banner container.
`height` & `width`	Pixels / Percentages	Controls the bounding box dimensions of the marquee.
`hspace` & `vspace`	Number (pixels)	Defines horizontal and vertical margin padding around the marquee container.

2. Traditional Marquee Direction Examples

Example 1: Scroll to the Right

<marquee direction="right" bgcolor="#e8f8f5" scrollamount="6">
  Welcome to Veewom Learning Portal &mdash; Scrolling Right
</marquee>

Welcome to Veewom Learning Portal — Scrolling Right

Example 2: Scroll to the Left (Default)

<marquee direction="left" bgcolor="#fef9e7" scrollamount="6">
  Important: Semester Examination schedule has been released!
</marquee>

Important: Semester Examination schedule has been released!

Example 3: Vertical Scroll (Direction Up & Down)

<!-- Scrolling Upwards -->
<marquee direction="up" height="80px" scrollamount="3">
  Notice 1: Admission open for BCA 2026 Batch<br>
  Notice 2: Submit Lab Journal by Friday
</marquee>

Notice 1: Admission open for BCA 2026 Batch
Notice 2: Submit Lab Journal by Friday

3. Interactive Feature: Pause on Hover (stop & start)

A classic exam requirement is making a marquee pause when the user hovers over it with their mouse and resume when the mouse leaves. This is achieved using JavaScript event handlers:

<marquee direction="left" 
         scrollamount="5" 
         onmouseover="this.stop();" 
         onmouseout="this.start();">
  Hover over this text to pause reading! Move mouse away to resume.
</marquee>

☞ Hover over this text to pause reading! Move your cursor away to resume animation.

4. The Modern Standard: CSS3 Scrolling Animation

Because the <marquee> tag is deprecated in HTML5, professional web developers and bloggers create ticker bars using modern, GPU-accelerated CSS3 animations (@keyframes):

<!-- Modern HTML markup -->
<div class="ticker-wrap">
  <div class="ticker-move">
    <span>Breaking News: Veewom launches updated HTML5 &amp; Web Programming curriculum!</span>
  </div>
</div>

/* Modern CSS3 Styling & Animation */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  background-color: #2c3e50;
  padding: 10px 0;
  white-space: nowrap;
  box-sizing: border-box;
}
.ticker-move {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 15s linear infinite;
}
.ticker-move:hover {
  animation-play-state: paused; /* Pause on hover */
}
.ticker-move span {
  color: #f1c40f;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

5. Hands-on Practice Session: Modern Breaking News Ticker

Assignment Scenario: Create a full-width university campus portal alert bar. Provide a clean CSS3-powered ticker that glides continuously from right to left and pauses instantly when the user points their mouse to read the headline.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern News Ticker Practice</title>
  <style>
    .news-banner {
      display: flex;
      align-items: center;
      background: #1e272c;
      color: #fff;
      font-family: Arial, sans-serif;
      overflow: hidden;
      border-radius: 4px;
    }
    .news-label {
      background: #e74c3c;
      color: #fff;
      padding: 10px 16px;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 13px;
      letter-spacing: 1px;
      z-index: 2;
    }
    .ticker-container {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
    }
    .ticker-track {
      display: inline-block;
      padding-left: 100%;
      animation: scrollTrack 18s linear infinite;
    }
    .ticker-track:hover {
      animation-play-state: paused;
      cursor: pointer;
    }
    @keyframes scrollTrack {
      0% { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }
  </style>
</head>
<body style="padding: 20px;">

  <div class="news-banner">
    <div class="news-label">Updates</div>
    <div class="ticker-container">
      <div class="ticker-track">
        Final Semester Exam Hall Tickets Available from Oct 10 &bull; Annual Tech Fest Registrations Open &bull; Congratulations to Campus Placement Selects!
      </div>
    </div>
  </div>

</body>
</html>

6. BCA University Exam Viva Questions

Q1. What is the <marquee> tag and what are its three allowed 'behavior' values?

The <marquee> tag creates scrolling text or images. Its three behavior values are:
1. scroll: Content scrolls across and loops continuously from edge to edge.
2. slide: Content scrolls across once and halts at the opposite border.
3. alternate: Content bounces back and forth continually between edges.

Q2. What is the difference between 'scrollamount' and 'scrolldelay'?

scrollamount defines the distance in pixels that the marquee jumps in each movement step. Higher numbers make it move faster. scrolldelay defines the time interval (in milliseconds) between each jump. Higher numbers slow down the motion.

Q3. Why was the <marquee> tag deprecated in HTML5?

1. Separation of Concerns: Animation is a presentational concern that belongs in CSS, not HTML markup.
2. Accessibility (WCAG 2.1): Moving text distracts users with cognitive impairments and makes content nearly impossible for screen magnifiers to track.
3. Performance: Browser implementation was non-standard and unoptimized.

Q4. How do you pause a marquee on mouse hover?

Attach DOM event handlers to the element: onmouseover="this.stop();" to pause scrolling and onmouseout="this.start();" to resume scrolling when the mouse cursor departs.

Q5. How do modern developers replace marquee functionality using CSS3?

Modern developers use CSS3 keyframe animations with the transform: translateX() property inside an overflow: hidden wrapper. Pausing is achieved smoothly with animation-play-state: paused; on hover.