HTML: Marquees

Lesson 11 Review

In our last lesson, we learned about HTML Forms. Remember that to send secure data (like a password) or a file, you must use method="POST", and to upload files, you must include enctype="multipart/form-data".

An HTML marquee is a scrolling piece of text or an image displayed either horizontally across or vertically down your webpage. It acts like a digital news ticker. It is created using the <marquee> tag.

CRITICAL DEPRECATION WARNING: The HTML <marquee> tag is obsolete and officially deprecated in HTML5. Modern browsers may drop support for it at any time. It is highly recommended that you do not rely on this tag for new production websites. Instead, professional developers use CSS Keyframe Animations to create scrolling effects. However, understanding this tag is necessary for maintaining legacy web pages.

Step 1: Syntax and The 10 Core Attributes

The basic syntax wraps text or images inside the tag: <marquee>Your Message Here</marquee>.

To control how the marquee behaves, HTML provides 10 specific attributes. As a developer, you must understand the math behind how the browser calculates the animation speed.

• width: Specifies the width of the marquee (e.g., "100px" or "50%").
• height: Specifies the height of the marquee.
• direction: The direction the text travels. Values: up, down, left, right. (Default is left).
• behavior: Defines the animation type.
  • scroll: Wraps around the screen continuously (Default).
  • slide: Scrolls in once and stops when it hits the edge.
  • alternate: Bounces back and forth between the edges.
• scrolldelay: The time (in milliseconds) the browser waits before jumping to the next frame. (e.g., "10").
• scrollamount: The distance (in pixels) the text jumps per frame. (e.g., "10"). Note: High scrollamount + low scrolldelay = very fast movement!
• loop: How many times to play the animation. The default is INFINITE.
• bgcolor: Sets the background color behind the scrolling text (Name or Hex).
• hspace: Specifies horizontal margin space outside the marquee.
• vspace: Specifies vertical margin space outside the marquee.

Step 2: Practical Examples

Let's look at four distinct ways to utilize the marquee attributes to create different visual effects.

Example 1: The Basic Default Marquee

If you provide no attributes, the text will scroll from the right side to the left side infinitely.

<marquee>Breaking News: Global markets reach all-time high!</marquee>

Output:

Breaking News: Global markets reach all-time high!

Example 2: Controlling Width & Background

You can restrict the marquee to only take up a specific percentage of the screen and give it a background color so users can see its boundaries.

<marquee width="50%" bgcolor="#FFF3CD">
  System Maintenance Scheduled for Midnight.
</marquee>

Output:

System Maintenance Scheduled for Midnight.

Example 3: Changing Direction to Right

By using the direction attribute, we can make the text enter from the left side and travel to the right side.

<marquee direction="right" behavior="alternate">
  This text bounces back and forth!
</marquee>

Output:

This text bounces back and forth!

Example 4: Vertical Scrolling (Movie Credits)

You can create a "movie credits" effect by giving the marquee a fixed height and setting the direction to up.

<marquee direction="up" height="80" scrollamount="2">
  Lead Developer: Jane Doe

  Database Admin: John Smith

  UI/UX Designer: Alex Johnson
</marquee>

Output:

Lead Developer: Jane Doe

Database Admin: John Smith

UI/UX Designer: Alex Johnson

Modern Developer Note (CSS Alternative): To achieve a scrolling marquee today without using deprecated tags, developers use CSS Keyframes. They create a container with overflow: hidden, and animate a paragraph inside it using transform: translateX(100%) to translateX(-100%). This utilizes the computer's GPU, resulting in much smoother, stutter-free animations!

Final Quiz: Test Your Engineering Logic

Click the buttons below to check your understanding of the legacy Marquee tag.

1. What is the fundamental difference between the `scrollamount` and `scrolldelay` attributes?

A) scrollamount sets the height, scrolldelay sets the width.

Incorrect. Width and height are controlled by the `width` and `height` attributes.

B) scrollamount is the distance jumped in pixels, scrolldelay is the time paused in milliseconds.

Correct! To make a marquee faster, you increase the `scrollamount` (bigger jumps) and decrease the `scrolldelay` (less waiting time between jumps).

C) They do the exact same thing.

Incorrect. One deals with physical distance, the other deals with time.

2. If you set the attribute `behavior="slide"`, what will the text do?

A) It will scroll across the screen once and stop permanently when it hits the far edge.

Correct! Unlike "scroll" which loops infinitely, "slide" enters the screen and halts as soon as the text touches the opposite margin.

B) It will bounce left and right continuously.

Incorrect. The bouncing behavior is achieved by using `behavior="alternate"`.

C) It will disappear instantly.

Incorrect. It slides in normally, but just doesn't loop.

3. Why does the W3C (World Wide Web Consortium) strongly advise against using the <marquee> tag?

A) Because it is deprecated; structural HTML should not be used to create visual animations.

Correct! HTML is strictly for structuring data. Visual animations belong in CSS or JavaScript. The marquee tag breaks this rule, which is why it was deprecated in HTML5.

B) Because it costs money to use.

Incorrect. All standard HTML tags are free and open-source.

C) Because it causes viruses.

Incorrect. HTML tags do not cause viruses; they simply dictate how a browser renders text.

Class Dismissed!

You have learned how to read and write legacy Marquee animations, and you understand the theory of frame-based rendering (`scrollamount` vs `scrolldelay`). Most importantly, you know the professional standards moving forward.

Keep advancing your Web Development skills!