Головна » Розробка » Семантика врятує інтернет | MarkupUA

Семантика врятує інтернет

Років п’ятнадцять тому майже всі робили сайти і не переживали про те, що під капотом. Верстали таблицями, використовували все, що попадеться під руку і не особливо морочилися про доступність. А потім стався HTML5 і понеслося.

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

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

Щоб зробити сайт доступним. Зрячі користувачі можуть без проблем з першого погляду зрозуміти, де яка частина сторінки знаходиться – де заголовок, списки або зображення. Для незрячих або частково незрячих все складніше. Основний інструмент для перегляду сайтів не браузер, який відмальовуе сторінку, а скрінрідер, який читає текст зі сторінки вголос.

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

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

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

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

<!DOCTYPE html>
<html lang="ua">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <header class="main-header">
      <!— Header —>
    </header>
    <main>
      <!— Content —>
    </main>
    <footer class="main-footer">
      <!— Footer —>
    </footer>
  </body>
</html>

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

Серед «старих» тегів з молотших версій HTML теж є семантичні – наприклад, тег <p>, який позначає параграф. При цьому теги <i> або <b> НЕ семантичні, тому що вони не додають сенсу виділеного тексту, а просто визначають його зовнішній вигляд.

Але в актуальній версії стандарту HTML Living Standard є семантичні теги майже для всіх основних частин сайту, і краще користуватися ними. Ось кілька прикладів семантичних тегів.

<Article>

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

<Section>

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

<Aside>

  • Значення: побічний, непрямий для сторінки контент.
  • Особливості: може мати свій заголовок. Може зустрічатися кілька разів на сторінці.
  • Типові помилки: вважати <aside>тегом для «бічній панелі» і розмічати цим тегом основний контент, який пов’язаний з оточуючими його елементами.

<Nav>

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

<Header>

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

<Main>

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

<Footer>

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

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

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

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

Сумніваюся, які теги використовувати

Є прості правила для вибору потрібних тегів.

  • Знайти найбільш підходящий смисловий тег – використовувати його.
  • Для потокових контейнерів – <div>.
  • Для дрібних фразових елементів (слово або фраза) – <span>.

Правило для визначення <article>, <section> і <div>:

  1. Можете дати ім’я розділу і винести це розділ на інший сайт? – <article>
  2. Можете дати ім’я розділу, але винести на інший сайт не можете? – <section>
  3. Чи не можете дати ім’я? Виходить щось на зразок «новини та фотогалерея» або «права колонка»? – <div>

Як точно не потрібно робити

Не використовуйте семантичні теги для прикрас. Для цього є CSS.

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

  1. Тег <blockquote> повинен використовуватися для виділення в тексті цитат, а не просто випадкового виділення тексту. Так співпало, що в браузерах цей блок за замовчуванням виділено, але це не означає, що потрібно його використовувати таким чином.
  2. Тег <ul> повинен бути використаний тільки для позначення списків, в тег <ul> можна вкладати тільки теги <li> і нічого більше.
  3. Тег <p> використаний, щоб візуально розсунути текст. Насправді цей тег використовується для виділення параграфів.

А будь-яке виділення, зрушення чи інші перетворення тексту можна виконати за допомогою CSS.

Тому використовуйте семантичні теги за призначенням.

Переклад статті Забудьте про div, семантика спасёт интернет