Skip to main content

Що таке семантична верстка?

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

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

Висновок: Семантична верстка - це про смислову структуру, не просто зовнішній вигляд. Вона робить код читабельним не лише для браузерів, а й для людей, роботів і асистивних технологій.

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

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

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

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