Creating a Marquee with HTML5

#webdev #html #css

In web development captivating user attention and delivering engaging content are paramount goals. One effective way to achieve this is by incorporating dynamic elements like marquees into your web pages. Marquees add movement and flair, making your content more eye-catching and interactive.

In this guide, we'll explore how to harness the power of HTML5 to create compelling marquees that enhance the visual appeal and user experience of your website.

Why Add Marquee to your websites

Adding a marquee to your website can be beneficial for several reasons, depending on the context and purpose of your web content. Here are some compelling reasons why you might consider incorporating a marquee into your website design:

Attention-Grabbing: Marquees are effective in grabbing users' attention due to their movement. They can help draw focus to important announcements, promotions, or featured content on your website.
Visual Interest: Marquees add a dynamic and interactive element to your web pages, enhancing visual interest and making your content more engaging. This can contribute to a more enjoyable user experience.
Highlight Important Information: Marquees can be used to highlight critical information such as upcoming events, limited-time offers, product launches, or news updates. The scrolling motion helps ensure that users notice and read the highlighted content.
Decorative Effects: Beyond conveying information, marquees can also be used for decorative purposes, adding flair and personality to your website design. They can serve as visually appealing elements that contribute to the overall aesthetics of the page.
Promotional Purposes: If you run an e-commerce website or promote products/services, marquees can be utilized to showcase promotions, discounts, new arrivals, best sellers, or customer testimonials. The movement can make these promotional elements more enticing and increase user engagement.
Breaking News or Updates: For news websites or blogs, marquees can be used to display breaking news headlines, latest articles, or real-time updates. This ensures that users are informed about the most recent developments without having to navigate through multiple pages.
Navigation and Menus: In some cases, vertical marquees can be used as navigation menus, especially for websites with a vast amount of content or categories. Users can scroll through the menu options vertically, providing an alternative navigation method.
Creating a Sense of Urgency: Marquees can create a sense of urgency or excitement, particularly when used for time-sensitive announcements, countdowns, or flash sales. The scrolling effect can convey a dynamic and active atmosphere.

What is a Marquee

A marquee is a scrolling text or image element used in web design to create movement and attract attention to specific content on a webpage. It can be horizontal, moving from right to left or left to right, or vertical, moving up or down. The term "marquee" originates from the canopy-like structure often seen at the entrance of theaters or hotels, which displays scrolling messages or advertisements.

Few examples of websites or applications that utilize marquee elements:

News Websites: Many news websites use horizontal marquees to display breaking news headlines or top stories. For instance, CNN's homepage may feature a scrolling marquee showcasing the latest news updates.
E-commerce Platforms: Online stores often use marquees to promote sales, discounts, or new product launches. Websites like Amazon may have a scrolling marquee at the top of the page highlighting ongoing deals.
Financial Portals: Websites focused on finance and stock market updates frequently use ticker tape-style marquees to display real-time stock prices, index values, and other financial data.
Event Websites: Websites promoting events such as concerts, conferences, or festivals may use marquees to announce upcoming schedules, guest speakers, or ticket availability.
Corporate Websites: Some corporate websites use marquees to showcase company achievements, awards, or corporate social responsibility initiatives.

Creating a Marquee

Let's Start by creating a new HTML document or opening an existing one in your preferred code editor. Here's a basic HTML structure:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Marquee Example</title>
   </head>
   <body>
       <!-- Marquee content goes here -->
   </body>
   </html>

To create a marquee effect, we'll use the <marquee> tag.

   <marquee direction="right">This is a scrolling text marquee.</marquee>

Adding Content within the Marquee:

You can add any text or HTML content within the <marquee> element. For example, you can include a paragraph of text or even an image:

   <marquee>
       <p>This is a scrolling text marquee with HTML content.</p>
       <img src="image.jpg" alt="Scrolling Image">
   </marquee>

Styling a Marquee

To style a marquee and customize its appearance, you can apply CSS styles to the <marquee> element. Here's a guide on how to change text color, font size, font family, adjust background color or image, and add padding and margins to the marquee element:

Changing Text Color, Font Size, and Font Family:

You can use CSS to change the text color, font size, and font family of the content inside the marquee. Here's an example:

   <style>
       /* CSS styles for the marquee */
       marquee {
           color: #333; /* Text color (dark gray) */
           font-size: 16px; /* Font size */
           font-family: Arial, sans-serif; /* Font family */
       }
   </style>

   <marquee>This is a styled marquee.</marquee>

In this example, the CSS styles within the <style> block target the <marquee> element. You can adjust the color, font-size, and font-family properties to customize the appearance of the text inside the marquee.

Adjusting Background Color or Image for the Marquee:

You can also set the background color or add a background image to the marquee using CSS:

   <style>
       /* CSS styles for the marquee */
       marquee {
           background-color: #f0f0f0; /* Background color (light gray) */
           /* Uncomment the line below and replace 'url(image.jpg)' with your image path */
           /* background-image: url(image.jpg); */ /* Background image */
           /* Additional background properties */
           background-repeat: no-repeat;
           background-size: cover;
       }
   </style>

   <marquee behavior="scroll" direction="left">This is a styled marquee with a background color or image.</marquee>

In this example, the CSS styles include background-color to set the background color and optional background-image, background-repeat, and background-size properties for adding a background image. Replace 'url(image.jpg)' with the path to your desired background image.

Adding Padding and Margins to the Marquee Element

You can add padding and margins to the marquee element to create space around its content:

   <style>
       /* CSS styles for the marquee */
       marquee {
           padding: 10px; /* Padding around the content */
           margin: 20px 0; /* Top and bottom margin (20px), no left or right margin */
       }
   </style>

   <marquee behavior="scroll" direction="left">This is a styled marquee with padding and margins.</marquee>

Real-world example

Let's create a real-world example of a marquee similar to what you might find on a news website or Televisions. We'll simulate breaking news updates scrolling horizontally at the top of the page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Breaking News Marquee</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      .breaking-news-marquee {
        background-color: red;
        color: #fff;
        display: flex;
        align-items: center;
      }

      .breaking-news {
        font-weight: bold;
        padding: 0.5%;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="breaking-news-marquee">
      <div class="breaking-news">Breaking</div>
      <div class="news-text" id="news-text">
        <marquee
          >New technology advancements • Apple just announced that its annual
          Worldwide Developers Conference (WWDC) will kick off on June 10, with
          the company expected to reveal an AI strategy during the keynote
          presentation. • Microsoft is reportedly restructuring its Windows and
          devices teams under new leadership as the company continues to shake
          up its structure following the high-profile hire of Mustafa Suleyman.
          • Researchers at MIT just introduced a new method called ‘Distribution
          Matching Distillation’ — enabling faster AI image generation while
          maintaining the quality of the original model.</marquee
        >
      </div>
    </div>
  </body>
</html>

Now if you open your browser, You should have something like:

Conclusion

Adding a marquee to your website can be a strategic way to enhance visual appeal, attract user attention, and deliver important messages effectively. Marquees can be utilized for various purposes such as displaying breaking news, highlighting promotions, or showcasing announcements.

Top comments (8)

Vibhor Sharma • Mar 28 • Edited

This is a deprecated feature as mentioned here on the MDN docs. Better to use CSS animations to create the same effect for better accessibility than use the <marquee> tag