Table of contents
What is Semantic HTML?
Semantic HTML refers to the use of HTML tags to convey the meaning of the content embedded in them, rather than solely focusing on the intended output's appearance.
Semantic HTML tags make web pages and web applications accessible to assistive technologies, such as screen readers, unlike non-semantic tags.
Semantic HTML can make it simpler to access information and provide a better experience for all users regardless of their abilities when written appropriately.
As a developer, designing with accessibility in mind is of utmost importance, of which semantic HTML plays a vital role.
In addition to improving accessibility, semantic elements have several benefits. They are:
Easy to understand when read by other developers.
Better on mobile and easier to make responsive.
Ranked higher by search engines.
Here are some semantic HTML tags and their uses:
<header>: It contains introductory information about a page.<nav>: It contains all the navigation links.<aside>: It contains information that is indirectly related to the main content.<main>: It houses the main content of the page.<footer>: It contains copyright and contact information at the foot of the page.
Best practices for Semantic HTML
When it comes to using semantic HTML, there are a few best practices to keep in mind.
Firstly, use the appropriate tags for the content you are trying to convey. This may seem obvious, but it is easy to fall into the trap of using non-semantic tags like <div> for everything.
Secondly, hierarchically use tags. This means that tags like <header> and <footer> should only be used once per page, while tags like <section> and <article> can be used multiple times.
Thirdly, avoid using tags for purely presentational purposes. For example, using the <b> tag for bold text is not semantic, as it doesn't convey any meaning about the content.
Lastly, make sure to validate your HTML code. This ensures that your code is syntactically correct and follows best practices, which can improve accessibility and search engine ranking.
By following these best practices, you can ensure that your HTML is both semantic and accessible, providing a better user experience for everyone who visits your site.