Photo by Sigmund on Unsplash
In this article, we are going to be looking at Semantic HTML, how it relates to accessibility, and why it is important. First, let’s start with the big question.
What is Semantic HTML?
Springboardseo.com defines Semantic HTML or Semantic Markup as “The correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance”.
A simpler definition by Lifewire.com says Semantic HTML introduces meaning to a webpage rather than just presentation.
For example, <h1> indicates that the enclosed text is a header. This is a perfect example of a Semantic HTML tag because it has meaning to people (anyone who hears the word header knows what it means) and the browser also understands and knows how to present it.
Other examples of Semantic HTML include:
<p> — Paragraph
<nav> — Navigation
<footer> — Footer
<article> — Article
<table> — Table
Examples of Non-Semantic HTML include:
<div>
<span>
Semantic HTML and Accessibility
How are they connected?
First, accessibility in web development means providing every user with a good way to access, navigate, and interact with your website. This means it should support screen readers or any sort of assistive device.
This is where Semantic HTML comes in. The use of Semantic HTML makes your website accessible to these assistive devices. Screen reader software like JAWS and NVDA are not just able to turn texts into speech but can use your HTML tags to read out the headings in a page, the items in a list, and even provide navigation controls to data tables.
Why is it Important?
The 2 major benefits of Semantic HTML are Accessibility and SEO. Others include maintenance, clarity, etc.
SEO
Making sure that the contents of your web page get to the targeted audience is why you need SEO. Search engines make use of web crawlers to index the contents of a website so that those websites can appear in search results. Now, these Search Engines rates the importance of keywords based on their HTML hierarchy. This means that keywords enclosed in a header tag is given more importance that keywords in a paragraph tag. When contents are attached to the correct tags, it maintains clear architecture and hierarchy and tells these crawlers the type of information contained in a web page.
When a search is made on a search engine, keywords in the search is cross referenced with the results from the web crawlers. A web page is then presented by the search engine based on the keywords in the search and the order of importance in the hierarchy of the HTML tags.
Accessibility
This is the main importance of Semantic HTML. It is the developer's obligation to practice inclusiveness by making their web pages accessible to every potential user. Semantically correct HTML retains its meaning on any technology used to access that web page and allows assistive technologies to translate the page info to an audible speech or braille.
Clarity
This goes in hand with maintenance.
Semantic HTML helps us write clear codes. Take for example the use of <div> instead of <ul> and <li> tags.
This is Non-Semantic
Non-Semantic
This is semantic
Semantic
You can see from these that on first sight of the semantic HTML, it is already clear and understandable to you. This is where maintenance comes in.
Maintenance
A clearly written code is easier to maintain. Especially when working in a team or on a project that will be handled or maintained by another developer. It is a lot more difficult to understand a non-semantic HTML code which in turn increases the difficulty of maintenance and bug tracking.
Want to learn more about Semantic HTML and accessibility? Check out this content on Accessibility, Usability and Inclusion by W3C (World Wide Web Consortium) an international community that develops open standards for web development. Accessibility, Usability, and Inclusion Accessibility, usability, and inclusion are closely related aspects in creating a web that works for everyone. Their…w3.org
Cheers.