<div> and <span> (Web Design in a Nutshell, 2nd Edition)

10.4. <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 document). The id attribute can be used in the same tag as the class attribute to call out one particular instance within a group.

TIP

The class and id attributes can be used in nearly all HTML element tags. They are not limited to <div> and <span>.