DEV Community

loading...
Cover image for Semantic HTML in 5 Minutes

Semantic HTML in 5 Minutes

Terry Threatt
🖥 Software Engineer
・2 min read

What is Semantic HTML

Semantic HTML refers support and accessibility tags introduced to the markup language HTML in the 2008 release of HTML5. These new tags like <details> & <summary> bring about new ways for browsers to identify new elements on a webpage and with more description.

Why Semantic HTML

The need for more descriptive tags were necessary as the internet grew and here's a few important reasons for Semantic HTML:

  1. Accessibility: Tags like <nav> & <article> give more meaningful information for things like screen readers, which allow upwards of 5 million more people with reading disabilities to access web pages.

  2. Advanced Capabilities: Tags like <audio> & <video> bring new ways to add media to web pages.

  3. Specificity: Tags like <header> & <footer> provide more clearer distinction than divs for developers to work with.
    ex: <div id="header">Semantic HTML</div>

Converting to Semantic HTML

Let's make this more accessible to get rid of the deeply nested div issue.


<!-- Before -->

<div id="header">
 <div id="section">
   HTML Elements:

   <div id="article">This is an article about HTML elements</div>
 </div>
</div>


<!-- After -->

<header>
 <section>HTML Elements:</section>

 <article>This is an article about HTML elements</article>
</header>
Enter fullscreen mode Exit fullscreen mode

Learn More

  • Modernizer - Javascript library for detecting Semantic tags on a website.

  • Visit MDN for a deeper look into Semantic HTML elements.

Let's chat about Semantic HTML

The was a quick intro into Semantic HTML and how you can make your web pages more descriptive and accessible. If you enjoyed this post feel free to leave a comment about your experience working with Semantic HTML or HTML5.

Happy Coding,
Terry Threatt

Discussion (0)