Що означає термін «семантика» в контексті HTML?
Семантика в HTML - це смислове значення тегів. Тобто, це спосіб передати браузеру, пошуковику і людині, що саме позначає конкретний фрагмент контенту, а не просто як він виглядає.
Простими словами:
HTML можна використовувати просто для "малювання" структури, але семантичний HTML описує сенс, а не оформлення.
Приклад:
<b>Важливо!</b>
<strong>Важливо!</strong>Обидва виділять текст жирним, але:
<b>- просто візуальне виділення (без сенсу),<strong>- семантично означає "важливий текст" (зі сенсом).
Браузери, пошуковики і програми для читання з екрана (наприклад, для людей з порушенням зору) розуміють різницю.
Навіщо потрібна семантика:
- Підвищує доступність - екранні диктори можуть правильно озвучувати структуру.
- Покращує SEO - пошуковики краще розуміють, де заголовок, стаття, навігація тощо.
- Полегшує підтримку коду - людині простіше орієнтуватися в логічній структурі.
- Спрощує стилізацію - CSS можна застосовувати за смисловими тегами.
Приклади семантичних тегів
| Семантичний тег | Значення |
|---|---|
<header> | Шапка сторінки або розділу |
<nav> | Навігаційне меню |
<main> | Основний вміст сторінки |
<article> | Самостійна стаття або запис |
<section> | Розділ сторінки |
<aside> | Бічна панель, додатковий контент |
<footer> | Підвал сторінки |
<figure> і <figcaption> | Зображення і його підпис |
<strong>, <em> | Важливе й акцентоване виділення |
Приклад:
<header>
<h1>Новини</h1>
<nav>
<a href="#">Головна</a>
<a href="#">Контакти</a>
</nav>
</header>
<main>
<article>
<h2>HTML став ще простіше</h2>
<p>Тепер семантичні теги - стандарт.</p>
</article>
</main>
<footer>
<p>© 2025 Мій сайт</p>
</footer>Несемантичні теги (для порівняння)
<div>- просто контейнер без сенсу.<span>- рядковий контейнер без сенсу.
Їх можна використовувати, але лише коли немає відповідного семантичного тега.
Підсумок:
| Термін | Значення |
|---|---|
| Семантика | Смислове використання тегів для опису структури і значення контенту |
| Навіщо потрібна | Щоб браузери, пошуковики і користувачі розуміли сенс сторінки |
| Приклад | <header> - шапка, <article> - стаття, <footer> - підвал |
Простими словами: Семантика в HTML - це коли код говорить не тільки "як виглядає", а й "що це означає". Це робить сайт зрозумілим не тільки оку, а й мозку: і браузера, і людини.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.