Semantic HTML

What do we even mean by "semantic" HTML?

Essentially, this is a way of describing markup that tells browsers, search engines, text readers and other technologies, what the inherent meaning of a tag is, not just how it should be presented.

For example, an <h1> tag says that it is the most important header on the page, not just that it is presented as the biggest header. On the other hand, tags like <b> (bold) or <i> (italics) just say how the text should be presented, so they are non-semantic.

Where possible, it is better to use semantic tags to convey an extra layer of meaning.

For example, let's say you have a commerce site, and you want to tag the sale price of your latest widget. You could use a <b> tag, but that doesn't convey any extra meaning. If you used the <strong> tag instead, that says, semantically, this bit of text is more important than the surrounding text. And so, if someone with visual challenges was using assistive technology to listen to the page, they would know it is different from the surrounding tags. The bold tag wouldn't do anything for them.

HTML5 Is Hella Semantic

One of the great things about HTML is that it has added a huge number of semantic tags that help explain what the element is, semantically. In addition to being able to do a document outline (see below), these newer tags also allow us to mark up a page to explain the sections or parts of an HTML page. These include tags such as:

<header>, <footer>, <nav>, <main>, <article>, <section>, <aside>

The Outline

Every HTML document has an outline that is readable by technologies such as search engines and text-readers for accessibility. This outline helps to explain how the page is structured in terms of importance. The <h1>to<h6> tags are incredibly important for this.

Let's check out the outline of our sample page. We can download the page and check or just plug in the URL, using this tool.

The Lesson

So for this lesson we will mark up the sample page with semantic tags, and check the outliner to see what happens. We will add the following tags:

  • header
  • article
  • section
  • footer
  • aside
  • main
  • nav
  • div
  • time
  • address

Bonus HTML:

Learning how to do email links.