Whether you have your own space on Myspace or a personal page somewhere else, marquee text can be a fun way to express yourself.
If you came to this page looking for instructions on how to put a marquee across your MySpace page, please visit Across MySpace Pages to learn how.
Since this tutorial is about making your personal web page or MySpace Profile Page look good, all of the HTML code shown here will contain in-line style definitions to help ensure that your webpage will present the same across as many browsers as possible. Since most people looking to learn about marquees are MySpace users, I will refer to personal web pages and MySpace Profile Pages by the combined term of MySpace page.
HTML Tag Marquee
Let's start with the basic marquee tag and what the HTML looks like.
<marquee>Simple MySpace Marquee</marquee>
There are four options in how you can make your marquee scroll on your MySpace page.
They are up, down, left, and right.
Here are some examples:
<marquee direction="up">Marquee Scolling Up</marquee>
<marquee direction="down">Marquee Scolling Down</marquee>
<marquee direction="left">Marquee Scolling Left</marquee>
<marquee direction="right">Marquee Scolling Right</marquee>
The behavior attribute controls how the marquee scrolls on your MySpace page.
<marquee behavior="scroll">behavior = scroll</marquee>
This option only works properly with Internet Explorer. The marquee is supposed to go across once and then stop and remain in place on the screen.
<marquee behavior="slide">behavior = slide</marquee>
<marquee behavior="alternate">behavior = alternate</marquee>
You can make your marquee on your MySpace page stand out even more by using a background color.
<marquee bgcolor="#8b0000">Marquee with Red Background to match your MySpace page</marquee>
MySpace Marquee Speed
You can control how fast your marquee goes across the screen on your MySpace page by using a whole number (1, 2, 3, ...).
<marquee bgcolor="#8b0000" scrollamount="300">
Marquee with Red Background and Defined Speed - faster
<marquee bgcolor="#8b0000" scrollamount="1">
Marquee with Red Background and Defined Speed - slower
Number of Passes
You can decide if your marquee will run once, twice, or infinately across your MySpace page.
Here's two HTML code examples.
<marquee loop="3">Marquee that will scroll 3 times</marquee>
<marquee loop="infinate">Marquee that will scroll infinately</marquee>
Since a marquee will scroll infinately by default, I'm not sure when you would use this option.
Changing the marquee height can add even more pizzazz to your MySpace page.
The height of the marquee is initially set to the natural line height as defined by the font size of the text displayed on the marquee. Simply add the height attribute and identify the number of pixels tall you wish your marquee to be. Here's a few examples of the HTML code:
<marquee height="50px">Marquee 50 pixels high</marquee>
Height is another attribute of the marquee tag that can be interpreted differently by the various browsers. To assign a height that works for both Internet Explorer and Firefox, you can define the height using an inline style element. Coding your marquee this way also centers the text vertically. The HTML code follows:
<marquee style="line-height:50">Marquee 50 pixels high</marquee>
<marquee height="5">Be careful you don't make the height smaller than the text.</marquee>
Changing the width of the marquees you display on your MySpace page gives you even more control over how it looks.
<marquee bgcolor="#8b0000" width="150">Narrow Marquee</marquee>
This option may have different results depending upon the browser used. In some cases the background is displayed at the desired width, but the marquee travels across only a portion of the background. By adding an inline style definition, you can better control the width of your marquee on your MySpace page.
<marquee style="position:relative; left: 80px; width:60%">Marquee with a width of 60%.</marquee>
To learn how to format the text of your marque and to use images to make the marquee on your MySpace page even more attention getting, visit Part II - Marquee HTML Text for MySpace.
MySpace Marquees & Usability
I would be remiss if I did not mention that moving elements such as marquees are typically considered poor design and limit usability. This is why I keep suggesting marquees should only be used for MySpace profile and personal webpages.
In the web programming world, the marquee tag is mostly a forgotten add-on that Internet Explorer once used that doesn't work consistently in the other browsers. The HTML tag marquee is considered non-standard code and will not pass WC3 validation. (That is like saying something is slang rather than proper English despite the point being perfectly clear.) I've left the validation recognition on this page as everything other than the marquee code validates perfectly. (Not my fault they don't like something as cool as marquees.)
However, MySpace has breathed new life into the marquee tag with it's friendly, quirky, and decorative personal profile pages. While I would not recommend using marquees for a business website without careful thought, they are a lot of fun for personal pages and MySpace profile pages and that is why I've included them on HelpForWebBeginners.com.
Go Big With MySpace Marquees
Be sure to visit Across MySpace Pages to learn how to make a marquee that spans the width of your profile.
HelpForWebBeginners.com is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming related tutorials you would like to see.