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:
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.