Scrolling Text in HTML
FREE
Overview
The HTML <marquee> tag signifies a scrolling block of content containing text or images that move across the webpage either in the horizontal or vertical direction.
Marquee is an animation effect for web pages that are used to create horizontal or vertical scrolling text and pictures.
A marquee may be added to a web page or blog quickly and easily using HTML marquees (that is, marquees that are coded using the <marquee> tag).
This article covers creating moving content on a website using HTML <marquee> tag.
It contains HTML marquee code examples that will make scrolling text in HTML easier to comprehend along with the help of visual representations.
Read it till the end to understand what we are creating along with detailed explanations.
Pre-requisites
Important to have: HTML Tags Nice to have: Basics of CSS
What are we Creating?
The <marquee> tag is a container tag of HTML that is used for adding scrollable text or images to a web page. To modify the direction or speed of the scrolling text in HTML, this tag includes a number of attributes.
It can make the text scroll from right to left or left to right. It can make the text bounce back and forth or scroll up or down. It can even make the text zoom in from the side and stay in the same place.
Using the <marquee> element is no longer recommended as it has been deprecated in HTML5.
The <marquee> tag comes in pairs. The content is written between the opening (<marquee>) and the closing (</marquee>) tags.
Example
Approach
The above example demonstrates the use of the <marquee> element. You may use the <marquee> tag in HTML to generate scrolling text, or you can use CSS marquees(the recommended method) to create scrolling text.
You can make your text scroll from right to left. You can make it scroll left to right. You can make it bounce back and forth. You can make it scroll up or down. You can even make your text fall like snow and add cool effects by using various CSS properties.
Marquee Attributes
The <marquee> tag accepts a number of attributes along with global and event attributes.
Try to experiment with these options to see how they modify the scrolling text in HTML. The whole list of attributes is as follows:
| Attribute | Value | Description |
|---|---|---|
| behavior | scroll slide alternate | Defines how the text is scrolled within the marquee. The default value is scroll. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Sets the background color. |
| direction | up down left right | Sets the direction for the scrolling content within the marquee. |
| height | pixels % | Defines the height of the marquee. |
| width | pixels % | Defines the width of the marquee. |
| hspace | pixels | Sets the horizontal margin around the marquee. |
| loop | number | Sets the number of times the marquee will scroll. Its default value is -1, which means the marquee will scroll indefinitely. |
| scrollamount | number | Sets the amount of scrolling at each interval in pixels. It basically defines the speed of the text present within the marquee. The default value is 6. |
| scrolldelay | number | Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed is specified. |
| truespeed | seconds | Used to delay the scroll lesser than 60. |
| vspace | pixels | Sets the vertical margin around the marquee. |
Event Handlers
The <marquee> tag has the following event handlers:
| Attribute | Description |
|---|---|
| onbounce | This event can only fire when the behavior attribute is set to alternate and the scrolling text has reached the end of the marquee. |
| onfinish | This event can only fire when the loop attribute is set to a value that is greater than 0 and the marquee has finished looping for the specified number of times. |
| onstart | This event fires when the text starts scrolling in HTML. |
Methods
The <marquee> tag has the following methods:
| Method | Description |
|---|---|
| start() | Starts scrolling the text within the marquee. |
| stop() | Stops scrolling the text within the marquee. |
After release of HTML5, these attributes, event handlers, and methods that were compatible with HTML4.01 were made obsolete.
Creating Scrolling Text
Scrolling text in HTML can be represented in various ways by incorporating different attributes of the <marquee> tag.
Scrolling Right to Left
The <marquee> tag scrolls text from right to left by default.
Output
Scrolling Left to Right
Use behavior="scroll" and direction="right" to scroll the text from left to right. Like this:
Output
Scroll Up
Use behavior="scroll" and direction="up" to cause the text to scroll up (from bottom to top). Like this:
Output
Scroll Down
Use behavior="scroll" and direction="down" to make the text scroll in a downward direction (from top to bottom). Like this:
Output
Sliding Text
Use behaviour="slide" to make the text slide on the screen. The text slides in, then stays there.
When placed down the page, it is likely to be missed (due to the user not seeing it until they reach the bottom - in which case the text would probably have finished sliding in!).
Therefore, if the sliding text doesn't appear, refresh the page - the text probably slid in before getting noticed. Otherwise, the browser may have an issue in displaying the scrolling text in HTML.
Output
Text Scrolling Diagonally
Two <marquee> tags are nested together to make the text scroll diagonally. The outer <marquee> scrolls the text to the right and the internal <marquee> scrolls it upward.
Output
Text bouncing Back and Forth
Use behavior="alternate" to make the text bounce back and forth.
Output
Various Scrolling Speeds
The scrolling speed of the scrolling text in HTML is adjustable.
For instance, scrollamount="1" causes the marquee to scroll extremely slowly, but scrollamount="20" will make it faster.
Let's examine the illustration to better comprehend:
Output
Note: Some browsers can not render the jumping effect. The text will instead scroll smoothly.
Faster Scrolling
Setting the scrollamount to greater values will cause the text to scroll faster. Like this:
Output
Falling Text
To make the scrolling text in HTML fall like snow, set the direction of the marquee to down and add different speeds to the text.
Any of the marquee parameters can be adjusted to alter the way the text falls, its height, etc.
Look at the example to better comprehend:
Use CSS to set the relative position and height of each marquee.
Output
Styling with CSS
Look at the code and output below which was presented in "What are we creating" section to understand how it was created and styled using CSS:
HTML
CSS
Result
Approach:
We have used the following CSS properties to style the <marquee> tag or the content within marquee elements.
For styling the font of the text in <marquee> tag:
- CSS font-style property to set the style of the font to normal, italic, oblique, initial or inherit.
- CSS font-family property to set the font family of the text.
- CSS font-size property to set the size of the font.
- CSS font-weight property to define whether the font should be bold or thick.
For coloring the text in <marquee> tag:
- CSS color property to describe the color of the text.
- CSS background-color property to set the background color of the element.
Additional characteristics to consider for <marquee> tag
- CSS text-shadow property to add a shadow to text.
- CSS letter-spacing property to define the spaces between letters/characters in a text.
- CSS word-spacing property to set the spacing between words.
- CSS border to create a border around the marquee.
- CSS border-radius to define the radius of the element's corners.
Why <marquee> Element Should Not be Used to Create Scrolling Text in HTML?
In order to discourage developers from using the <marquee> element, W3C decided to declare the marquee element as obsolete when HTML5 was developed.
This element is deprecated for a number of reasons, in fact. These are a few of the main causes.
1. It has never been an HTML Standard element
The element was quickly incorporated into different browsers once Microsoft added it to Internet Explorer, although it was never included in the W3C specification that lists all the standard HTML elements.
2. Separation of concern
One of the major reason about why marquee or scrolling text in HTML is deprecated in HTML5 is because it is a ‘presentation’ element.
HTML is a markup language that defines the structure and semantics of the website. The marquee element merely serves as a display tool and is not concerned with the structure. Following that, the W3C agreed that developers should utilize javascript or CSS animation to accomplish the same functionality.
3. Poor user experience
The banner containing scrolling text in HTML is typically linked with an advertisement or a bad user experience when the website is trying ineffectively to attract the visitor's attention.
The element is a reflection of the older methods of designing websites where blinkers and banners were used all over the pages to draw the user's attention.
Moreover, the marquee is an aspect that is not included in "best practices" when discussing user experience because the UI/UX design has developed through time, and best practices have been defined.
HTML Marquees vs CSS Marquees
| HTML Marquees | CSS Marquees |
|---|---|
| The <marquee> element is used to code marquees and scrolling text in HTML. | CSS animations can be used to create scrolling text or CSS marquees. |
| Scrolling Text or images can be added to webpages with no more than one line of code. The code is easy to remember because it only consists of the <marquee> tag and a few attributes. | The main drawback of CSS marquees is that they need more time to code and are difficult for beginners to understand. They are more powerful, though, and may be utilized to produce complex animations as well as simple marquees. |
| The concern with the <marquee> element is that it is not part of the official HTML specification, therefore making HTML websites not entirely standards compliant. | CSS animations are included in the official CSS specifications (from CSS3), allowing the usage of marquees while completely adhering to the standards. |
| Marquees and animations should not be specified in HTML as HTML (particularly HTML5) is primarily concerned with the semantics of the page's components instead of just styling the webpage. | CSS is better suited for marquees and animations. As a result, CSS is the preferred tool for producing scrolling text or other marquee-type effects. |
Browser Support
The majority of browsers still support scrolling text in HTML implemented by using the <marquee> tag since many sites have previously used this feature and browsers wish to be backward compatible.
- Google Chrome 4.0
- Mozilla Firefox 65.0
- Microsoft Edge 12.0
- Internet Explorer 6.0
- Apple Safari 3.1
- Opera 10.0
- Android Browser 4.4
- Samsung Internet 4.0
Conclusion
- The <marquee> tag is used to create scrolling text in HTML.
- The text can scroll horizontally from left to right or right to left, or vertically from top to bottom or bottom to top.
- As HTML5 prioritizes semantics above presentation, the <marquee> element is considered obsolete and not regarded as the best practice for creating scrolling text in HTML.
- To add scrolling text to a webpage, CSS animations or CSS marquees are recommended.
- Because of backward compatibility, the majority of browsers still enable scrolling text in HTML.