A closer look at Semantics in HTML

Coding is 50% communication and 50% what you code. HTML is the base markup language used by modern web browsers to communicate website content to users. So, it makes sense to add meaning to the markup language of the web.

This can be achieved through Semantics in HTML.

Why use semantics?

• Web accessibility- Our website is designed for the end-users. It helps visually impaired people to navigate through the web page easily. They make use of screen readers to navigate through the pages. As a web developer, adding too many divs for styling pages without using semantic HTML tags will make it difficult for such users to understand the intent of that section of the web page. For instance,

<article>
  <h1>Title of the blog</h1>
  <p>Blog content brief</p>
</article

If a developer uses the <article> tag for a blog page instead of plain <div>, the screen readers can better communicate the meaning to the visually impaired person.

• Easy to read code for other developers

HTML files can contain lengthy code inside. If every section has the same-named HTML tags without a specific purpose, it would be confounding for developers to understand the code. Also, usually, developers work in a team. Using semantics as part of HTML code writing improves the readability of code and communication of code to other developers.

In a scenario with no semantics in HTML, code will usually look the same with no clear distinction between elements. There will be no named tags but, say, just one <div> to mark an entire web page.

   <div>Weather is beautiful outside.</div>
   <div>Weather forecast:</div>
   <div>1. Max temperature - 24 degrees Celsius</div>
   <div>1. Min temperature - 12 degrees Celsius</div>
   <div>Image</div>

Ah! It is confusing to read. Thanks to semantics in HTML, writing HTML code has become simple, more readable and meaningful.

• Improves CSS styling for similar HTML components

Semantics help developers use specific names to style the same elements on different pages or multiple blocks of the same element on the same web page.

In the example below, if you were to style a <details> tag or a <p> tag using CSS, it becomes much quicker to style these tags using their names. These CSS properties will automatically apply to all the <details> and <p> tags.

 details{
     color: blue;
 }

 p{
    font-family: 'Courier New', Courier, monospace;
 }

Suppose you wish to add separate style properties for the <summary> element inside multiple <details> tags & each of these <details> tags have different information. You can style these using class attributes and the name of summary tags.

<details class="about">
    <summary>My Hobbies</summary>
    <ul>
     <li>Playing cricket</li>
     <li>Reading books</li>
   </ul>
  </details>

  <details class="facts">
    <summary>Facts on Weather</summary>
      <ul>
        <li>It gets cold in December in Australia.</li>
        <li>In the Sahara desert, the temperature is high 
            during days. </li>
      </ul>
  </details>

styling:

 .about summary{
     list-style-type: circle;
     color: blue;
}

 .facts summary{
     list-style-type: square;
     color: purple;
}

Semantic HTML is highly recommended & of high utility especially, for newbies trying to understand the webpage markup language.