Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що означає термін «семантика» в контексті HTML?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Семантика в HTML** - це смислове значення тегів: спосіб передати браузеру, пошуковику і людині, що саме позначає конкретний фрагмент контенту, а не просто як він виглядає. **Ключове:** семантика робить сайт зрозумілим не тільки оку, а й "мозку" - і браузера, і людини.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Семантика в HTML** - це **смислове значення тегів**. Тобто, це спосіб *передати браузеру, пошуковику і людині*, **що саме позначає конкретний фрагмент контенту**, а не просто як він виглядає. --- ### Простими словами: HTML можна використовувати просто для "малювання" структури, але **семантичний HTML** описує *сенс*, а не оформлення. Приклад: ```html <b>Важливо!</b> <strong>Важливо!</strong> ``` Обидва виділять текст **жирним**, але: - `<b>` - просто візуальне виділення (**без сенсу**), - `<strong>` - семантично означає "важливий текст" (**зі сенсом**). Браузери, пошуковики і програми для читання з екрана (наприклад, для людей з порушенням зору) **розуміють різницю**. --- ### Навіщо потрібна семантика: 1. **Підвищує доступність** - екранні диктори можуть правильно озвучувати структуру. 2. **Покращує SEO** - пошуковики краще розуміють, де заголовок, стаття, навігація тощо. 3. **Полегшує підтримку коду** - людині простіше орієнтуватися в логічній структурі. 4. **Спрощує стилізацію** - CSS можна застосовувати за смисловими тегами. --- ### Приклади семантичних тегів | Семантичний тег | Значення | |---|---| | `<header>` | Шапка сторінки або розділу | | `<nav>` | Навігаційне меню | | `<main>` | Основний вміст сторінки | | `<article>` | Самостійна стаття або запис | | `<section>` | Розділ сторінки | | `<aside>` | Бічна панель, додатковий контент | | `<footer>` | Підвал сторінки | | `<figure>` і `<figcaption>` | Зображення і його підпис | | `<strong>`, `<em>` | Важливе й акцентоване виділення | Приклад: ```html <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 - це коли код говорить не тільки *"як виглядає"*, а й *"що це означає"*. Це робить сайт **зрозумілим не тільки оку, а й мозку: і браузера, і людини.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.