Structural

Because XHTML gives semantic meaning to data by categorizing it, sometimes applying a tag to something doesn’t actually have a visual result on the rendered webpage. One example of this is categorizing chunks of code into categories like “navigation”, “main”, “footer”, etc. Organizing code into these “categories” (sometimes called containers) is done by using any of the many structural tags. Organizing parts of your page into containers makes styling your page (using the techniques in Introduction to CSS and Styling) easier and more flexible, and would make advanced web programming (with languages like JavaScript) easier. Additionally, a more semantically defined webpage is parsed more easily by computers – this will help search engines report accurate descriptions of your page, and will help users of disability software like screen readers to get a more accurate experience when visiting your page.

The Div Tag

The div tag is a generic container tag. It is used to put a part of your page into a container, but the div container doesn’t have any inherent semantic meaning to a computer. The div tag is meant to be used when a more applicable structural container tag doesn’t exist. The div tag automatically adds space above and below, ensuring that nothing else is on the same line.

Example: Putting Elements in a Div Container.

The following code:

<div>
    <h2>Hello, world.</h2>
    <p>This is a paragraph.</p>
</div>

Would produce the following result:

Hello, world.

This is a paragraph.

The Span Tag

The span tag is a generic container tag to be used in-line. The span container doesn’t have any inherent semantic meaning to a computer. The span tag is usually used to select certain words within text, rather than a chunk of code.

Example: Putting Content in a Span Container.

The following code:

<h2>Hello, world.</h2>

<p>
    This is a <span>paragraph</span>.
</p>

Would produce the following result:

Hello, world.

This is a paragraph.

Other Container Tags

Many more container tags were introduced with version 5 of the XHTML specifications. These new container tags are special, because they have semantic meaning. Although they behave the same as a div tag, all of the tags below have an intended purpose, and using them for that intended purpose means that a computer can understand the way your page is structured. The list below is a partial list only. To learn more, read the W3C wiki article about structural elements, or try browsing the Mozilla Developer’s Network.

Summary