How to Use a Marquee in an HTML Attribute

Make your plain website more exciting with marquee scrolling text or graphics.

When extra emphasis is needed for a heading or text on your website, you might consider using a marquee effect. Marquee HTML code causes text or a graphic to scroll across your website. Learn how to create scrolling text which can travel in any direction at any speed.

Things You'll Need

• Website
• Basic text program (Notepad)

Instructions

1. Determine the text or graphic that you want to scroll on your website. This should ideally be a small amount of text or a small graphic, as large amounts of scrolling text can be difficult for your website visitor to read. Marquees in HTML are ideal for news tickers, eye-catching headlines or important announcements.

2. Use the "<marquee>" HTML tag to create any type of scrolling text or graphic. At its most simple, you can create a right to left scrolling piece of text by writing "<marquee> SCROLLING TEXT</marquee>" and replacing the text in all capital letters with the text you want to scroll. The text will scroll at a moderate rate of speed across the entire section of the website you put it in. You can also use other HTML text attributes, such as headings, font color, font style and size within the marquee tags. Always remember to close the HTML tag with "</marquee>" at the end, or your entire website will scroll.

3. Adjust the width of the marquee tag in HTML by using a width attribute added to the marquee code. For example, "<marquee width="30%">" will scroll the text on only 30 percent of your website. Of course, you can also include the marquee HTML tag within a style sheet or table website layout. Height can be adjusted in the same way. This is useful for scrolling graphics.

4. Change the direction the words or pictures move by using the marquee tag with the direction attribute. The default direction is right to left. You can switch the direction by typing "<marquee direction="right"> Text </marquee>" to make the word "Text" scroll from left to the right.

5. Make the marquee text or graphics do more than just scroll across the screen. This HTML code also includes behavior attributes. Using the code "<marquee behavior="scroll">" will create the default scrolling text; "<marquee behavior="slide">" will cause the text within the tags to scroll across the screen, but then stop and stay at the edge of the screen. To make the text bounce from one side of the screen to the other, use the "<marquee behavior="alternate">" command.

6. Speed up or slow down your marquee text or graphic speed by using two different HTML attributes: scroll delay and scroll amount. Scroll delay is used to slow down marquee text, and scroll amount is used to speed it up. Therefore, typing "<marquee scrolldelay="500">" will result in text that goes at about half the normal speed, and using "<marquee scrollamount="50">" will make the text fly by on the screen. Use these for a special effect or to make the text or graphic easier to view.

Tips & Warnings

• All commands in this article include quotation marks around the HTML tags (< and >). Remember not to include any quotation marks outside those tags when typing your HTML commands.

• Too many marquees make your website messy. Use only for emphasis.