|Summary of Content|
|The SPAN tag is a superior HTML tag capable of adding some very useful
elements to your web pages. This page is a good example of the range
Try Hypergurl - an excellent reference source, loads of samples and information.
A double mouse click anywhere on the page (except when over hyperlinks) will take you back to the top.
The SPAN tag allows you to add attributes to blocks of text, and not necessarily complete sentences or paragraphs. As opposed to the DIV tag The SPAN tag is used more often within paragraphs or blocks of text. The main difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag just tells the browser to apply the style rules to whatever is within the <span>.
A few examples of ways you can use this tag....
Example: You can highlight your text any colour you like.
Example: You can add coloured text for parts of a sentence
Example: You can add a background image to your text.
You can add what is like an "alt tag" to your text.
The span tag is useful for defining text and image MouseOvers.
Example: This is an example of changing the colour of text using a MouseOver.
Code: <SPAN onMouseOver="document.pic1.src='yourimage.gif'" onMouseOut="document.pic1.src='yourimage.gif'"><img src="yourimage.gif" height="40" width="100" name="pic1"></SPAN>
Hyperlink titles have been abbreviated, (right click on the link and select properties for the full URL)
Last Update: 04/03/2008 - HTML - Notes on the Span Tag - Neils Resource Web