HTML5 Semantic Markup

Go back to HTML and CSS Index

In this lesson, we will have a look at the different elements that make up semantic markup in HTML5

Why use semantic markup?

When working with web development, we often need to place content in boxes to collect the pieces of content that are related or to place elements in relation to other elements.

Until now, we haven't had that much focus on these boxes and the connection between the pieces of content on our pages - but that is about to change...

In HTML, there are two types of boxes used to group pieces of content - the semantic ones and the non-semantic ones.

The ones of you who have worked with HTML before may have come across a lot of div elements. A couple of years back, practically every box used to create the layout on a page, was really a div element. Nowadays, however, div elements have - in most cases - been replaced by semantic elements = elements with a meaning.

Non-semantic elements, like the div element, doesn't give the browser any clue as to what's in them. They are kind of like moving boxes with no tags on them. There's no hierarchical relation between them either.

The most common non-semantic tags are:

  • div
  • span

The div element is a block element that is very commonly used in CSS Frameworks like e.g. Bootstrap.

The span element, however, is an inline element that is sometimes used to highlight and/or change the styling of some words in a paragraph.

Layout-wise you can achieve the same thing using semantic or non-semantic markup, but using semantic markup, the code will be understood more easily by other web developers as well as browsers.

Semantic elements

When marking up the page, here are some of the semantic elements that may be used instead of div elements:

  • header
  • nav
  • main
  • section
  • article
  • aside
  • footer
  • details
  • figure
  • figcaption
  • mark
  • summary
  • time

Let's have a look at some of them.

The header element

The header element usually contain the page header, but it may also be used in sections, articles or asides.

The page header usually contains the logo and site navigation, while the article header often contain a heading, the date of publish, the author or something similar like you see in CSS Trick's article on optimizing CSS for faster page loads or in A List Apart's article on Webwaste.

The header element looks like this:

<header>
<!-- Header Content -->
</header>
4.0 | The header element

The nav element

The nav element is to contain all major blocks of navigational links, like menus, tables of content, and indexes:

<nav>
<ul>
<li>
<!-- Anchor -->
</li>
</ul>
</nav>
4.1 | The nav element

The main navigation is often placed inside the header element. You can find examples of this on the websites mentioned above as well.

The main element

The main element is meant to hold the primary content on a page:

<main>
<!-- Primary content -->
</main>
4.2 | The main element

The section element

The section element represent a standalone section. These sections typically have a heading:

<section>
<h2> Cat Breeds </h2>
</section>
4.3 | The section element

Sections may also have a header and/or footer.

The article element

Examples of content that may be placed inside articles are blog posts and articles on news sites:

<article>
<h2> The Egyptian Mau </h2>
</article>
4.4 | The article element

Like sections, articles typically have a heading, and may also have a header and/or footer.

The aside element

Content that is placed in the aside element should not be part of the primary content of the page. The element is often used to contain sidebars - like on a blog where they may hold some information about the blogger.

The footer element

The footer usually contains information about the author of the section, copyright data or something like that.

If you inspect the CSS-Tricks website, you'll find examples of use of most of the elements mentioned above. They are sometimes wrapped in div elements - but they are there to semantically mark up the content.

Assignment

  • Add semantic markup to the pages that you have created so far. Beware only to add boxes where boxes are needed.

Next up

All of the semantic elements explained above are block elements. And now that we know some block elements, we might want to add some background images to some of them - just for fun.

Next up: Inserting background images