Why we should write Semantic HTML ?

July 31, 2023·3 min read

Priya Jain

@priyajaindev

Semantic HTML is used by automated tools and humans alike to understand the meaning of content on a webpage. If you want your website to be accessible, semantic HTML is a must.

Semantic HTML

Semantic HTML markup isn't just about making markup easier for developers to read; it's mostly about making markup easy for assistive tech / automated tools to decipher.

Common Semantic HTML Elements

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<main> - Defines the main content of a document
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<time> - Defines a date/time
<details> - Defines additional details that the user can view or hide
<summary> - Defines a heading for the <details> element
<figure> - Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> - Defines a caption for a <figure> element
<mark> - Defines marked/highlighted text
<meter> - Defines a scalar measurement within a known range (a gauge)
<progress> - Represents the progress of a task

Without Semantic HTML

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

With Semantic HTML

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Why we should write Semantic HTML ?

Semantic HTML is used by automated tools and humans alike to understand the meaning of content on a webpage. If you want your website to be accessible, semantic HTML is a must.

Accessibility object model (AOM)

As the browser parses the content received, it builds the document object model (DOM) and the CSS object model (CSSOM). It then also builds an accessibility tree. Assistive devices, such as screen readers, use the AOM to parse and interpret content. The DOM is a tree of all the nodes in the document. The AOM is like a semantic version of the DOM.

This is chrome AOM of above html code :

Looking at Chrome developer tools, you'll note a significant difference between the accessibility object model when using semantic elements versus when you don't.

You can inspect the AOM in developer tools.

Some of common don’t / do

Avoid using <b> and <i> to bold and italicize texts on a web page

Don't do this ⬇️:

  <p><i>Code at your own pace</i><p>
  <p><b>code at your own pace</b><p>

Do this instead ⬇️:

  <p><strong>Code at your own pace</strong><p>
  <p><em>code at your own pace</em><p>

Don't place block-level element within inline elements

The <p>, <h1> ... <h6>, and the <div> elements are some of the examples of a block level element.

The <span>, <em>, and the <a> elements are some of the examples of inline elements.

Don't do this ⬇️:
```
<a href="#" >
    <p> Visit priya.today </p>
</a>
```
Do this instead ⬇️:
```
<p>
  Visit <a href="www.priya.today" target="_blank">priya.today</a>
  to learn Every thing about dev.
</p>
```
Use the biggest heading tag h1 for the main heading and so on.