Semantic HTML in 5 Minutes

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>

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