Semantic HTML and Why It’s Important

What is Semantic HTML?

Semantic HTML is all about adding meaning to your markup so it is readable to both humans and computers. Your goal should always be to communicate clearly. Semantic markup requires that HTML elements be used according to their intended purpose and maintain the separation of content and presentation. Semantic elements are those with meaning to the developer, browser, and search engine.

For example, the <h1> tag when used semantically, tells a human or computer looking at your HTML that this is the most important heading. It should not be used however because <h1> is the size you want your heading to appear in the browser. The visual presentation of your page should be controlled with CSS not HTML. Another common mistake is to use id and class in place of semantic HTML, for example <div id=”nav”>.

Below is an example on the left of semantic HTML elements vs generic, non-semantic elements on the right.

Why It’s Important

Writing semantic markup is crucial “if you want your website to be accessible to all visitors, to achieve a high search engine ranking, to be available to visitors from around the world, and to interface effectively with other web services” (via https://html.com/semantic-markup/).

To break this down a bit, semantic markup gives context to screen readers for those visitors who are visually impaired and provides context for translation tools. Semantic HTML also plays a role in search engine ranking so it can improve your SEO. Good CSS can disguise bad HTML, but no amount of styling can make bad HTML more meaningful to the human and machines visiting your page who it is your goal to communicate clearly with.

Semantic HTML Tags as of HTML5

There are roughly 100 semantic elements available, but below is a quick list of the latest introduced in HTML5.