HTML5 Formatting and Outline

stablev1.0.0

Key concepts for a semantic and accessible markup.

Overview

The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, therefore they should be used without restrictions.

Outline

The outline concept helps to organize the page creating this structure. Think of it as a glossary. Visually we convey this hierarchy through CSS code, making heading elements more visually strong for example. But we have to be aware of the full spectrum of users that can access our pages, and here's where the use of semantic tags, those that not only hold the content, but preemptively gives us insight about its contents as well as proper nesting come into action. As well as nesting different subjects or levels or importance inside others.

Section elements

New sectioning elements defined in HTML5:

HTML Header Element <header>
HTML Footer Element <footer>
HTML Navigational Element <nav>
HTML Article Element <article>
HTML Section Element <section>
HTML Aside Element <aside>

Pre-existing elements used for sectioning:

HTML Body Element <body>

Contains introductory content, text or navigational aids. It may contain other heading elements such as logos, search forms, etc...

Pug
HTML

header
  h1 Tom hanks
  img(src='#' alt='Incredible photo of Tom Hanks')

<header>
  <h1>Tom Hanks</h1>
  <img src="#" alt="Incredible photo of Tom Hanks"/>
</header>

Nesting header elements

You should never nest a header inside another header or in a address or footer elements.

Valid elements inside header

You can nest almost any element inside a header except for another header (as stated before), or a footer element.

The footer element represents the information at the end of its nearest sectioning element, or sectioning root element. Typically it contains information about the author of the section, copyright or links to related documents.

Pug
HTML

footer
  p © Selectra

<footer>
  <p>© Selectra</p>
</footer>

Exactly like the header element, you should never nest a footer inside another footer or in a address or header elements.

You can nest almost any element inside a footer except for another footer (as stated before), or a header element.

Nav element

Major site navigation, equivalent to role='navigation' Used for primary, secondary and/or in-page navigatoion. Not to be used for any other kind of link list, like social media or recent articles in a blog.

When to use nav?

Use the nav tag on these situations:

Only once per navigation block: Sub-navigation withing a nav does not need to be wrapped in a second nav. Learn more.
Only for major navigation blockquotes:
- Primary navigation
- Secondary navigation
- In page navigation (within a long article, for example)
Breadcrumbs: Breadcrumbs should be wrapped inside nav tags.
Don't use for:
- Pagination controls
- Social Links
- Tags on a blog post
- Categories on a blog post
- Tertiary navigation
- Footer

Nesting navigation elements

You cannot nest a nav into another, but you can have both your primary and secondary menus together in the same nav tag.

Pug
HTML

nav
  ul
    li
      a(href="#") Primary link
    li
      a(href="#") Primary link
      ul
        li
          a(href="#") Secondary link
        li
          a(href="#") Secondary link
    li
      a(href="#") Primary link

<nav>
  <ul>
    <li><a href="#">primary link</a></li>
    <li>
      <a href="#">primary link</a>
      <ul>
        <li><a href="#">secondary link</a></li>
        <li><a href="#">secondary link</a></li>
      </ul>
    </li>
    <li><a href="#">primary link</a></li>
  </ul>
</nav>

Valid elements inside nav

As stated in the previous section, a nav element cannot have another nav element nested inside. List elements are the most common for nav tags, but they're not mandatory. Any other elements like link tags for example, are perfectly valid too.

Pug
HTML

// List example
nav
  ul
    li
      a(href="#") List link
    li
      a(href="#") List link
    li
      a(href="#") List link

// Links example
nav
  a(href="#") Simple link
  a(href="#") Simple link
  a(href="#") Simple link

<!-- List example -->
<nav>
  <ul>
    <li><a href='#'>List link</a></li>
    <li><a href='#'>List link</a></li>
    <li><a href='#'>List link</a></li>
  </ul>
</nav>

<!-- Links example -->
<nav>
  <a href='#'>Simple link</a>
  <a href='#'>Simple link</a>
  <a href='#'>Simple link</a>
</nav>

Article element

The article element (which is equivalet to role='article') is used to define pieces of self-contained content. I.e. that if you isolate the article tag, its contents should still make sense without the rest that was accompanying it.

Valid elements inside article

You can nest almost any element inside an article, particularly all the HTML5 semantic elements, to create the proper structure:

header
aside
blockquote
footer
section

Article nesting

Another element that can be nested inside an article is the section which in turn can too have nested article inside.

section
  h1 Title of the section
  article
    header
      h2 Title of the article
      p Intro to the article
    section
      h3 Title of a sub-section of the article
      p Sub-section
    footer
      p Footer text

Think of it as a section of your page that contains an article which can be very long, and have in turn different section elements inside to order its own content.

Section element

Used to group a standalone section of thematically similar content that does not have a more specific semantic element to represent it. Usually it has a heading.

section
  h1 Super duper content
  ul
    li
      img(src="../" alt="Description")
    li
      img(src="../" alt="Description")
    li
      img(src="../" alt="Description")

Aside element

Used for related content, like sidebars that contain blockquotes, definitions, call-outs, CTAs, etc...

section
  h1 Super duper content
  ul
    li
      img(src="../" alt="Description")
    li
      img(src="../" alt="Description")
    li
      img(src="../" alt="Description")
  aside
    p Call us

Aside nesting

You can nest an aside inside any sectional element, but never inside another aside.