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:
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.Advanced Capabilities: Tags like
<audio>
&<video>
bring new ways to add media to web pages.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
Top comments (0)