Author Jennifer Kyrnin defines the term as follows:Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation.
For example, a <p> tag indicates that the enclosed text is a paragraph.
This is both semantic and presentational because people know what paragraphs are and browsers know how to display them.
Jennifer’s definition is both succinct and accurate.
Additionally, her article lists many of the Semantic HTML tags that are widely used today.
But since its publication, newer semantic tags were added to the HTML specification, courtesy of HTML 5.
So, what does HTML 5 bring to the table when it comes to Semantic Markup?Introducing HTML 5 Semantic TagsTo best demonstrate the capabilities of Semantic HTML5 Tags, let’s look at another example.
Below is the wire-frame mock-up of a very simple blog site.
Before HTML5 Semantic Tags gained widespread usage, this page might have been marked up in the following manner:The code example above uses valid HTML.
However, the extensive use of div tags is problematic.
To keep this page maintainable I have to document how each div pertains to the sites content.
To achieve this end I’ve used HTML class attributes, white-space and the extensive use of comments.
But is there a cleaner, more elegant way of tackling this problem?Ah, this is much better!.In the older example, I used comments to describe each div on the page resulting in a much larger and bloated document.
But here, I’m using the Semantic HTML5 tags, header, nav, aside, main, article, section and footer to write cleaner, self-documenting code.
Of course there are a few questions about this example that may spring to mind.
First off, why is there still a div tag on this example?.In the newest HTML5 specification, presentational tags like div and span are not sent out on a figurative death march, but are now only used for stylistic purposes.
In the above example, a div with the wrapper class is used to style the pages layout.
Secondly, isn’t the small tag used for presentational purposes?.The answer here is no.
The small tag may bear a creepy resemblance to the now deprecated bold, italicize, and blink tags that were used back in the day, but it is in fact a Semantic HTML tag which is often used for legal notices on a website.
Finally, is there more HTML5 Semantic Tags that I should know about?.The answer is yes.
For a complete list of Semantic HTML tags, see this handy cheat-sheet from learntheweb.
Additional ReasonsThus far, I’ve demonstrated that the use of Semantic HTML makes life a little easier to craft clean, maintainable markup for your websites.
But is there any other reasons to use it?One big reason that readily springs to mind is Web Accessibility.
The Mozilla Development Network article, HTML: A Good Basis for Accessibility describes in detail how the correct use of Semantic HTML is a crucial first step in making websites accessible for those with visual or physical impairments.
This article discusses how Semantic HTML is used by assistive technologies, to convert text on a web page to audio for the visually impaired.
It also describes how Semantic HTML is used by modern web browsers to implement their own built-in accessibility features, such as keyboard navigation.
Final ThoughtsIn this article, I discussed Semantic HTML and how it works.
Additionally, I briefly talked about how Semantic HTML provides a richer experience to your users, whether they access the web through assistive technologies, or something as simple as a web browser.
At first, the use of Semantic HTML may appear challenging, but by putting in the effort, your markup with be more maintainable for yourself and enjoyible for others.
.