Що таке семантична верстка та навіщо вона потрібна
Привіт:) Більше десятка років тому зовнішній вигляд веб-сайтів верстали як було зручно — таблицями, DIV’ами, SPAN’ами і зовсім не задумувалися про доступність. Але потім з’явився HTML5, який приніс нові стандарти та вимоги до розмітки сторінок.
Семантична верстка — підхід до розмітки, який спирається не на зміст сайту, а на значення кожного блоку та логічну структуру документа. Уявіть собі книгу із заголовками різних рівнів — це допомагає читачеві побудувати структуру документа та швидше зрозуміти про що йтиметься мова.
Чому семантика важлива
- Щоб зробити веб-сайт доступним. Зрячі користувачі можуть без проблем з першого погляду зрозуміти, де яка частина сторінки знаходиться: де заголовок, список, таблиця або зображення.
Для незрячих або частково незрячих все складніше. Їх основний інструмент для перегляду сайтів не браузер, який малює сторінку, а скринридер, який читає текст зі сторінки вголос. Цей інструмент "зачитує" вміст сторінки, і семантична структура допомагає йому краще визначати тип блоку, а користувачеві зрозуміти, про що у ньому йдеться. Тому семантична розмітка допомагає більшій кількості користувачів взаємодіяти з вашим сайтом. Наприклад, наявність заголовків допомагає незрячим у навігації сторінкою. У скринридерів є функція навігації за заголовками, що прискорює знайомство з інформацією на сайті.
- Щоб сайт займав вищі позиції у пошуковій видачі. Пошукові системи не розголошують правила ранжування сайтів. Але відомо, що наявність семантичної розмітки сторінок допомагає пошуковим роботам краще розуміти, що знаходиться на сторінці, і в залежності від цього ранжувати сайти в пошуковій видачі.
- Семантика прописана у стандартах. Багато розробників все ще користуються старими конструкціями типу
<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>
- Призначення: навігаційний розділ із посиланнями на інші сторінки або інші частини поточної сторінки.
- Особливості: використовується для основної навігації, а не всіх груп посилань. Основною є навігація чи ні – на розсуд верстальника. Наприклад, меню у підвалі сайту можна не обертати в
<nav>. У підвалі зазвичай з'являється короткий список посилань (наприклад, посилання на головну, копірайт та умови) - це не є основною навігацією. Семантично для такої інформації призначений<footer>. - Типові помилки: багато хто вважає, що у
<nav>може бути лише список навігаційних посилань. Але згідно зі специфікацією, там може бути навігація у будь-якій формі.
<header>
- Призначення: вступна частина смислового розділу або всього сайту, зазвичай містить підказки та навігацію. Найчастіше повторюється на всіх сторінках сайту.
- Особливості: цих елементів може бути декілька на одній сторінці.
- Типові помилки: використовувати лише як шапку сайту.
<main>
- Значення: основний зміст сторінки, що не повторюється на інших сторінках.
- Особливості: має бути один на сторінці.
- Типові помилки: включати у цей тег те, що повторюється на інших сторінках (навігацію, копірайти і так далі).
<footer>
- Призначення: заключна частина смислового розділу або всього сайту зазвичай містить інформацію про авторів, список літератури, копірайт і так далі. Найчастіше повторюється на всіх сторінках сайту.
- Особливості: може декілька разів зустрічатися на одній сторінці. Тег
<footer>не повинен перебувати лише в кінці розділу. - Типові помилки: використовувати лише як підвал сайту.
<time>
- Призначення: відображення дати/часу публікації або зміни посту, сторінки.
<mark>
- Призначення: виділення тексту в довідкових цілях або на який варто звернути увагу користувачеві. Наприклад, цим тегом можна виділяти ключове слово в знайдених постах.
Як розмітити сторінку з точки зору семантики
Процес розмітки можна розділити на декілька кроків.
- Великі смислові блоки на кожній сторінці сайту. Теги:
<header>,<main>,<footer>. - Великі смислові розділи у блоках. Теги:
<nav>,<section>,<article>,<aside>. - Заголовок всього документу та заголовки смислових розділів. Теги:
<h1>-<h6>. - Дрібні елементи у смислових розділах. Списки, таблиці, демо-матеріали, параграфи та переноси, форми, цитати, контактна інформація та прогрес.
- Фразові елементи. Зображення, посилання, кнопки, відео, час та дрібні текстові елементи.
