DEV Community

Cover image for Day 80/100 Semantics
Rio Cantre
Rio Cantre

Posted on • Edited on • Originally published at dev.to

Day 80/100 Semantics

Most people used the static HTML before but as years passed by semantic versions become a big scope of today's HTML structures which defines and make it more readable.

Semantics

Why use Semantic HTML?

  • Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.
  • SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.
  • Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers.

Code Snippets

<main>
  <header>
    <h1>Types of Sports</h1>
  </header>
  <article>
    <h3>Baseball</h3>
    <p>
      The first game of baseball was played in Cooperstown, New York in the summer of 1839.
    </p>
  </article>
</main>
Enter fullscreen mode Exit fullscreen mode
<figure>
  <img src="overwatch.jpg" alt="image">
</figure>
Enter fullscreen mode Exit fullscreen mode
<audio>
  <source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>
Enter fullscreen mode Exit fullscreen mode


semantics

Top comments (0)