DEV Community 👩‍💻👨‍💻

Cover image for A closer look at Semantics in HTML
Shriya Dhar
Shriya Dhar

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
 }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

styling:

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

 .facts summary{
     list-style-type: square;
     color: purple;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
 
nikolab profile image
Info Comment hidden by post author - thread only accessible via permalink
Nikola Betica

Hi, good article, but... while you're talking about the importance of semantics, this article lacks them. HTML tags are all over the place. Don't wanna sound like a jerk, but I think doing a good example is way more important and influential than just talking about it. Have a nice day 😊

Collapse
 
nikolab profile image
Nikola Betica

I guess that's one way of dealing with a problem.

Collapse
 
torib12 profile image
ToriB12

☆☆☆☆☆ Great article!

Collapse
 
inverseswirl profile image
Shriya Dhar Author

Thanks Tori

Some comments have been hidden by the post's author - find out more

🌙 Dark Mode?!

Turn it on in Settings