Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML marquee tag

Posted in HTML Tutorial
Updated on May 17, 2024
By Mari Selvan
👁️ 36 - Views
⏳ 4 mins
💬 1 Comment
HTML marquee tag

Photo Credit to CodeToFun

🙋 Introduction

The <marquee> tag in HTML is a classic element that allows you to create scrolling text or images within a web page. Despite its deprecated status in HTML5, understanding its usage can still be valuable for certain applications.

This guide will delve into the nuances of using the <marquee> tag effectively.

🤔 What is <marquee> Tag?

The <marquee> tag is an HTML element used to create scrolling text or images horizontally or vertically within a web page. It was widely used in the early days of the web for creating attention-grabbing effects.

🚫 Deprecated Status:

It's important to note that the <marquee> tag is deprecated in HTML5 and no longer supported by major web browsers. Its usage is strongly discouraged due to accessibility concerns and user experience issues. Modern web standards advocate for more user-friendly and inclusive design practices.

💡 Syntax

To implement the <marquee> tag, simply enclose the content you want to scroll within the opening and closing <marquee> tags. You can customize the direction, behavior, and speed of the scrolling using attributes.

index.html
Copied
Copy To Clipboard
<marquee direction="left" behavior="scroll" scrollamount="3">Your Scrolling Content Here</marquee>

🧰 Attributes

The <marquee> tag supports several attributes to control the scrolling behavior:

  • direction: Specifies the direction of the scrolling motion (left, right, up, or down).
  • behavior: Defines the scrolling behavior (scroll, slide, or alternate).
  • scrollamount: Sets the speed of the scrolling.
  • loop: Specifies the number of times the marquee should loop (use -1 for infinite looping).

📚 Common Use Cases

  1. Scrolling Text:

    The primary use case of the <marquee> tag is to create attention-grabbing scrolling text effects.

    index.html
    Copied
    Copy To Clipboard
    <marquee behavior="scroll" direction="left">Welcome to Our Website!</marquee>
  2. Scrolling Images:

    You can also use the <marquee> tag to create scrolling images within your web page.

    index.html
    Copied
    Copy To Clipboard
    <marquee behavior="scroll" direction="left">
      <img src="image1.jpg" alt="Image 1">
      <img src="image2.jpg" alt="Image 2">
      <img src="image3.jpg" alt="Image 3">
    </marquee>

🖥️ Browser Support

Although widely supported in older browsers, it's important to note that the <marquee> tag is deprecated in HTML5 and may not be supported in future browser versions. Consider alternative approaches for achieving scrolling effects to ensure compatibility with modern web standards.

  • Google Chrome: Partial support (some versions may have limitations).
  • Mozilla Firefox: Partial support (some versions may have limitations).
  • Microsoft Edge: Partial support (some versions may have limitations).
  • Safari: Partial support (some versions may have limitations).
  • Opera: Partial support (some versions may have limitations).
  • Internet Explorer: Partial support (some versions may have limitations).

Ensure you test your code in various browsers to guarantee a seamless experience for your audience.

🏆 Best Practices

  • Use the <marquee> tag sparingly and consider alternative methods for achieving similar effects using CSS animations or JavaScript.
  • Avoid excessive or distracting use of scrolling content, as it can negatively impact user experience and accessibility.

🎉 Conclusion

While the <marquee> tag remains a nostalgic element from the early days of the web, its usage is no longer recommended for modern web development practices.

However, understanding its implementation can still be valuable for certain scenarios, particularly for maintaining compatibility with legacy systems.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy