HTML Tag – Complete Guide with Examples (Beginner-Friendly)

Introduction: What Is the HTML Marquee Tag?

The HTML <marquee> tag was used to create scrolling or moving text on a webpage.
You may have seen old websites with:

  • Text moving left to right

  • News tickers

  • Scrolling announcements

While <marquee> is easy to use, it is outdated and deprecated in modern HTML.

This guide explains:

  • What the <marquee> tag is

  • How it works

  • Its attributes and examples

  • Why it is not recommended

  • Modern alternatives using CSS

 

What Is the Tag in HTML?

The <marquee> tag makes text or images scroll automatically across the screen.

👉 In simple words:
<marquee> is used to create moving text.

Basic Syntax of <marquee>

<marquee>Scrolling text or image here</marquee>

Result

Text scrolls from right to left by default.

Example 1: Simple Scrolling Text

 
<marquee>Welcome to My Website</marquee>

Direction Attribute

You can control the direction of movement using the direction attribute.

Possible Values

  • left

  • right

  • up

  • down

Example

<marquee direction="right">This text scrolls from left to right.</marquee>

Speed Control Using scrollamount

The scrollamount attribute controls the speed.

<marquee scrollamount="10">Faster scrolling text</marquee>

👉 Higher value = faster speed

Behavior Attribute

Controls how the marquee moves.

Values

  • scroll (default)

  • slide

  • alternate

Example

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

Example 2: Multiple Attributes Together

<marquee direction="left" scrollamount="5" behavior="alternate">
  Important Announcement!
</marquee>

Using <marquee> with Images

<marquee>
  <img src="logo.png" alt="Logo" width="100">
</marquee>

Common Attributes of

AttributePurpose
directionMovement direction
scrollamountSpeed
behaviorScroll style
loopNumber of repeats
bgcolorBackground color

Why the Tag Is Not Recommended

The <marquee> tag is deprecated, meaning:

  • Not part of HTML5

  •  Poor accessibility

  • Bad for SEO

  •  Inconsistent browser support

  • Annoying user experience

👉 Modern web development does not use <marquee>

Accessibility & UX Problems

  • Screen readers struggle with moving text

  • Users find scrolling text distracting

  • No user control (pause/stop)

Modern Alternative to (Recommended)

CSS Animation (Best Practice)

HTML

 
<div class="scroll-text">Breaking News: Website Updated</div>

CSS

 
.scroll-text { width: 100%; overflow: hidden; white-space: nowrap; animation: scroll 10s linear infinite; } @keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

👉 This method is:

  • Accessible

  • Customizable

  • Professional

  • Supported everywhere

When Can You Still See ?

  • Old legacy websites

  • HTML learning demos

  • Interview questions (theory)

  • Exam-related content

⚠️ Learn it for knowledge, not for real projects.

Common Beginner Mistakes

  • Using <marquee> in modern websites
  •  Overusing scrolling text
  •  Ignoring accessibility
  • Thinking <marquee> is standard HTML

Best Practices for Scrolling Text and Animations

  • Avoid <marquee> in real projects
  • Use CSS animations instead
  • Keep animations minimal
  • Always consider accessibility

FAQs: HTML Tag

What does the <marquee> tag do?

It scrolls text or images automatically.

Is <marquee> supported in HTML5?

No, it is deprecated.

Should I use <marquee> today?

No, use CSS animations instead.

Why do exams still teach <marquee>?

For historical knowledge and legacy understanding.

What replaces <marquee> in modern HTML?

CSS animations and JavaScript.