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 ide…


This content originally appeared on DEV Community and was authored by Terry Threatt

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


This content originally appeared on DEV Community and was authored by Terry Threatt


Print Share Comment Cite Upload Translate Updates
APA

Terry Threatt | Sciencx (2021-06-12T19:36:11+00:00) Semantic HTML in 5 Minutes. Retrieved from https://www.scien.cx/2021/06/12/semantic-html-in-5-minutes/

MLA
" » Semantic HTML in 5 Minutes." Terry Threatt | Sciencx - Saturday June 12, 2021, https://www.scien.cx/2021/06/12/semantic-html-in-5-minutes/
HARVARD
Terry Threatt | Sciencx Saturday June 12, 2021 » Semantic HTML in 5 Minutes., viewed ,<https://www.scien.cx/2021/06/12/semantic-html-in-5-minutes/>
VANCOUVER
Terry Threatt | Sciencx - » Semantic HTML in 5 Minutes. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/12/semantic-html-in-5-minutes/
CHICAGO
" » Semantic HTML in 5 Minutes." Terry Threatt | Sciencx - Accessed . https://www.scien.cx/2021/06/12/semantic-html-in-5-minutes/
IEEE
" » Semantic HTML in 5 Minutes." Terry Threatt | Sciencx [Online]. Available: https://www.scien.cx/2021/06/12/semantic-html-in-5-minutes/. [Accessed: ]
rf:citation
» Semantic HTML in 5 Minutes | Terry Threatt | Sciencx | https://www.scien.cx/2021/06/12/semantic-html-in-5-minutes/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts