Decode With Darshan

The Importance of Using Semantic Tags in HTML

Darshan's photo
Darshan
·

2 min read

Table of contents

Introduction to Semantics

Semantics in HTML means using HTML tags that have meaningful names to describe the purpose of the content they contain. Instead of generic tags like <span> and <div>, semantic tags like <header>, <nav>, and <article> tell browsers and search engines what each part of the page is for.

This approach helps make web pages more accessible for users with disabilities and improves SEO by providing clear structure.

  • Non-semantic Example:
<div class="header">Website Header</div>
<div class="nav">Navigation Links</div>
<div class="content">Main Content</div>
<div class="footer">Website Footer</div>
  • Semantic Example:
<header>Website Header</header>
<nav>Navigation Links</nav>
<main>Main Content</main>
<footer>Website Footer</footer>

Using the <footer> tag is more descriptive than using <div class="footer">. This clarity helps screen readers navigate the page and search engines understand its content better.

The advantages of using semantic tags in HTML:

  • Accessibility: Screen readers can better interpret the structure, aiding users with visual impairments.

  • SEO: Search engines can index the page more effectively, potentially improving rankings.

  • Maintainability: Developers find it easier to read and update code with clear, meaningful tags.

List of Semantic HTML Elements

There are many other semantic elements, but you will find the common ones here.

TagDescription
<article>Defines independent, self-contained content
<aside>Defines content aside from the page content
<details>Defines additional details that the user can view or hide
<figcaption>Defines a caption for a <figure> element
<figure>Specifies self-contained content, like illustrations, photos
<footer>Defines a footer for a document or section
<header>Specifies a header for a document or section
<main>Specifies the main content of a document
<mark>Defines marked/highlighted text
<nav>Defines navigation links
<section>Defines a section in a document
<summary>Defines a visible heading for a <details> element
<time>Defines a date/time

Conclusion

This article introduces the concept of semantic HTML, which involves using meaningful tags like <article>, <section>, and <header> to define the purpose of content on a webpage. This practice enhances accessibility for users with disabilities and improves SEO by providing a clear structure. Examples of semantic tags, their benefits, and a list of common semantic HTML elements are provided to illustrate how they make web pages more readable and maintainable.

ChaiCodeHTML5Web Development