All About marquee Tag in HTML

All About marquee Tag in HTML

5 mins readComment
Esha
Esha Gupta
Associate Senior Executive
Updated on Apr 19, 2024 13:50 IST

Have you ever wondered how early websites created moving text or images? The <marquee> tag in HTML was once a popular choice for this, allowing text and images to scroll across the screen in various directions. Let's understand more!

In HTML (Hypertext Markup Language), tags are the basic building blocks used to create web pages. They are used to define and structure the content of a webpage. In this blog, we will dive deeper into marquee tag in HTML.

Span Tag in HTML
Span Tag in HTML
Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the tag in HTML comes into...read more

All About br Tag in HTML
All About br Tag in HTML
Have you ever wondered how to create a simple line break in your HTML content? The tag is your solution. It's a self-closing element used to insert line breaks,...read more

Learning div Tag in HTML
Learning div Tag in HTML
Have you ever wondered what keeps web pages organized and styled consistently? The HTML tag plays a crucial role in this. It's a versatile, block-level element used primarily as...read more

Learning ul Tag in HTML
Learning ul Tag in HTML
Have you ever wondered how to organize items on a webpage without any specific order neatly? The HTML tag is the solution, designed to create unordered lists with bullet...read more

All About meta Tag in HTML
All About meta Tag in HTML
Have you ever wondered how web pages communicate important information to browsers and search engines? HTML tags play a pivotal role in this process. They reside in the head...read more

Table of Content

 

What is a marquee Tag in HTML?

The <marquee> tag in HTML is used to create a scrolling piece of text or an image. It can scroll in various directions, such as left, right, up, or down. The most typical use was to create a scrolling text effect where the text moved horizontally across the screen. This was often used for news tickers or to draw attention to important information. Some websites used it to create dynamic headers or footers, often including moving text with information like contact details or social media links.

Syntax of marquee Tag in HTML

<marquee>This is a scrolling text!</marquee>

Marquee Tag Attributes

Attribute

Values

Description

direction

left, right, up, down

Specifies the direction in which the marquee content scrolls.

behavior

scroll, slide, alternate

Defines the type of movement of the marquee. 'scroll' is the default behavior, causing the content to scroll endlessly. 'slide' makes the content slide in and stop. 'alternate' causes the content to bounce back and forth.

scrollamount

number

Sets the amount of scrolling at each interval in pixels. Higher values result in faster scrolling.

scrolldelay

number

Sets the delay in milliseconds between each movement. Higher values result in slower scrolling.

loop

number

Specifies the number of times the marquee should loop. The default is infinite.

bgcolor

color

Sets the background color of the marquee. You can use color names or hex codes.

width

value (in px, %, etc.)

Sets the width of the marquee. It can be in pixels, percentages, etc.

height

value (in px, %, etc.)

Sets the height of the marquee. It can be in pixels, percentages, etc.

Usage of HTML marquee Tag with Examples

Let's see some examples showing the usage of the marquee tag in HTML.

Example 1: Basic Horizontal Scrolling Text

Problem Statement: Create a basic horizontal scrolling text.


   
<!DOCTYPE html>
<html>
<head>
<title>Basic Horizontal Scrolling</title>
</head>
<body>
<!-- Basic Marquee scrolling from right to left -->
<marquee>This is a basic scrolling text.</marquee>
</body>
</html>
Copy code

Output

 

The text "This is a basic scrolling text." scrolls horizontally from right to left across the screen.

Example 2: Scrolling Text with Increased Speed

Problem Statement: Increase the speed of scrolling text.


  
<!DOCTYPE html>
<html>
<head>
<title>Fast Scrolling Text</title>
</head>
<body>
<!-- Marquee with increased scrolling speed -->
<marquee scrollamount="10">Fast scrolling text!</marquee>
</body>
</html>
Copy code

Output

The text "Fast scrolling text!" scrolls faster due to the increased scrollamount value.

Example 3: Bouncing Text

Problem Statement: Create a text that bounces back and forth.


 
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Text</title>
</head>
<body>
<!-- Marquee with bouncing text behavior -->
<marquee behavior="alternate">Bouncing text!</marquee>
</body>
</html>
Copy code

Output

The text "Bouncing text!" moves back and forth within the marquee box, changing direction when it hits the frame's edges.

Example 4: Vertical Scrolling Text

Problem Statement: Make the text scroll vertically.


 
<!DOCTYPE html>
<html>
<head>
<title>Vertical Scrolling</title>
</head>
<body>
<!-- Marquee scrolling vertically upwards -->
<marquee direction="up">This text scrolls vertically up.</marquee>
</body>
</html>
Copy code

Output

The text "This text scrolls vertically up." scrolls upwards on the page.

Example 5: Scrolling Text with Delay

Problem Statement: Add a delay to the scrolling to slow it down.


 
<!DOCTYPE html>
<html>
<head>
<title>Slow Scrolling Text</title>
</head>
<body>
<!-- Marquee with slower scrolling -->
<marquee scrolldelay="100">This is a slowly scrolling text.</marquee>
</body>
</html>
Copy code

Output

The text "This is a slowly scrolling text." scrolls more slowly due to the increased scrolldelay value.

It is important to note that the <marquee> tag is a non-standard HTML element and has been deprecated in HTML5. Remember, while these examples use the <marquee> tag for demonstration, this tag is no longer recommended in modern web development and CSS animations or JavaScript should be used for similar effects.

Top 62+ HTML Interview Questions and Answers for 2024
Top 62+ HTML Interview Questions and Answers for 2024
Here are the HTML interview questions most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead...read more

How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

HTML Attributes Explained with Examples
HTML Attributes Explained with Examples
HTML attributes provide additional information about HTML elements. They are used to modify the behavior or appearance of an element. Attributes are specified within the opening tag of an element...read more

Creating HTML Links – Tutorial With Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples
HTML Lists: Ordered and Unordered Lists Explained with Examples
This tutorial explains how to create different types of lists: unordered, ordered, and description lists in HTML. In this blog, you will learn what are HTML lists and understand how...read more

Knowing nav Tag in HTML
Knowing nav Tag in HTML
Have you ever wondered how websites organize their menus and links for easy navigation? The HTML tag is the key for this which is specifically designed to define navigation...read more

Mastering Button Tag in HTML
Mastering Button Tag in HTML
Have you ever wondered how interactive buttons on websites are created? They're often made using the HTML tag, which allows developers to add clickable elements for various actions like...read more

All About anchor Tag in HTML
All About anchor Tag in HTML
Have you ever wondered how web pages are interconnected, allowing you to easily click and navigate from one page to another? This is made possible by the HTML anchor ()...read more

Learning body Tag in HTML
Learning body Tag in HTML
Do you know that the tag in HTML is where all the magic of a webpage happens? It's the container that holds everything you see on a web page, including...read more

Understanding SVG Tag in HTML
Understanding SVG Tag in HTML
Do you know the secret to crisp and scalable web graphics? It lies in the SVG tag in HTML! This powerful tool allows for the creation of vector-based graphics, ensuring...read more

Understanding ol Tag in HTML
Understanding ol Tag in HTML
Have you ever wondered how to present steps or rank items on a webpage clearly? The tag in HTML is your solution. It creates an ordered list where each...read more

Key Takeaways

  • The <marquee> tag in HTML creates scrolling text or images, useful for attention-grabbing or decorative effects on web pages.

  • It offers various attributes like direction, behavior, scrollamount, and scrolldelay for customizing the movement of content.

  • Despite its functionality, <marquee> is deprecated due to accessibility and usability issues and is not recommended in modern web development.

  • For similar effects with better standards compliance, CSS animations or JavaScript are preferred over the <marquee> tag.

FAQs

What is the purpose of the marquee tag in HTML?

The marquee tag was traditionally used to create a scrolling effect for elements within a webpage. Text or images inside a marquee tag would automatically move across the screen, either horizontally or vertically.

Why is the marquee tag not recommended in modern web development?

The marquee tag is not part of the HTML5 standard and is considered obsolete. It is not supported by many modern web browsers, and its use can lead to inconsistent behavior across different browsers. Instead, CSS animations or JavaScript are recommended for creating scrolling effects.

How was the marquee tag typically used in HTML?

The marquee tag was used by wrapping the text or image you wanted to scroll within the marquee tags. It had attributes to control the direction, speed, and behavior of the scrolling content.

What are the alternatives to the marquee tag for creating scrolling effects?

Modern alternatives to achieve similar effects include using CSS animations and transitions or JavaScript libraries. These methods are more flexible and consistent across different web browsers.

Can the marquee tag still be found in current web pages?

While it's possible to find the marquee tag in older web pages, it's highly discouraged in current web design due to its obsolescence and lack of support in modern web standards. Websites aiming for accessibility, modernity, and cross-browser compatibility should avoid using it.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio