Introduction

In this post, I will explain what semantic HTML is, give examples, and answer the question of why it is necessary to structure your HTML document semantically. I will also give you my tips for writing semantic HTML.

First of all, what is semantic HTML? Semantic HTML allows us to structure our HTML document in such a way that each HTML tag gives added meaning to the document. In other words, the HTML tags we use in the document should give a description of that area of the document.

Semantic markup has always been present within HTML. For instance, tags that allow you to define the title, heading, paragraphs, and different types of lists are a few of the tags that give a degree of meaning to the document. HTML5 takes this further by allowing you to define tags that add structure to the entire document and meaning to each individual tag.

As examples, observe how the HTML documents are structured below:

HTML Document without semantic elements

The screenshot above shows how you would structure an HTML document without semantic tags. Compare and contrast this with the screenshot below:

HTML Document with semantic elements

Observe how the HTML document with semantic elements differs from the one without. Instead of throwing all the tags and content between div tags we have added elements that define the structure of a typical web document such as header, nav, section, and footer. All-in-all, this approach will add clarity to your document structure.

Importance of Semantic HTML

There are several reasons for adding semantic HTML elements to your document. Some of these include:

1. Structuring the document with semantic elements will make your document easier to read and maintain. Going back to the HTML document with the semantic elements above, you can instantly see what the tags represent. For example, the header tags instantly tell you that anything within those tags falls within the website header.
2. Another reason to use semantic tags is to help people with visual or audio impairments. Using semantic HTML helps improve the accessibility of your website for such individuals. Screen readers are better able to read these tags and interpret them for such individuals.
3. SEO considerations are another good reason to use semantic elements in your document. Search engines have an easier time finding and giving importance to content that is in tags such as header, nav, and footer than generic div tags for example.
4. Writing an HTML document with semantic elements also helps you write code that is consistent across the document. Having this consistency will make it easier when you or someone else comes back to the document at a later time and needs to make changes. In other words, you are future-proofing your document.

My Tip for Writing Semantic HTML

When writing your HTML document always ask yourself whether it is possible to replace an element with a semantic element that adds more meaning to the structure of the document. An exhaustive list of semantic elements you can use can be found here.

Conclusion

In conclusion, writing your HTML with semantic elements will help you produce a well-structured document. It will also save you time in the future when you need to make changes to the document for any reason.

Resources

Here is a list of resources you can use to learn more about semantic HTML elements and how to use them in your document.

You can find an exhaustive list of semantic HTML elements here.

This page will go into further detail on Semantic HTML and also explain the Accessibility Object Model.

A good article on how to write good semantic markup for your document structure can be found here.

A detailed guide on semantic HTML is available here.