HTML Marquee Tag - October 3rd, 2024

Table of Contents

What Is HTML Marquee Tag?

The HTML Marquee tag is used to create scrolling text or images on a web page. When you use this tag, the content inside it will move from one side to another, or up and down, depending on how you set it. This can make a website look more dynamic and fun and will catch the user’s attention to your site.

HTML Marquee Tag – Key Takeaways

Understanding the meaning of HTML Marquee Tag.
Getting insights into the basic syntax of HTML Marquee Tag
Learning about marquee tag attributes.
Understanding the marquee tag in HTML example.

Basic Syntax of HTML Marquee Tag

The syntax of the HTML marquee tag is quite simple and easy to understand. It has one opening tag indicating the start and one closing tag indicating the end. It’s basic syntax is written below for your reference-

Syntax Of HTML Marquee Tag

<content needed to be scrolled>

</marquee>

Whatever text you put between the opening `<marquee>` and closing `</marquee>` tags will scroll across the screen. You can also add different attributes to control the direction, speed, and behavior of the scrolling text.

Marquee Tag Attributes

Attributes of HTML marquee tag help in controlling the looks and working of the text. Using these attributes generally enhances the overall appearance and behavior of the text written within the `<marquee>` tag.

There are plenty of attributes available in HTML marquee tags, each having a different role and purpose. Let’s look at the table below to understand all the major Marquee tag attributes, their syntax, and their uses.

Common Attributes Of HTML Marquee Tag
Attributes	Syntax	Uses
bgcolor	<marquee bgcolor=”Name of the color”>	Used for changing the background color of the text.
direction	<marquee direction=”left/right/up/down”>	It specifies the direction of scrolling content
loop	<marquee loop=”Number of Loop you want”>	It defines the number of times the content will move. The default value is infinite.
height	<marquee height=”value”>	It is used for defining the height of the text or image.
width	<marquee width=”value”>	It is used for defining the width of the text or image.
hspace	<marquee hspace=”value”>	Specify horizontal space around the text or image.
vspace	<marquee vspace=”value”>	Used for defining the vertical space around text or image.

Event Handler In Marquee Tag

An event handler is a piece of code that runs when a specific event occurs. For example, when you click a button or move your mouse over an image, the event handler responds by executing the specified action. Event handlers make web pages interactive and responsive to user actions. There are mainly three types of event handles used in HTML marquee tag, let us understand each one of them in detail below:

Onbounce Event Handler

The `onbounce` event handler is triggered when scrolling of marquee text reaches to an end. It allows you to execute code each time the text hits the end edge. For example, the color of a text can change every time it hits an end endge.

Onfinish

The `onfinish` event handler is used when the marquee text has finished scrolling. This is useful if you want to perform an action when the scrolling stops.

Onstart

The `onstart` event handler activates when the marquee text starts scrolling. You can use this to trigger actions right when the movement begins, such as hiding buttons.

Marquee Tag In HTML Example

Now that you are familiar with all the theoretical parts of the HTML marquee tag, let us understand its implementation and syntax with the help of an example written below:

HTML Marquee Tag Example Of Right to Left Scrolling

<!DOCTYPE html>

<html>

<head>

<title>Marquee Tag</title>

<style>

.main {

text-align: center;

}

.marq {

padding-top: 30px;

padding-bottom: 30px;

}

.PW1, .PW2 {

font-size: 48px; /* Increased font size */

font-weight: bold;

color: yellow; /* Changed color to yellow for better contrast */

padding-bottom: 10px;

}

</style>

</head>

<body>

<marquee class=”marq” bgcolor=”Blue”

direction=”left” loop=””>

PW Skills

</div>

A Physics Wallah Tech Portal

</div>

</marquee>

</div>

</body>

</html>

Output-

Example 2-

After being familiar with left to right scrolling of Marquee text, let us understand the code for scrolling the code from left to right.

Example Of HTML marque Tag with Bottom to Top Scrolling

<!DOCTYPE html>

<html>

<head>

<title>Marquee Tag</title>

<style>

.main {

text-align: center;

}

.marq {

padding-top: 30px;

padding-bottom: 30px;

height: 200px;

overflow: hidden;

}

.PW1, .PW2 {

font-size: 48px;

font-weight: bold;

color: yellow;

padding-bottom: 10px;

}

</style>

</head>

<body>

<marquee class=”marq” bgcolor=”Blue”

direction=”up”>

PW Skills

</div>

A Physics Wallah Tech Portal

</div>

</marquee>

</div>

</body>

</html>

Output-

Learn Web Development With PW Skills

Enroll in the Comprehensive Full Stack Course by PW skills to become a proficient developer with expertise in both front-end and back-end technologies.

This beginner friendly job assistance program will help you to gain solid foundation in front-end technologies such as HTML, CSS, and JavaScript, with the deep essence of back-end development such as – databases, servers, and APIs. The key features of this unique course include – Teaching from expert mentors, 20+ practical projects, access to skills lab for coding, daily practice sheets, regular doubt sessions, 100% job assistance guarantee, and much more.

Visit PWSkills.com today and grab your seat on this exciting journey!

HTML Marquee Tag FAQs

Is the tag still supported in modern HTML?

The tag is no longer used in the latest versions of HTML5. While it may still work in some browsers, it is not recommended for use in modern web development.
Alternatively, you can use CSS animations or JavaScript frameworks.

How can I change the speed of the scrolling text?

The speed of the scrolling text can be controlled using the “scrollamount” and “scrolldelay” attributes. scrollamount sets the number of pixels moved per interval, and scrolldelay sets the interval between movements.