DEV Community

Bernard Faria
Bernard Faria

Posted on

What is semantic HTML5?

If you know a little bit of HTML, you'll know that HTML tags are (mostly) used to format the content - these tags tell the browser how to display the content on the page. They do not give an indication of the type of content they contain or what role the content plays on the page.

Semantic HTML5 addresses this shortcoming by defining specific tags to clearly indicate what role the content these tags play. This explicit information helps robots / crawlers like Google to better understand which content is important, which is a subsidiary, which is navigation and so on.

For blind or visually impaired users who rely on screen readers to verbally describe what is on a page, proper use of HTML5 semantic elements will allow screen readers to communicate their content more accurately, making the visual audible. It is essential to adopt this latest version of HTML so that you can make your content accessible to all possible site visitors.

Example of non-semantic tags:

<div> <span>
Enter fullscreen mode Exit fullscreen mode

Example of semantic tags:

<header> <footer> <nav> <article> <main> <section>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)