Structural

HTML gives semantic meaning to data by using specific tags to categorize content. These tags may not always have a visual effect on the rendered webpage, but they help organize the structure of your code into sections like “navigation,” “main,” and “footer.” This organization, often called containers, makes styling with CSS easier and more flexible (using the techniques in Introduction to CSS and Styling), and simplifies advanced programming with JavaScript. It can be done by using any of the many structural tags that follow.

Also, a well-structured semantic webpage is easier for computers to parse, helping search engines provide accurate descriptions and improving accessibility for users who rely on screen readers.

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

There are other, newer container tags. These new container tags are special because they carry semantic meaning. Although they behave the same as a div tag, all of the tags below have an intended purpose. Using them for their intended purpose helps computers understand the structure of your page.

The list below is a partial list only. To learn more, read MDN web docs about Document and website structure (or browse the Mozilla Developer’s Network in general).

Summary