The <marquee> tag is an HTML tag that was introduced in the early days of the internet. It is used to create scrolling text or images on a web page. In this tutorial, we will discuss the basic syntax of the <marquee> tag, its attributes, and how to use it in your web pages.
Basic Syntax:
The basic syntax of the <marquee> tag is as follows:
<marquee>Text or Image to be scrolled</marquee>
This will create a scrolling effect for the text or image inside the <marquee> tag. By default, the direction of the scroll will be from right to left. However, there are several attributes that can be used to control the behavior of the <marquee> tag.
Attributes:
The following attributes can be used with the <marquee> tag:
1. behavior – This attribute determines the behavior of the <marquee> tag. It can be set to “scroll”, “slide” or “alternate”. The default value is “scroll”.
2. direction – This attribute determines the direction of the scroll. It can be set to “left”, “right”, “up”, or “down”. The default value is “left”.
3. loop – This attribute determines the number of times the scrolling animation will repeat. It can be set to a number or “infinite”. The default value is “infinite”.
4. scrollamount – This attribute determines the speed of the scroll. It can be set to a number or “slow”, “normal” or “fast”. The default value is “6”.
5. width – This attribute determines the width of the <marquee> tag. It can be set to a number or a percentage value.
6. height – This attribute determines the height of the <marquee> tag. It can be set to a number or a percentage value.
Usage:
Let’s take a look at some examples of how to use the <marquee> tag:
Example 1:
<marquee behavior=”scroll” direction=”left”>Hello World!</marquee>
This will create a scrolling effect for the text “Hello World!” from right to left.
Example 2:
<marquee behavior=”scroll” direction=”up” scrollamount=”10″>This is a long text. This is a long text. This is a long text.</marquee>
This will create a scrolling effect for the text “This is a long text. This is a long text. This is a long text.” from bottom to top with a scroll speed of 10.
Example 3:
<marquee behavior=”slide” direction=”right” loop=”2″>
<img src=”image.gif” alt=”Animated Image” />
</marquee>
This will create a sliding animation for the image “image.gif” from left to right. The animation will repeat 2 times.
Limitations:
Although the <marquee> tag is still supported by most web browsers, it is considered outdated and should not be used for modern web design. In fact, it is not supported in HTML5. Instead, it is recommended to use CSS animations and transitions to create scrolling effects.
Conclusion:
In this tutorial, we discussed the basic syntax of the <marquee> tag, its attributes, and how to use it in your web pages. While the <marquee> tag can still be used for simple scrolling effects, it is not recommended for modern web design. Instead, it is recommended to use CSS animations and transitions for more advanced effects.
