7.0 Span & Div

As we know by now, tables should no longer be used for controlling page layout. Instead, there are two very useful tags that can be used towards this end, and these are the <span> and <div> tags. These two tags are particularly useful when dealing with CSS, but even without using CSS they are still very useful.

Span

The <span> tag defines groupings of inline content. It is a very powerful tool for developers because it makes it easier to manage, style, and manipulate portions of HTML elements. This tag is an inline-level element that generally does not contain other elements, although it can contain some inline elements like abbr, strong, or tt. It can be used inside paragraphs as well as divs, and the main difference to the <div> tag is that <span> doesn't apply any formatting of its own. The <div> tag includes a paragraph break, whereas the span tag does not. It simply tells the browser to apply whatever style rules it contains. Without these, this tag won't change any enclosed items at all.

The three most useful attributes used with this tag are:

  • style
  • class
  • id

We came across the style attribute earlier. As for class and id, we will worry about these later. The <span> tag is useful when you want to change the style of elements without placing them in new block-level elements. In other words, it can be used for styling individual words within block-line elements such as heading and paragraph tags. For example, using the <style> attribute:

<h1>Hello <span style="color:red">World!</span></h1>

Here the second word in the heading (i.e. World!) would render in red, and without breaking the display of the element into two, like this:

Hello World!

Div

The <div> tag defines logical divisions or sections within the content of a page. Again it is a very powerful tool for developers because it makes it easier to manage, style and manipulate whole sections of HTML. This tag is a block-level element that can contain almost any other element, and it behaves in a similar fashion say to the paragraph tag in that it forces a line break even when no styling is specified. Note that it cannot be used inside <p> tags.

For example, because the <center> tag is deprecated, this can be replaced with:

<div style="text-align: center;">
<p>To center the content inside your div.<p>
</div>

This will center any HTML elements within the tag (and not just text). Of course, using the style atribute we could add any number of styling options including colors, fonts, etc.

Again the primary attributes of the <div> tag are:

  • style
  • class
  • id

Again we have already used the style attribute. As for class and id, these useful attributes are very useful too, especially when combined with CSS, and will be covered next.