HTML Tutorials for website designs. XHTML elements including span tag. Background image to text. Highlight text. Mouseover Color text. Alt tag on text.

Bookmark This Page

<SPAN> </SPAN>

Here are just a few ways you can use XHTML SPAN tags.

You can highlight your text any color you like.

You can add colored text

You can add a background image to your text.

You can add what is like an "alt tag" to your text. Try the example below and hover your mouse over the text. This is really cool. (Sorry, doesn't work with Netscape.)

HOVER YOUR MOUSE HERE.

We can even do image mouseovers using this great span tag.
Run your mouse cursor over the image.
(Click Here for text mouseover.)

Here are the codes for each particular event.

Mouseover code.

<SPAN onMouseOver="document.pic1.src='bluepic2.gif'" onMouseOut="document.pic1.src='bluepic1.gif'"><img src="bluepic1.gif" height="40" width="100" name="pic1"></SPAN>

Highlight text code.

You can highlight your text any color you like.

<span style="background-color: #FFFF00">You can highlight your text any color you like</span>

Colored Text Code.

You can add colored text

<span style="color: red; font-size: 14pt">You can add colored text</span>

Adding background Image to text code.

You can add a background image to your text.

<SPAN STYLE="background-image: url(plainbgrnd.jpg)">You can add a background image to your text.</SPAN>

Alt tag on text code

HOVER YOUR MOUSE HERE.

<span title="ISN'T THIS SOOOOOO COOL!"><b>HOVER YOUR MOUSE HERE.</b></span>

To add an alt tag to a text link would be like this;
<span><a href="index.html" title="this is so cool" target="_blank">Click Here For Hypergurl</a></span>

And to give you an example, hover your mouse over the link below;

Click Here for Hypergurl