In HTML especially after HTML5, there were several New Tags introduced which provided better meaning (Semantics) to your Content. Tags like Article, Aside, Header, Footer, Section would tell what kind of content is expected there. So writing Semantic HTML is all about using the write and meaningful tags for your content.
We also have in HTML a lot of non-semantic tags like span div etc and you will see a lot of div’s lying around in HTML to make it a header or footer properly styled with CSS to give it an appealing look. So when we can achieve the same thing with div’s and span why even bother?
Why Should We Write Semantic HTML?
When you are using Semantic HTML Tags you are also in a way defining what your content is. This is not only a good practice but it also helps assistive technologies, bots, and readers make better sense of your content.
Assume you using H1 for your heading vs using a Div and styling it with proper fonts and colors to appear like a Header or you are using a correct Tag that not only contains the Heading but also defines it to be the main heading of the page.
Likewise, you can create navigation using a div tag but using a nav tag would be better.
Stop using Semantic Tags for Styling
Some Semantic tags have some styling associated with them, Never rely on Site Styling for Tag Default rather use proper CSS for Styling. In XML for example, when we provide content we try to give a meaningful tag around it to make it more sensible and also which can be decoded and understood using some logic.
What about Non-Semantic Tags – How do we give them meaning?
Not everything in the HTML elements you will write will have some default meaning. For this HTML has a Role Attribute the value of the Role attribute gives meaning to the HTML Element. It can be used to give meaning to a Non Semantic Tag or it can also be used to change the meaning of a Semantic Tag.
<a href="#" role="button">Button Link</a>Anchor already has a Role of a Link but here in this case we are changing its Role to Button to make users understand that here it’s used as a button. The Role attribute has predefined values, The Role attributes are also useful in cases where we have a Custom Widget Created as Custom Widgets are new and their definition is not registered in HTML semantic.
The use of Role along with ARIA States and Properties helps in defining Accessibility information for Custom elements.
Conclusion
We should always use Semantic Tags in our HTML and avoid using ARIA Roles, State, and Properties. However, if there is a Custom Element created we must try to add Accessibility information using ARIA Roles, State and Properties.