Web Design in a Nutshell, 2nd Edition

<div> and <span>

The HTML specification provides two generic tags, <div> and <span>, that can be used to structure and label the contents of a web document.

The <div> tag divides a document into distinct sections (or divisions). It is a block-level element, which means that when you introduce a <div> tag, the enclosed content begins on a new line and space may be added above and below. The <span> tag is an inline element that can be applied to a string of text within a paragraph or other content flow. It does not introduce a line break.

The tags are used in much the same way. On their own, <div> and <span> have no inherent qualities and have no effect on the display of their contents. You can assign a <div> or <span> meaning (in effect, give it a name) by using the identifier attributes class and id. In a sense, it enables you to create your own tags so they can be called on later from a style sheet, hyperlink, script, applet, or other process.

The class attribute is used to identify various elements as belonging to a group. For example, if you want the glossary words in a document to display in green type, identify each word as a “glossary” word as shown here:

<SPAN class="glossary">resolution</SPAN> and 
  <SPAN class="glossary">color depth</SPAN>

Then use a style sheet to affect the display of all “glossary” terms:

span.glossary {color: green}

The id attribute is used for unique instances in a document (in other words, the value of an id attribute cannot be repeated in the same ...