I use this HTML element to make the code easy to maintain

As a web developer, we all know how important it is to write clean, organized, and maintainable code. One of the best ways to achieve this is by using semantic HTML.

Did you just hear about semantics? So, semantic HTML is the practice of using HTML elements that have clear meanings or purposes. Semantics is a concept in web development that uses HTML tags to convey the meaning of content. These tags help search engines and screen readers understand the structure and content of web pages. Instead of just using <div> and <span> to organize content, we use elements like <article>, <section>, <nav>, <header>, <footer>, and <aside>.

Is this semantic HTML concept important? Yep, it’s super important for large-scale web development, and it definitely requires a lot of diverse code. Here are the benefits of using semantic concepts:

1. Accessibility. Screen readers and other assistive technologies rely on semantic HTML to understand the structure and content of web pages.
2. SEO. Search engines use semantic HTML to better index and understand the content of web pages.
3. Code Maintenance. Semantic code is easier to read and understand, which makes it easier for developers to maintain and update websites.
4. Collaboration. Semantic code makes collaboration among developers easier because of its clear and standardized structure.

What happens if you don’t use the concept of semantic html?

1. Bad Accessibility:
   • Screen readers and other assistive technologies will struggle to understand the structure and content of web pages.
   • Users with disabilities will have a hard time accessing information.
2. Suboptimal SEO:
   • Search engines will find it tough to index and understand the content of web pages correctly.
   • The ranking of web pages in search results may drop.
3. Difficult Code Maintenance:
   • Code will become harder to read and understand, making it tough for developers to maintain and update websites.
   • Collaboration among developers gets trickier due to unclear code structure.
4. Lack of Clear Structure:
   • HTML code will become messier and harder to comprehend.

Have you thought about it yet? Imagine you’re building a large-scale web but only using <div> for every component, you’d definitely be confused. I’m going to implement a piece of html code that uses the semantic concept and doesn’t use it:

Without semantics

<div id="header">
  <div id="nav">
    <div class="link">Home</div>
    <div class="link">About Us</div>
    <div class="link">Contact</div>
  </div>
</div>

<div id="content">
  <div class="article">
    <div class="title">Article Title</div>
    <div class="paragraph">Article content...</div>
  </div>
</div>

<div id="footer">
  <div class="copyright">&copy; 2025 My website</div>
</div>

With semantics

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
</main>

<footer>
  <p>&copy; 2025 My Website.</p>
</footer>

In the example above, semantic code uses more descriptive elements like <header>, <nav>, <article>, and <footer>, making the web page structure clearer and easier to understand. So, you can now compare it to building a website without semantics that only uses <div>, which is different from using semantics with varied HTML elements that are easy to read and develop.

Using semantic HTML, we can create websites that are easier to access, more SEO-friendly, and easier to maintain. This is best practice that every web developer should follow. So, my advice is to use semantics to make a maintainable web. It’s all about choice, so it depends on each developer’s preference.