HTML semantics: why do we need all these strange tags?

When you first open HTML and see something like <header>, <article>, or <main>, you might think, "What is this set of spells? Isn't that magic?" 🧙‍♂️ At first glance, it's just a set of incomprehensible words in triangular brackets. But if you dig deeper, behind this set of tags is a powerful tool that makes websites smarter, faster, and more accessible. This tool is called Semantics.

And if you think HTML is boring and dull, then wait a bit. Now you will see that everything is not so scary. And even <div> can become the hero of the story if you use it wisely! 🦸‍♀️

🧠 What is semantics?

Semantics is a way to tell the browser, search robots, screen readers, and other digital creatures, what exactly you wanted to say with your HTML code.

Imagine that your site is a room 🛋. If you just put furniture without logic, it will stand, but it is inconvenient to use it. And if each item has its own place and function, life will immediately become more pleasant. The same is true in HTML: if you place the tags correctly, the site becomes clearer for both people and machines.

Semantic tags help:

• ✅ Improve the code structure and readability.

• ♿ Provide accessibility — for example, for people with visual impairments.

• 🔍 Improve SEO — that is, to make the site friendly for search engines.

• ⏱ Save time with support and scaling of the project.

• 😎 Get inner satisfaction from a beautiful and neat code

🎭 Roles, states, and properties: how HTML communicates with the world

Each HTML element is like an actor on stage🎬. It has role (e.g. "button"), Status (e.g., "pressed"), and properties (e.g., “text: Subscribe”).

Here is a simple example:

<button aria-pressed="true">Нажата</button>

Here we are clearly saying, "This is a button. It's pressed." And any assistive technology will understand that. Even if you use <div>, it will still play some role, just the browser will guess what exactly you meant.

📌 Hint: Use ARIA specification for a more accurate description of roles and states.

🏠 Section tags — divide the site into logical zones

An HTML page is like a cozy home. It has a roof, rooms, corridors and a basement:

Example: article card

<article>
  <header>
    <h2>Как победить Google в шахматы</h2>
    <p class="author">Анонимный гроссмейстер</p>
  </header>
  <p>Секрет прост: Google не умеет играть в шахматы. Пока. Пользуйтесь этим!</p>
  <footer>
    <time datetime="2025-04-01">1 апреля 2025</time>
  </footer>
</article>

🛋 Content tags — everything inside

Content tags are interior elements. Here is a table with the main ones:

Example:

<img src="cat-hat.png" alt="Cat in a hat and glasses">
<p><a href="# ">Go to the cat gallery</a> and find out which of them will become the president of the Internet.</p>

🧬 Attributes: superpowers for tags

HTML attributes add magic to tags. Here are some useful ones:

Example:

<p lang="ja" title="This is in Japanese">こんにちは世界</p>

📦 What about <div> and <span>? You can love them too

Many have heard: " and are evil." But that's not true. They are just... ordinary. They don't make sense. It's like a box without labels. Useful, but incomprehensible.

💎 Why semantics is good (very good)

✅ Convenience for developers

Readable code = happy developer. You (and your team) will find the right items faster.

♿ Accessibility

Screen readers, voice assistants, and other technologies will easily understand your site and help the user interact with it.

🧠 Browser and extension support

Reading mode, plugins for changing the interface, bionic reading — all this works better when HTML is semantically clean.

📈 SEO and promotion

Search engines love semantics:

• Structured pages are indexed better.

• Headings fall into snippets.

• More chances to be in the first place.

🧩 How to layout a page correctly

A simple recipe for the perfect structure:

1. 📦 Main blocks: <header>, <main>, <footer>, <nav>, <aside>.

2. 📑 Nested sections: <section>, <article> — for logic and structure.

3. 🔠 Headings: One <h1>, then <h2> and below in the hierarchy.

4. 📝 Content: <p>, <a>, <button>, <img>, <ul> and others.

❌ Bad example:

<div class="main">
  <div class="title">Контакты</div>
  <div class="info">...</div>
</div>

✅ Good example:

<main>
  <h1>Контакты</h1>
  <section>...</section>
</main>

🎉 Conclusion: code like a pro

Semantics in HTML is like a good interface: it is not always noticeable, but it is felt in every detail. If you have marked up the page correctly, it loads faster 🚀, reads better 👀, is clearer for search engines 🔎 and is accessible to everyone 💬.

Use <article>, <section>, <nav>, <header>, <footer>, and let <div> rest. Your code will become a standard of clarity, convenience, and respect for the user ✨