Skip to main content

Розкажіть про основні семантичні теги, які використовуються в розробці

HTMLJunior~1 хв читання
Запропонувати правку

Семантичні теги - це елементи 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 зрозумілим, логічним і зручним: і для користувача, і для пошуковиків, і для подальшого розвитку сайту.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку