Spans and Divisions

Up to this point, styles have been applied to individual page elements by associating style sheets with their tags. This technique works fine in most cases; however, there are styling situations not covered by this method.

For example, within a paragraph you might wish to apply a style to a particular letter, word, phrase, or other text string located inside the paragraph. Applying a style sheet to the <p> tag does not give you the ability to select which "substring" of the paragraph to style. All characters in the paragraph receive the same styling.

Another example is a consecutive group of paragraphs to which you want to apply the same style. As you may have expected, you can duplicate and apply the same in-line style sheet individually to the separate <p> tags to give them the same appearance. Nonetheless, the ability to apply the same style to the paragraphs as a group without having to style them individually would be more convenient.

For these and other styling situations involving strings of text less than a paragraph in length and blocks of text longer than a paragraph, HTML5 provides "marker" tags to identify and isolate particular sections or subsections of a page to which styling can be applied.

The <span> Tag

A <span> tag is an in-line tag placed around text for the purpose of identifying a string of characters to which this tag's style sheet is applied. The tag can enclose a single letter, a word, a phrase, a sentence, or any other substring of text for the purpose of identifying it for the application of styling. As an in-line tag, the <span> tag surrounds a string of text enclosed inside a block-level container.

In the following paragraph, the words "RED" and "BLUE" are isolated with <span> tags as words to which these tags apply their color properties. When this paragraph is displayed in the browser, the two words are rendered in their associated colors.

<p>This paragraph contains the word <span style="color:red;">RED</span> 
that is surrounded by a <span> tag to apply this color property to the word. In
this sentence the word <span style="color:blue;">BLUE</span> is given that
color.</p>

Listing 3-36. Code to style words within a paragraph.

A <span> tag is nothing more than a marker to isolate text to which its style sheet can be applied. It has no built-in formatting characteristics of its own or semantic meaning. It does not force a line break nor does it produce a blank space. Therefore, it can be used in-line within the normal flow of text simply to style its enclosed content. Naturally, the style that is applied must be appropriate to the enclosed text string. For instance, it would not be appropriate to apply the text-indent property to indent the "first line" of a single word enclosed by a <span> tag.

The <div> Tag

A <div> (division) tag is a similar type of marker to the <span> tag. Its purpose is to enclose and designate a collection of page elements for application of styling to the enclosed set without providing any semantic meaning. The <div> tag is a block-level tag because it encloses other tags, and more importantly, it forces a line break on the page by creating a line break before and after its enclosed content.

Use of the <div> tag is illustrated by the following two paragraphs. Both paragraphs are styled the same. However, instead of coding these styles with in-line style sheets in both <p> tags, the paragraphs are surrounded by a <div> tag which applies these styles. The paragraphs inherit the text-indent and text-align styles of the enclosing <div> tag. Browser output of this formatting is shown in Figure 3-26.

<div style="text-indent: 25px; margin-left:30px; margin-right:30px; Text-align: justify;">

  <p>
    This paragraph has first-line indention of 25 pixels and is justified
    between its margins.  This paragraph's margin-left and margin-right
    properties are equal to 0px (default value), but its containing div has left 
    and right margins of 30px.
  </p>

  <p>
    This paragraph also has first-line indention of 25 pixels and is justified
    between its margins.  This paragraph's margin-left and margin-right
    properties are also equal to 0px (default value), but its containing 
    div has left and right margins of 30px.
  </p>
	
</div>

Listing 3-37. Code to style two paragraphs through an enclosing <div> tag.

The <div> tag does not have any visible formatting characteristics of its own other than the fact that it creates a line break before and after its enclosed content. These line breaks are not evident in the above example since <p> tags themselves produce their own line breaks. Such line breaks are collapsed together with those produced by the <div> tag.

Since the <div> tag, like the <span> tag, provides great flexibility in enclosing and styling page content, there are numerous occasions throughout these tutorials where spans and divisions are used to apply formatting to a wide assortment of page elements.

TOP | NEXT: ID & Class Selectors