Semantic HTML refers support and accessibility tags introduced to the markup language HTML in the 2008 release of HTML5. These new tags like
<summary> bring about new ways for browsers to identify new elements on a webpage and with more description.
The need for more descriptive tags were necessary as the internet grew and here's a few important reasons for Semantic HTML:
Accessibility: Tags like
<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.
Advanced Capabilities: Tags like
<video>bring new ways to add media to web pages.
Specificity: Tags like
<footer>provide more clearer distinction than divs for developers to work with.
ex: <div id="header">Semantic HTML</div>
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>
Visit MDN for a deeper look into Semantic HTML elements.
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.