All About marquee Tag in HTML
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.
Best-suited Web Development courses for you
Learn Web Development with these high-rated online courses
Read Later
Table of Content
- What is a marquee tag in HTML?
- Syntax of marquee Tag in HTML
- Usage of HTML marquee Tag with Examples
- Key Takeaways
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.
<!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>
Output
The text "This is a basic scrolling text." scrolls horizontally from right to left across the screen.
<!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>
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>
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>
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>
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.
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.
Top Picks & New Arrivals
