HTML Layout

A semantic element in HTML helps us navigate the document with greater ease. For example, the nav tag is a semantic tag that defines a group of links.

Semantically, hr tags also suggest a change in topic.

Primary semantic elements

Header

Note that this is different from head and from heading (such as h1). We can have several header tags, but they have to be nested appropriately within the hierarchy that they are defining.

Main

There can only be a single main element. Usually we’ll include this in the body of the page itself, apart from the header and footer.

Footer

This is much like the header tag in that there can be more than one.

Nav

We can have more than one nav element in the page, but in that case it is important to label the elements by doing nav aria-label={label-name}. Note that this is primarily to help screen reading technology.

We can also do aria-labelledby={header-name} if we follow up, for example, with h2 id={header-name}.

Other tags

In addition to section, we can use the following:

• article → Means a specific section has its own topic. Note that both article and section can be used in the same way, although an article has a more precise semantic meaning of particular topic.
  • One can think of section as being sections of a given article, for instance.
• aside → a section of complimentary text
  • details → Can be used as a quiz for question/answers
  • summary → creates a little arrow that can hide/show some data
• time → specifies a specific time. Note that it takes a datetime="08:00" argument. Does not change the visuals of the page, but adds meaning to the tag

Elements to avoid

• div → divs have no semantic meaning, they just mean divider.
• span → like divs, but inline