Marquee Tag in HTML
Introduction
Depending on the settings, the HTML <marquee> tag can be used to show text or pictures that scroll vertically or horizontally along your internet page. Although they aren't often utilized, several HTML tags can assist in organizing and showcasing our material.
One of the key tags added to HTML to enable such scrollable text and graphics on a webpage is the marquee. This article will teach you how to create a polished static website using the Marquee tag and its many characteristics.
The Tag <marquee>
The <marquee> element is an HTML container tag that is used to create text or pictures that may be scrolled from top to bottom or left to right on a webpage. Nevertheless, HTML 5, the most recent version of the language, deprecates this element.
Syntax:
<marquee> ... </marquee>
Features
The marquee element in HTML takes the following characteristics in addition to global ones.
- Behaviour: This specifies the kind of scrolling that occurs in an HTML marquee tag and accepts values for sliding, alternating, and scrolling.
- Direction: In HTML, direction specifies the scrolling direction in which the marquee tag moves the values left, right, up, and down.
- Height: This property determines a marquee's height or length and accepts values in pixels or percent (%).
- Loop: specifies the number of times the marquee will repeat. By default, the marquee's value is infinite, meaning that it will continuously loop and accept numbers as values.
- Scrolldelay: This parameter, which accepts values in seconds, determines the interval between each leap.
- Scrollamount: this specifies the jump distance and accepts numerical values.
- Width: This parameter, which accepts numerical values, indicates the width or breadth of a marquee.
- vspace: It accepts values in pixels and defines the vertical space surrounding the marquee.
- hspace: this determines the marquee's horizontal space and accepts values in pixels.
Example
<html>
<head>
<title>Example for HTML marquee Tag</title>
</head>
<body>
<marquee> It moves form left to right</marquee>
<marquee direction = "down">It moves from top to bottom</marquee>
</body>
</html>
Output
An explanation of the above example
Since the first marquee tag in the HTML page in the example above isn't given any attributes, the text placed inside it will automatically scroll endlessly from right to left.
The text within the second marquee element in the HTML page will read from top to bottom since it has been assigned the attribute direction with a down-value.
The <pre> Tag
Preformatted text in HTML is defined by the <pre> tag. The content enclosed in the <pre> tag will be shown precisely as typed within the <pre> tag in HTML because the text item included in the <pre> tag is formatted in a fixed-width font, and the spaces and line breaks are retained in the text.
Syntax
<pre> ... </pre>
Attributes
In HTML, the pre tag can only take global attributes.
Note: All HTML elements share global attributes, which can be applied to any element.
Example
<html>
<body>
<pre>
Here is an example of a pre
tag, because
we can see
that
the
words have no structure at all.
</pre>
</body>
</html>
Output
An explanation of the example
In the example above, the content contained within the HTML document's pre tag is shown exactly as it was typed.
The <i> tag
The HTML I element shows text in italicized format. HTML highlights content contained within an i element in an HTML document.
Note: The <em> element is often favoured over the i tag in the HTML document in the more recent versions of HTML.favored
Syntax
<i> ... </i>
Attributes
Only global attributes are accepted.
Example
<html>
<body>
<p> Example of i tag in HTML <i>italic style</i>. </p>
</body>
</html>
Output
An explanation of the example
In the example above, the content included in an HTML i tag is highlighted inside the web page.
The <figure> tag
HTML code listings, diagrams, and images may all be stored using the figure tag. Items with embedded content are kept there. For instance, in an HTML figure element, we may contain a <picture> and a <figcaption>, and the web document will treat them as a single entity.
Note: Although the figure tag's content in an HTML page is connected to the main flow, its position is separate from it, and its removal does not affect the document's overall flow.
Syntax
<figure> ... </figure>
Attributes
In HTML, the figure tag only takes in global attributes.
Example
<html>
<body>
<figure>
<img src="Flower.jpg">
<figcaption> Example for figure tag </figcaption>
</figure>
</body>
</html>
Output
An explanation of the example
In the example above, the <figure> tag in the HTML page stores the image of the flower and its caption as a single object.
The <progress> tag
In HTML, the progress tag indicates when the tag's progress is complete. On the webpage, it appears as a progress bar.
Syntax
<progress />
Note: It is a self-closing tag.
Attributes
The HTML progress tag accepts the following attributes in addition to global ones:
- Max: indicates the progress bar's maximum value. It is a number with floating points that accept positive values.
- Value: indicates the extent to which a task has been finished. This floating-point number accepts values from 0 to the maximum value.
Example
<html>
<body>
<h1>Movie progress : </h1>
<progress value = "6" max = "20"/>
</body>
</html>
Output
Explanation of the example: In the above example, the progress tag in the HTML document is passed the value = 6 and max = 20. Thus, the progress would be 3.33%, which is shown in the progress bar.
Limitations And Considerations
It is imperative to acknowledge that the <marquee> element is not a conventional HTML element, and its usage in contemporary web design is not advised.
While many browsers still support it for backward compatibility, its use is discouraged in favour of CSS animations and other more commonly acknowledged and controllable approaches.
Drawbacks of HTML Marquee
- Because human eyes are drawn to movement and marquee lettering, marquees may be disturbing.
- Depending on the scrolling pace, clicking static text becomes more challenging since marquee text moves.
- This HTML element is not typical.
- It makes the content more difficult to understand and pulls the user's attention.