Web Platform HTML

Structural Elements

The structure of your document is determined by the HTML element tree you create. The parent, child and sibling relation of elements is a way of indicating how they relate to each other. Notably, these structural elements don't do a whole lot to determine how your document appears - you'll have to style the elements.

The W3C has a good overview of structural elements.

Here is an example fragment of markup for a group todo list.

<aside>
  <img src="joe.jpg">
  <h1>Joe Smith</h1>
  Todo:
  <ol>
    <li>Buy Apples</li>
  </ol>
</aside>
<aside>
  <img src="mary.jpg">
  <h1>Mary White</h1>
  Todo:
  <ol>
    <li>Pick up book</li>
  </ol>
</aside>

In the example, aside elements are used to group together elements relating to a single person. Within that, there are sibling elements which relate to each other at the same semantic level. Order lists OL are used for each person's todo list, and those in turn contain sub-items.

HTML contains some elements useful for structuring your page, including: DIV, SPAN, SECTION, ASIDE, HEADER, ARTICLE, FOOTER and NAV.

div

This is a commonly used element to group things together logically and visually. A DIV element is displayed in a block fashion, on its own line.

<div> ... </div>

The DIV element is semantically neutral. If possible, consider the use of another element which matches the logical sense of your grouping. For example, perhaps it makes more sense to consider the grouping as an ASIDE or SECTION.

Reference

span

Spans (SPAN) are typically used for runs of text, for example if you want to format a word differently than other words, you might wrap it in a SPAN:

This is <span class="highlight">special</span>.

Spans are displayed as inline elements, therefore they flow within the line of layout they are in. This can be useful when you don't want elements to wrap to a new line. Another consequence is that you can set the height or width of a span, its dimensions are determined by its contents.

Reference

aside, section, article

These elements are more recent introductions to HTML and were in part introduced because of the overuse of semantically meaningless DIV elements.

In a document, ASIDE elements are useful for sidebars or inserts. They are meant for groupings that aren't part of the main content but related to it.

Logical sections should use the SECTION element. Choose the SECTION element over a DIV if the grouping is something that a user would perceive as a logical grouping. Use DIV groupings more for 'internal' organisation of elements which the user is unaware of.

The ARTICLE element is for individual 'items'. If your page shows a number of products, each product might be wrapped in an ARTICLE.

There are no rules about whether ARTICLE elements should be within SECTION elements or the other way around. It depends on how you choose to use them.

Reference

nav

The NAV element is used to contain navigation elements. You can use multiple NAV elements.

<nav>
  <button>Previous image</button>
  <button>Next image</button>
</nav>

Reference

header/footer

These elements are as you would expect, header contains header elements, and footer footer elements. You would typically only have a single header and/or single footer on your page.

Reference

Read more