This is part of a three part series:

  1. What is semantic HTML?
  2. What is Web components?
  3. Are custom-elements semantic HTML?

What is semantic HTML? (1/3)

Let me start of with two quotes:

“Semantic HTML is the correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance.” From the article

What is semantic html? by


“Semantic code means that you use the right elements for the content you want to produce, use a <dl> for a definition list instead of <div>:s, or use HTML5 elements like <article>, <nav>, <figure>, <header> and so on.”

Why write semantic HTML? by Johan Bjällskog

How do you do it?

You write and practice semantic HTML when you use elements with the purpose of intent and meaning rather than how they are meant to look and be styled.

Sidenote: HTML5 is 7 years old!

This article from 2009 talks about the new HTML5 elements might not even be enough in order to achieve good semantic markup Semantics in HTML5 by John Allsopp (there are mentions of Micro-formats and other attribute related solutions) for and now 7 almost 8 years later we discuss custom elements and such.

codepen pen arrow-right arrow-down arrow-left twitter github