HTML has a closing <marquee> tag to create a marquee. It can contain not only text, but also other elements: tables, images, forms, and so on. With the help of attributes, not only horizontal displacement is set, but also vertical. For the latter, you must specify the height of the field.
Interestingly enough, it was originally created for Internet Explorer, while others learned to understand it later. Although usually the opposite happens, and it is the browser from Microsoft that always acts as a lagging one, creating many problems for programmers.
Relevance
<marquee> is a creeping line tag in HTML. It is supported by all current browser versions. In this regard, there are no problems, and you can safely use it.
However, in terms of semantics, it is considered obsolete and is no longer included in the HTML specification. Thus, the code that includes this tag will not pass validation.
What is the reason for this? In modern HTML, there is no creeping line, since CSS performs all the animation and styling. Sometimes you have to use JS. Accordingly, HTML is only responsible for markup. Nevertheless, <marquee> will work just fine, thanks to continued compatibility with older versions.
Syntax
In HTML, a creeping line is specified by a closing tag:
<marquee>...</marquee>
Inside, not only text can be placed, but also other elements, such as photographs or tables. Recall that although this code is working, it will not pass validity.
Scroll speed
You can control the creeping line in HTML using attributes. Movement speed is set through the scrollamount attribute. It will look like this:
<marquee scrollamount="1">some text</marquee>
The change in speed occurs due to the constant deletion of information about the position of the text and its display in a new place. By changing the value in the attribute, we set the number of pixels between the old position and the new one. Accordingly, the larger the value, the greater the speed. This attribute is supported by all browsers.
If the scroll speed is too fast, automatic restriction will be enabled so that the text remains readable. If you need to get around this restriction, enter the truespeed attribute. Note that not all browser versions understand it. IE and Firefox can work with it.
The delay between scrolling text can be set using the scrolldelay attribute.
Scroll box
In width, the tag will occupy the entire width of the parent element. And in height it will be equal to the content inside. To change this, you need to use two attributes that are responsible for height and width. These are height and width respectively. You can use pixels or percentages.
There are also two more attributes, namely hspace and vspace. They are necessary to create empty space around the creeping line, or rather, indentation. The distance is set horizontally and vertically, respectively.
Motion parameters
In addition to speed, you can set other motion parameters. The direction attribute is responsible for the direction attribute. By default, text moves from right to left. This movement corresponds to the value of right. To make the text move in the opposite direction, just specify left, and it will look like this:
<marquee direction="left">...</marquee>
In addition to horizontal scrolling, you can specify vertical. To move content up, use the value up, and to move down - down.
To change the nature of the movement, there are two more interesting and useful attributes. You can specify the number of scrolls after which the content will stop at its extreme position and will not move. This property corresponds to the loop attribute. The default value is -1. If set to 0, the text will not move at all. Integers above 0 will start the counter.
A more voluminous attribute is behavior. He is responsible for the way the content moves. The default value is scroll. It means that the content will move in a given direction, and after it completely disappears, it will start moving again.
If there is little content, you can set the attribute to alternate. After reaching the extreme point, the contents will begin to move in the opposite direction. And so an infinite number of times if a counter is not set.
The last value is slide. He gives the command to the content to reach the end and stop.
Styles
The <marquee> tag includes the bgcolor attribute, which allows you to set the background color of the string. By default, it is the same as the page.
To create a beautiful creeping line, HTML is not enough. Must use styles. For example, if we want to make the text more beautiful:
<marquee scrollamount="1" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%;"> </marquee>
Application
There are many ways to use a creeping line. You can simply use the running text to attract attention. It is possible to make a semblance of an informer containing a large amount of text. You can also insert a series of pictures that will move smoothly. This will show more content.
The creeping line in the HTML code will help to create a simple animation if you apply an animated picture, for example, a running person.
Summary
We've covered how to make a marquee in HTML. This is a fairly simple method that is easy to learn. However, it is obsolete and does not pass validation. I did not receive further development and support, which may cause problems in working in different browsers.
We do not recommend using it. To create a creeping line, or rather animation in general, CSS3 has acquired a unique @keyframes rule. It allows you to create sequential frames of animation. And the animation property already determines the flow of this very animation. This toolkit provides much more features than the legacy <marquee> tag. Using it is also much more convenient, and most importantly, this is what we have been striving for for many years: to clear HTML from unnecessary junk and make it more readable and structured.