Giving Meaning to Content: An Introduction to Semantic HTML and Structurally-Based Elements

3 min readJul 6, 2021

You may have heard the term “semantic HTML” thrown around without being sure of what it means. Today, I’m going to break down exactly what semantic HTML is and some examples of semantic elements to use when building an application.

First, let’s define Semantic HTML.

According to Merriam-Webster, semantic is defined as “of or relating to meaning in language”. Semantic HTML is, in turn, HTML elements that have meaning. Semantic HTML describes the content within the element, and it gives meaning and structure to the content within a page. Rather than using elements like <div> or <span>, we will be using more descriptive elements like <header>, <nav>, and <article>.

Why Semantic HTML?

It significantly aids in accessibility for those that are visually impaired and rely on screen readers.
It improves your placement on search engines.
It is easier for web designers to read and follow along than trying to navigated through a bunch of nested divs. If a new developer takes on a project, it will be much easier for them to understand what the code is trying to accomplish when semantic elements are involved.

Now, let’s take a look at some important semantic elements and how to incorporate them into your code!

Header

The <header> elements identifies the top of a page, or section of a page. It usually contains a heading, introductory text, or navigation. Look at the top of the page you are currently reading this post in. It includes my username, some navigation links to my profile, and then on the right side some other navigation links. If I built a mock-up of Medium, I would put all of those elements inside a <header> tag.

<header>
   <h1>thequeenbeebs</h1>
   <--! navigation links go here -->
</header>

Now, let’s add in the navigation links using another semantic element.

Navigation

In order to organize a block navigation links, semantic HTML uses the <nav> element. It can simply be used on this own, but in this situation I will nest it inside the header element we have already created:

<header>
   <h1>thequeenbeebs</h1>
   <nav>
      <a href="followers.html">10 Followers</a>
      <a href="about.html">About</a>
   </nav>
</header>

Nice and neat, and much clearer than having a div nested inside of another div.

Article

The <article> element is for content that is independent and self contained. Things like newspaper articles and blog posts like this one! Continuing on with the mock up of Medium, I would simply use <article> like so:

<header>
   <h1>thequeenbeebs</h1>
   <nav>
      <a href="followers.html">10 Followers</a>
      <a href="about.html">About</a>
   </nav>
</header><article>
   <--! All blog post text goes here -->
</article>

So simple, and clearly shows any other web developer looking at the code exactly what we are dealing with.

These are just a couple of basic examples of semantic HTML elements. If you would like to learn about more of them, check out this great breakdown from W3Schools. Happy coding!