Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial

Webwork

The Span Tag

Like the div tag, the span tag, in conjunction with CSS is used to determine the style of web page content but the span tag is for inline elements.

Two categories of CSS Elements

block - block elements take up the full width of the Web page (by default) and have a line break above and below. Examples:
- <h1></h1>
- <p></p>
- <div></div>
inline - inline elements take up only as much width as necessary and do not add line breaks. Examples:
- <span></span>
- <a></a>

Inline elements can go inside of block elements but block elements cannot go inside of inline elements.

This is ok:
<div><a href="somewhere.html">Go somewhere.</a></div>

This is not:
<a href="somewhere.html"><div>Go somewhere.</div></a>

The span tag is most often used to style individual words or groups of words:

Source:

The ghost of electricity howls in the bones of her face.

Web page:

The ghost of electricity howls in the bones of her face.

The <span style="color: #f00">ghost of electricity</span> howls in the bones of her face.

The ghost of electricity howls in the bones of her face.

As with div tags, to give span tags their own style, you can identify them with class or id attributes:

class - is used when more than one span element will have the same styles applied to it
id - is used when a single span will have styles unique to it

Here's how it looks with a class attribute:

Source:

Above goes in head of doc. The "." in front of letscallthisredtext tells the browser that it is looking at a classname. Below goes in body:

The <span class="letscallthisredtext">ghost of electricity</span> howls in the bones of her face.

Web page:

The ghost of electricity howls in the bones of her face.

Any span tag that you give a classname of "letscallthisredtext" will have the letscallthisredtext style applied to it. You can make up whatever names you want for the classes but your life will be easier if you use useful descriptive classnames like "title" or "footer."

With an id attribute you'd use "#" sign rather than a ".":

Source:

Above goes in head of doc. The "#" in front of letscallthisredtext tells the browser that it is looking at a classname. Below goes in body:

The <span class="letscallthisredtext">ghost of electricity</span> howls in the bones of her face.

Web page:

The ghost of electricity howls in the bones of her face.

As mentioned, the id attribute is used for unique occurrences and the class attribute is used for style groups that will be used mulitple times.

< Previous | Webwork Table of Contents | Next >