Structural Elements | Learning to Code

The Elements

These elements were added as part of HTML5.
They are generally concerned with the major areas of a layout, thus they define the structure of the page.

Element	Usage	Recommendations
<article> </article>	Articles are blocks in the document content, containing either links to other documents (and other details about the documents) or the current page content.	Sometimes used for summaries of other documents, such as a listing of latest posts on a blog home page.
<aside> </aside>	Content of secondary importance.	Often used for side columns in a layout.
<figure> </figure>	Holder element for images and other media types.	Useful for visualizations (charts, diagrams, etc.), especially if they are captioned.
<figcaption> </figcaption>	Caption for figures.	This is the best markup for figure captions, as it is specific to that purpose.
<footer> </footer>	Holds the footer of the document, or the footer of another structural element (such as an article or a section).	Typically one per page, containing whatever is used for the page footer (navigation, copyright, etc.).
<header> </header>	Contains the header area for the document or the header area for another structural element (such as an article or section).	Typically one per page, containing the logo, top navigation, etc. (often referred to as the masthead).
<main> </main>	Holds the main page content.	Typically one per page.
<nav> </nav>	Container for navigation bars, which are generally unordered lists.	There would be one of these per navigation bar. To improve accessibility add an `aria-label` attribute to the tag, with a label that identifies the navigation bar, such as `<nav aria-label="Product Navigation"></nav>` for a navigation bar containing product links. The `aria-label` value would be spoken or output by assistive technology when the navigation bar was accessed, providing important context details.
<section> </section>	Container for blocks of page content.	Be sure to have at least one sub-heading (such as an `<h2></h2>` or whatever heading level is appropriate given the document hierarchy) within the section.

Default Structural Element Display

These structural elements now default to block display in current browsers.
This was not always the case - when they were first introduced they displayed as inline.
Technically they could be grouped with block-level elements, given the current default rendering.
If older browsers need to be supported, then use the display property in CSS to display them as block.

Basic Layout Structure

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <title>Basic Page Layout</title>
  <meta charset="utf-8" />
</head>
<body>

<!-- header element for masthead (top region) of layout -->
<header>

  <!-- typically there are <nav></nav> tag(s) inside header holding top navigation bar(s) -->

</header>

<!-- main element for page content -->
<main>

  <!-- typically there are the following containers wrapped around content blocks:

   <section></section> and/or  
   <article></article> and/or
   <aside></aside> 

  -->

</main>

<!-- footer element for page footer -->
<footer>

  <!-- typically there are <nav></nav> tag(s) inside the footer holding the footer navigation bar(s) -->

</footer>

</body>
</html>