Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Розкажіть про основні семантичні теги, які використовуються в розробці». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Семантичні теги** - це елементи HTML, які описують сенс вмісту, а не його зовнішній вигляд: вони допомагають браузерам, пошуковим системам і користувачам розуміти структуру та значення частин сторінки. **Ключове:** семантичні теги роблять HTML зрозумілим, логічним і зручним - і для користувача, і для пошуковиків, і для подальшого розвитку сайту.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняСемантичні теги - це елементи HTML, які **описують сенс вмісту**, а не його зовнішній вигляд. Вони допомагають браузерам, пошуковим системам і користувачам розуміти структуру та значення частин сторінки. --- ### 1. `<header>` - шапка сторінки або розділу Використовується для заголовків, логотипа, навігації, контактної інформації. Може знаходитися як на початку всієї сторінки, так і всередині статті. ```html <header> <h1>Мій блог</h1> <nav> <a href="#">Головна</a> <a href="#">Контакти</a> </nav> </header> ``` --- ### 2. `<nav>` - навігаційне меню Позначає розділ із посиланнями, за якими можна переміщатися сайтом. ```html <nav> <a href="#">Про нас</a> <a href="#">Послуги</a> <a href="#">Контакти</a> </nav> ``` --- ### 3. `<main>` - основний контент сторінки Містить те, заради чого користувач відкрив сторінку: статті, товари, пости тощо. На сторінці має бути **лише один** `<main>`. ```html <main> <article>...</article> </main> ``` --- ### 4. `<article>` - самостійний блок контенту Зазвичай використовується для новин, постів, коментарів: того, що може існувати окремо. ```html <article> <h2>Як почати вивчати HTML</h2> <p>HTML - основа будь-якого сайту...</p> </article> ``` --- ### 5. `<section>` - смисловий розділ сторінки Групує пов'язані за темою елементи всередині сторінки або статті. ```html <section> <h2>Відгуки клієнтів</h2> <p>"Чудова робота!"</p> </section> ``` --- ### 6. `<aside>` - додаткова інформація Використовується для бічних панелей, блоків із рекламою, посиланнями, нотатками. ```html <aside> <h3>Популярні статті</h3> <ul> <li><a href="#">Основи CSS</a></li> </ul> </aside> ``` --- ### 7. `<footer>` - підвал сторінки або розділу У ньому розміщують копірайт, контакти, посилання на соцмережі тощо. ```html <footer> <p>© 2025 Мій сайт</p> </footer> ``` --- ### 8. `<figure>` і `<figcaption>` - зображення і підпис Дозволяють додати осмислений підпис до ілюстрації. ```html <figure> <img src="photo.jpg" alt="Вид на гори"> <figcaption>Захід сонця над Альпами</figcaption> </figure> ``` --- ### 9. `<mark>`, `<time>`, `<address>` - контекстні теги - `<mark>` - виділяє важливий фрагмент тексту; - `<time>` - вказує дату або час; - `<address>` - контактні дані. ```html <p>Збори відбудуться <time datetime="2025-10-20">20 жовтня</time>.</p> ``` --- ### Підсумок: | Тег | Призначення | |---|---| | `<header>` | Шапка сторінки або розділу | | `<nav>` | Навігація | | `<main>` | Основний контент | | `<article>` | Самостійна стаття або блок | | `<section>` | Тематичний розділ | | `<aside>` | Додаткова інформація | | `<footer>` | Підвал | | `<figure>`, `<figcaption>` | Зображення і підпис | | `<mark>`, `<time>`, `<address>` | Контекстні смислові елементи | --- Семантичні теги роблять HTML **зрозумілим, логічним і зручним**: і для користувача, і для пошуковиків, і для подальшого розвитку сайту.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.