This is part of a three part series:
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
“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.”
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.