What is semantic HTML?
Also known as semantic markup, semantic HTML is the practice of using tags that accurately convey context of elements found within; it's using right tool for the job so you're not hitting a nail with a screw driver. The approach enhances the code's readability and ensure that both human and machine — developers and assistive technologies — can interpret and process the content effectively.
An element is considered semantic when it provides some kind of contextual information. In modern HTML, roughly 100 semantically-meaningful elements are made available but some common examples include headings such as <h1> and content like <p>, <ul>, <table>, and <figure>. Landmark elements like the <header>, <main>, <aside>, <nav>, and <footer> are also semantically-rich.
Elements that lack or are otherwise devoid of context are considered non-semantic and typically used programmatically or for styling with CSS. Common examples of non-semantic elements are <div> and <span>. Other visual tags like <i> and <br> also offer no semantic value on their own.
Benefits of semantic HTML
Maintainability
A website built on the principles of semantic markup is measurably easier to maintain. By integrating landmarks like the <article> and <nav>, the code's purpose becomes self-explanatory.
In collaborative environments, semantic elements provide a shared language that keeps everyone on the same page and can even reduce the reliance on comments and documentation.
Usability
The use of semantic elements ensures you're not forcing an element to behave in a way the user may not expect. A common example of this is using buttons for links, where the user expects the button to fire an event rather than a redirection.
Some semantic elements can also serve as visual markers and help users visually scan the page for information. In the following illustration, the first page has clear visual breakpoints thanks to the use of headings with extra margins. In contrast, the second page seems to appear as a single block of continuous text despite having the same contents.
Accessibility
Navigating the web without semantic elements can be compared to driving without any signs; you're probably going to get there eventually, but it'll be a long and frustrating drive.
When a screen reader bumps into a semantic element, it gives the user information on the type of content to expect; a table with six row and three columns, or a level 2 heading. Other elements like <header>, <main>, <aside>, <nav>, and <footer> provide a high-level outline of the document's structure and serve as important landmarks that screen readers can quickly jump to.
Search engine optimization (SEO)
Search engines look for semantic elements like headings and landmark areas to index a page's contents. Indexing services will heavily favor pages with a proper, semantic structure because they can easily interpret the information found within. Google Search central, for example, emphasizes on the importance of headings:
Use meaningful headings to indicate important topics, and help create a hierarchical structure for your content, making it easier for users to navigate through your document.