Page Structure Elements

Page structure elements are block level elements that define the overall structure of a page.

Main

The <main> element will contain the main content of the page. There should only be one main element to a page and it should be a direct child of the <body> element.

<main>
  ...
</main>

The <header> element could be a header for the page, article, section. It usually contains a heading element and may also contain introductory text, descriptory content (publication date, author, tags, etc.), and navigational aids (filters, buttons, links, inputs, etc.).

<header>
  ...
</header>

Articles

Article elements are used for syndicated content, meaning content that could be used elsewhere in whole.

<article>
  ...
</article>

Asides

Aside elements are used to designate additional information for their parent element that is secondary information relating to the primary information for that element.

<aside>
  ...
</aside>

Footer elements for after content for the parent element.

<footer>
  ...
</footer>

Section

The <section> element designates new sections with a parent element, and usually contains a <heading> element as a first child.

<section>
  ...
</section>

Full Page

The structure on a full page then would look similar to this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document Title</title>
  </head>
  <body>
    <main>
      <header>
        <h1>Document Title</h1>
      </header>
      <article>
        ...
        <aside>
          ...
        </aside>
      </article>
      <aside>
        ...
      </aside>
      <footer>
        ...
      </footer>
    </main>
  </body>
</html>