Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке семантична верстка?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Семантична верстка** - це використання **HTML-тегів за їхнім змістом**, а не просто заради візуального вигляду. **Ключове:** вона робить код читабельним не лише для браузерів, а й для людей, роботів і асистивних технологій.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Семантична верстка** - це використання **HTML-тегів за їхнім змістом**, а не просто заради візуального вигляду. --- ### Приклад: Замість: ```html <div id="header">...</div> <div id="menu">...</div> ``` Пишуть: ```html <header>...</header> <nav>...</nav> ``` --- ### Основні семантичні теги: - `<header>` - шапка сторінки або розділу - `<nav>` - навігаційне меню - `<main>` - основний вміст - `<section>` - логічний розділ - `<article>` - самостійний матеріал (пост, новина) - `<aside>` - бічна інформація - `<footer>` - підвал --- ### Навіщо це потрібно: 1. **Зрозуміліше для пошукових систем** Покращує SEO - робот бачить, що і де знаходиться. 2. **Доступність (a11y)** Скрінрідери розуміють структуру - незрячому користувачу легше орієнтуватися. 3. **Підтримуваність коду** Розробнику швидше зрозуміти, що це за блок і навіщо він потрібен. 4. **Стійкість у майбутньому** Семантична розмітка довше залишається актуальною в стандартах. --- **Висновок:** Семантична верстка - це про **смислову структуру**, не просто зовнішній вигляд. Вона робить код читабельним не лише для браузерів, а й для людей, роботів і асистивних технологій.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.