HTML Marquee Tag — PBA Institute Tutorial
Chapter 06 · HTML Series
10 min read Beginner

HTML Marquee Tag

The HTML Marquee Tag is used to create scrolling text or images on a webpage. The content can scroll horizontally or vertically with adjustable speed, direction and behavior. Note: <marquee> is deprecated but still works in most browsers.

What is the Marquee Tag?

  • The <marquee> tag scrolls text or images automatically.
  • It supports attributes like direction, behavior, scrollamount.
  • Content can scroll left, right, up or down on the page.
  • Although deprecated in HTML5, it is still rendered by browsers for legacy use.

Why Use Marquee?

📢

Notifications

Display breaking news or announcements that grab attention.

🎯

Promotions

Highlight discounts, offers and call-to-action messages.

🎨

Visual Effect

Add motion to static pages for a lively appearance.

🔄

Auto Scrolling

Content moves automatically — no user action needed.

⚙️

Easy Setup

Just wrap your content inside <marquee> and it works.

📺

Tickers

Perfect for stock tickers, sports updates and news bars.

Marquee Syntax & Attributes

  • Basic: <marquee>Hello World</marquee>
  • direction: left, right, up, down
  • behavior: scroll, slide, alternate
  • scrollamount: Speed of scrolling (number)
  • scrolldelay: Delay between movements (in ms)
  • loop: Number of times marquee scrolls

Marquee Example

HTML Code — Marquee Example
<!DOCTYPE html>
<html>
<body>

  <marquee direction="left" scrollamount="6">
    Welcome to PBA Institute — Learn HTML!
  </marquee>

  <marquee direction="up" behavior="alternate" height="100">
    Vertical Scrolling Text
  </marquee>

</body>
</html>
Output Text scrolls from right to left, plus a vertical alternating scroll inside a 100px box.

Code Explanation

HTML Part Meaning
direction Sets scroll direction: left, right, up, or down.
scrollamount Sets speed; larger value = faster movement.
behavior Controls how content moves: scroll, slide, or alternate.
height / width Defines the area in which scrolling happens.
loop Number of times the content scrolls before stopping.

Marquee Attribute Categories

Direction
left right up down
Behavior
scroll slide alternate
Speed
scrollamount scrolldelay
Loop
loop height width

Use Cases

  • News Tickers: Display headlines that scroll continuously.
  • Stock Updates: Show live price changes in a moving bar.
  • Notices: Highlight exam dates, results or announcements.
  • Advertisements: Add attractive scrolling promotions.

Practice Questions

  • Create a marquee that scrolls from right to left.
  • Make a vertical marquee with behavior="alternate".
  • Use scrollamount="15" for fast scrolling text.
  • Combine direction and behavior to scroll an image.

Frequently Asked Questions

Is the marquee tag still supported?

It is deprecated in HTML5 but still works in most browsers. CSS animations are now recommended.

Can I change scroll speed?

Yes, use scrollamount or scrolldelay attributes to adjust speed.

Can marquee scroll vertically?

Yes, use direction='up' or direction='down'.

Is marquee good for SEO?

No, scrolling content can hurt readability. Use it sparingly.

Conclusion

The HTML Marquee tag adds movement and life to webpages. Although deprecated, it is still useful for legacy projects, notifications and tickers. For modern websites, prefer CSS animations.

Additional Tips

  • Use sparingly: Too much motion distracts users.
  • Consider CSS: Modern animations are smoother and recommended.
  • Accessibility: Provide a way to pause scrolling content.
  • Mobile-friendly: Test marquee on small screens.

HTML All Topics

Continue Learning