HTML SPAN and DIV Elements

There are a few HTML elements that support additional formatting capabilities both for inline elements and block elements. These include the DIV and SPAN element. The SPAN element is used in line with text to modify the characteristics of a small section of text. The DIV element is very useful for adding certain block element style characteristics to inline or non-block elements.

The HTML DIV Element

This element is useful for adding style to elements that cannot have specific characteristics set otherwise without using depreciated attributes. For example, the CENTER element is being depreciated in HTML 4.0, and there is no inline element attribute in style sheets that allows the inline elements such as anchors and images to be centered. Therefore the anchor code that follows is not centered.

Here is the code:

<a href="index.html" target="_top">HTML Guide Contents Page</a>

Here is the effect:

HTML Guide Contents Page

The following code centers the anchor:

<div class="center"><a href="index.html" target="_top">HTML Guide Contents Page</a></div>

Here's the effect:

HTML Guide Contents Page

What is shown here is a simple, short example. Of course the came effect can be obtained by placing the anchor inside a paragraph element and setting the "text-align" value to "center", however the DIV element can be used to apply attributes to larger sections of the HTML page. Several paragraphs, headers, and lists may be contained inside the DIV element which is not possible using the paragraph elements.

The HTML SPAN Element

The SPAN element does not have any unique attributes, only the common attributes. This is HTML code for an unordered list showing how to make the text and bullets a different color using the SPAN element.

<ul style="color: 'red'">
<li><span style="color: 'green'">Line 1</span>
<li><span style="color: 'green'">Line 2</span>
<li><span style="color: 'green'">Line 3</span>
</ul>

This is how it looks:

• Line 1
• Line 2
• Line 3

This is the HTML code for a paragraph demonstrating use of the STYLE attribute along with the SPAN element.

<p style="text-align: 'center'; font: '16pt courier'; color: 'blue'">
The color of the sky is blue, but if you look at the <span style="color: 'green'">trees, they are green</span>. This effect is produced using the &#60span&#62 element with the style ="color: 'green'" attribute set.
</p>

Here is how it looks:

The color of the sky is blue, but if you look at the trees, they are green. This effect is produced using the <span> element with the style ="color: 'green'" attribute set