Scrolling Text

There are two easy ways to add scrolling text to a web page (without using JavaScript). These are:

This page outlines both methods and explains the pros and cons of each method.

HTML Scrolling Text

You can create scrolling text using the HTML <marquee> tag. Below is an example of using the HTML <marquee> tag to create scrolling text.

See HTML Scrolling Text for more examples.

Source CodeResult
HTML scrolling text...

This method is nice and easy to implement—you can create scrolling text with a single line of code. The <marquee> tag is supported by the major browsers.

The main disadvantage of the <marquee> tag is that it's non-standard HTML. It is not actually included in the official HTML specifications. This is mainly because the marquee effect is more suited towards Cascading Style Sheets (CSS). CSS animations were introduced in CSS3 and allow you to create scrolling text and other animated effects. Therefore, CSS looks like the way of the future for scrolling text.

CSS Scrolling Text

The CSS animation property and @keyframes rule allow us to create scrolling text (not to mention other, more advanced, animated effects).

Creating scrolling text with CSS is a little more involved, however, you have a wider range of options available to you.

The following example creates a similar result to the above method, but as you can see, it requires a lot more code. Don't be put off by this though. The following code uses browser prefixes to ensure that the text scrolls correctly in various browsers. These are non-standard, however, until all browsers implement the CSS3 standard, this is a necessary evil if you want your marquees to work cross-browser.

See CSS Scrolling Text for more examples.

Source CodeResult

CSS scrolling text...

While CSS animations are a little more complex to learn and code than HTML marquees, they do provide a powerful means of animating the various HTML elements on the page. They are also being implemented into the CSS specifications (as from CSS3) and therefore, if you want your code to be standards-compliant, then you will need to use the CSS method.

More Marquee Codes

You can do much more with HTML marquees than is covered on this page. Here's the full list of marquee codes on this website:

Marquee Generator

Also check out the Marquee Generator.

Marquee Usability

Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully :)

About was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents. aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

My Related Sites

Here are some of my other sites: