Що таке семантична верстка та навіщо вона потрібна

Привіт:) Більше десятка років тому зовнішній вигляд веб-сайтів верстали як було зручно — таблицями, DIV’ами, SPAN’ами і зовсім не задумувалися про доступність. Але потім з’явився HTML5, який приніс нові стандарти та вимоги до розмітки сторінок.

Семантична верстка — підхід до розмітки, який спирається не на зміст сайту, а на значення кожного блоку та логічну структуру документа. Уявіть собі книгу із заголовками різних рівнів — це допомагає читачеві побудувати структуру документа та швидше зрозуміти про що йтиметься мова.

Чому семантика важлива

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

Для незрячих або частково незрячих все складніше. Їх основний інструмент для перегляду сайтів не браузер, який малює сторінку, а скринридер, який читає текст зі сторінки вголос. Цей інструмент "зачитує" вміст сторінки, і семантична структура допомагає йому краще визначати тип блоку, а користувачеві зрозуміти, про що у ньому йдеться. Тому семантична розмітка допомагає більшій кількості користувачів взаємодіяти з вашим сайтом. Наприклад, наявність заголовків допомагає незрячим у навігації сторінкою. У скринридерів є функція навігації за заголовками, що прискорює знайомство з інформацією на сайті.

  1. Щоб сайт займав вищі позиції у пошуковій видачі. Пошукові системи не розголошують правила ранжування сайтів. Але відомо, що наявність семантичної розмітки сторінок допомагає пошуковим роботам краще розуміти, що знаходиться на сторінці, і в залежності від цього ранжувати сайти в пошуковій видачі.
  1. Семантика прописана у стандартах. Багато розробників все ще користуються старими конструкціями типу <div id="nav"> для навігації або інших структурних елементів сторінки. У стандарті HTML5 є декілька семантичних тегів, які рекомендується використовувати для розмітки сторінок замість <div> і <span>. У специфікації кожного семантичного елементу описано його роль. 

На скільки легше буде читати <nav></nav> замість <div class="nav"></div>. У наступному прикладі одразу зрозуміло, що і навіщо.

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="utf-8">
    <title>Заголовок сторінки</title>
  </head>
  <body>
    <header class="main-header">
      <!-- Шапка сайту -->
    </header>
    <main>
      <!-- Основний вміст сторінки -->
    </main>
    <aside>
      <!-- Вміст "бічної панелі" -->
    </aside>
    <footer class="main-footer">
      <!-- Підвал сайту -->
    </footer>
  </body>
</html>
до змісту ↑

Основні семантичні теги HTML

Серед "старих" тегів із ранніх версій HTML теж є семантичні. Наприклад, тег <p>, який позначає параграф. При цьому теги <i> чи <b> не семантичні, оскільки не додають сенсу виділеного тексту, а просто визначають його зовнішній вигляд. Але в актуальній версії стандарту HTML Living Standard є семантичні теги майже для всіх основних частин сайту і краще користуватися ними. Ось декілька прикладів.

до змісту ↑

<article>

  • Призначення: незалежна смислова одиниця. Наприклад коментар, твіт, стаття, віджет Facebook.
  • Особливості: бажано заголовок усередині.
  • Типові помилки: плутають із тегами <section> та <div>.

<section>

  • Призначення: смисловий розділ документа. Невідокремлюваний, на відміну від <article>.
  • Особливості: бажано заголовок усередині.
  • Типові помилки: плутають із тегами <article> та <div>.

<aside>

  • Значення: другорядний, непрямий для сторінки контент (додаткова інформація). Зазвичай використовується для "бічної панелі" або будь-якої іншої області віджетів (наприклад, у Футері).
  • Особливості: може мати власний заголовок і зустрічатися декілька разів на сторінці.
  • Типові помилки: розміщення <aside> всередині блоку <main>.
до змісту ↑
  • Призначення: навігаційний розділ із посиланнями на інші сторінки або інші частини поточної сторінки.
  • Особливості: використовується для основної навігації, а не всіх груп посилань. Основною є навігація чи ні – на розсуд верстальника. Наприклад, меню у підвалі сайту можна не обертати в <nav>. У підвалі зазвичай з'являється короткий список посилань (наприклад, посилання на головну, копірайт та умови) - це не є основною навігацією. Семантично для такої інформації призначений <footer>.
  • Типові помилки: багато хто вважає, що у <nav> може бути лише список навігаційних посилань. Але згідно зі специфікацією, там може бути навігація у будь-якій формі.
до змісту ↑
  • Призначення: вступна частина смислового розділу або всього сайту, зазвичай містить підказки та навігацію. Найчастіше повторюється на всіх сторінках сайту.
  • Особливості: цих елементів може бути декілька на одній сторінці.
  • Типові помилки: використовувати лише як шапку сайту.

<main>

  • Значення: основний зміст сторінки, що не повторюється на інших сторінках.
  • Особливості: має бути один на сторінці.
  • Типові помилки: включати у цей тег те, що повторюється на інших сторінках (навігацію, копірайти і так далі).
  • Призначення: заключна частина смислового розділу або всього сайту зазвичай містить інформацію про авторів, список літератури, копірайт і так далі. Найчастіше повторюється на всіх сторінках сайту. 
  • Особливості: може декілька разів зустрічатися на одній сторінці. Тег <footer> не повинен перебувати лише в кінці розділу.
  • Типові помилки: використовувати лише як підвал сайту.
до змісту ↑

<time>

  • Призначення: відображення дати/часу публікації або зміни посту, сторінки.

<mark>

  • Призначення: виділення тексту в довідкових цілях або на який варто звернути увагу користувачеві. Наприклад, цим тегом можна виділяти ключове слово в знайдених постах.

Як розмітити сторінку з точки зору семантики

Процес розмітки можна розділити на декілька кроків. 

  1. Великі смислові блоки на кожній сторінці сайту. Теги: <header>, <main>, <footer>.
  2. Великі смислові розділи у блоках. Теги: <nav>, <section>, <article>, <aside>.
  3. Заголовок всього документу та заголовки смислових розділів. Теги: <h1>-<h6>.
  4. Дрібні елементи у смислових розділах. Списки, таблиці, демо-матеріали, параграфи та переноси, форми, цитати, контактна інформація та прогрес.
  5. Фразові елементи. Зображення, посилання, кнопки, відео, час та дрібні текстові елементи.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *