Детальний огляд семантики HTML теґів. Різниця між <section> та <article>

Зміст

Що таке семантика вебсторінки та чому це найважливіша її компонента

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

Іншими словами, семантика описує суть вашого контенту. Семантика визначає, що саме є вашим контентом. Це основа, фундамент, база, ґрунт будь-якої вебсторінки. Ви можете скільки завгодно стилізувати сторінку CSS-ом, додавати неймовірної поведінки JavaScript-ом, але це все одно що малювати графіті на воді, якщо в основі ваш HTML беззмістовний або погано структурований.

Вам не треба перейматись ні про SEO, ні про вебдоступність, якщо у вас добре структурований, семантичний вебдокумент.

Специфікація HTML Living Standard визначає багато теґів для опису різноманітного вмісту. Однак в цій статті я зачеплю лише декілька. В майбутньому, сподіваюсь, ретельно досліджуватиму та інші, тож підписуйтесь якщо ця тема вас цікавить.

Що таке роль (role) елементу та чим це відрізняється від теґу

У контексті вебу, роль (role) HTML-елементу визначає, як саме цей елемент повинен інтерпретуватися. Роль надає інформацію про функцію елемента на сторінці, що допомагає користувачам (будь-то браузер, бот, читалка екрана тощо) зрозуміти, як елемент вписується в загальну структуру документа.

Саме role визначає сутність вашого контенту, його семантику. Задається вона для елемента однойменним атрибутом. Однак, багато HTML теґів мають перевстановлені ролі за замовчуванням.

Наступні два записи ідентичні з точки зору семантики:

<div role="banner"> ... </div>

<!-- header має роль banner за замовчуванням -->
<header> ... </header>

Кращі практики радять завжди, коли можливо, уникати встановлення ролей явно та віддавати натомість перевагу відповідним HTML теґам.

Роль region

Елемент з роллю region один з базових примітивів семантичної верстки. Специфікація WAI-ARIA v1.2 дає наступне визначення:

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

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

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

Зчитувачі екрана та деякі браузери можуть мати вбудовану функцію зачитування наявних на сторінці регіонів та швидкої навігації до конкретного розділу.

Регіон ОБОВʼЯЗКОВО мусить мати заголовок

Саме так. Це вимога W3C. І ніяк інакше.

<div role="region" aria-label="Важливий розділ">
  <p>Вміст розділу</p>
</div>

<div role="region" aria-labelledby="heading">
  <h2 id="heading">Важливий розділ</h2>
  <p>Вміст розділу</p>
</div>

Регіон без заголовка вважається помилкою синтаксису. В такому випадку, скоріше за все його семантика буде проігнорована повністю зробивши його вміст недоступним.

Теґ <section>

HTML Living Standard на момент написання статті дає наступне визначення цьому теґу:

Представляє загальний розділ документа або програми. У цьому контексті розділ - це тематичне групування вмісту.

Крім цього, HTML Living Standard каже, що теґ <section> визначає область дії елементів <header> та <footer>.

Інакше кажучи, теґ <section> вказує, що весь його вміст є логічно та тематично пов’язаним між собою. І меншою мірою пов’язаний з контентом поза межами секції.

Під капотом теґ <section> має ту саму роль region. Але, оскільки регіон вимагає наявність заголовка, то в <section> передбачено fallback: якщо секція не має заголовка, то вона матиме роль generic (фактично означає відсутність будь-якого семантичного сенсу).

Таким чином семантична розмітка кількох розділів однієї статті може виглядати наступним чином:

<section aria-labelledby="header-1">
    <header>
        <h1 id="header-1">Головний заголовок секції 1</h1>
    </header>

    <h2>Підрозділ 1.1</h2>
    <p>Це вміст підрозділу 1.1 секції 1.</p>
    
    <footer>
        <p>Примітки до секції 1</p>
    </footer>
</section>

<section aria-labelledby="header-2">
    <header>
        <h1 id="header-2">Головний заголовок секції 2</h1>
    </header>

    <h2>Підрозділ 2.1</h2>
    <p>Це вміст підрозділу 2.1 секції 2.</p>

    <footer>
        <p>Примітки до секції 2</p>
    </footer>
</section>

Більш конкретні ролі

Хоч region може здатись універсальним, він є занадто загальним. Для семантики чим конкретніший контекст ви створите для частини документа, тим краще.

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

Наприклад роль navigation (неявно встановлюється теґом <nav>) вказує, що вміст елементу описує певного роду рівномірну навігацію.

А роль main (неявно встановлюється теґом <main>) позначає вміст, який безпосередньо пов'язаний з центральною темою документа або розширює її. Основна роль - ненав'язлива альтернатива для посилань “перейти до основного змісту”, де навігація переходу до основного змісту надається користувацьким агентом через діалог або за допомогою допоміжних технологій.

Приклад опису двох навігаційних меню на одній сторінці:

<!-- Навігаційне меню між статтями -->
<nav aria-labelledby="nav-articles">
  <h2 id="nav-articles">Навігація між статтями</h2>
  <ul>
    <li><a href="">Стаття 1</a></li>
    <li><a href="">Стаття 2</a></li>
    <li><a href="">Стаття 3</a></li>
  </ul>
</nav>

<!-- Основний контент з однією статтею -->
<main>
  <article aria-labelledby="article-heading">
    <header>
      <h1 id="article-heading">Головний заголовок статті</h1>

      <!-- Навігація між розділами статті -->
      <nav aria-labelledby="nav-sections">
        <h2 id="nav-sections">Навігація всередині статті</h2>
        <ul>
          <li><a href="#section1">Розділ 1</a></li>
          <li><a href="#section2">Розділ 2</a></li>
          <li><a href="#section3">Розділ 3</a></li>
        </ul>
      </nav>
    </header>

    <!-- Секції статті -->
    <section id="section1" aria-labelledby="section1-heading">
      <header>
        <h2 id="section1-heading">Розділ 1</h2>
      </header>
      <p>Вміст розділу 1.</p>
    </section>

    <section id="section2" aria-labelledby="section2-heading">
        <header>
            <h2 id="section2-heading">Розділ 2</h2>
        </header>
        <p>Вміст розділу 2.</p>
    </section>

    <section id="section3" aria-labelledby="section3-heading">
        <header>
            <h2 id="section3-heading">Розділ 3</h2>
        </header>
        <p>Вміст розділу 3.</p>
    </section>


    <footer>
      <section aria-labelledby="footer1-heading">
          <h2 id="footer1-heading">Використані джерела</h2>
          <ul>
              <li>Джерело 1</li>
              <li>Джерело 2</li>
              <li>Джерело 3</li>
          </ul>
      </section>
      <section aria-labelledby="footer2-heading">
          <h2 id="footer2-heading">Примітки</h2>
          <ul>
              <li>Примітка 1</li>
              <li>Примітка 2</li>
              <li>Примітка 3</li>
          </ul>
      </section>
    </footer>
  </article>
</main>

Роль article

Специфікація WAI-ARIA v1.2 дає наступне визначення цій ролі:

Частина сторінки, яка є самостійною частиною документа.

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

Подібно до ролі region роль article групує весь свій вміст, однак є і деякі суттєві відмінності.

  • article не вимагає заголовку.

  • На відміну від region роль article не пропонує користувачеві швидку навігацію до себе.

  • Article може бути вкладеною на багато рівнів. Кожен вкладений елемент з цією роллю успадковує контекст батьківського. Наприклад в багаторівневому дереві коментарів, кожен дочірній коментар має зв’язок з усіма батьківськими, але не з сестринськими.

  • Через те, що природа article дозволяє багаторівневу вкладеність, допоміжні технології можуть пропонувати користувачам спеціальний режим навігації по ієрархії. Наприклад, перейти до батьківського коментаря, до дочірнього чи до наступної гілки.

Приклад розмітки дерева коментарів

<section aria-labelledby="heading">
  <h2 id="heading">Коментарі</h2>
  
  <!-- Перший коментар -->
  <article>
    <p>Це основний коментар.</p>

    <section aria-label="Відповіді">
      <article>
        <p>Це Відповідь до Основного Коментаря</p>

        <section aria-label="Відповіді">
          <article>
            <p>Це Відповідь до Відповіді до Основного Коментаря</p>
          </article>
        </section>
      </article>
    </section>
  </article>

  <!-- Інший коментар -->
  <article>
    <p>Це ще один основний коментар.</p>

    <section aria-label="Відповіді">
      <article>
        <p>Це відповідь до другого основного коментаря</p>
      </article>
    </section>
  </article>
</section>

Замість висновку

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

Список джерел
  1. HTML Living Standard
  2. Accessible Rich Internet Applications (WAI-ARIA) 1.2
Поділись своїми ідеями в новій публікації.
Ми чекаємо саме на твій довгочит!
Олександр Козак
Олександр Козак@kozack

6.7KПрочитань
1Автори
68Читачі
Підтримати
На Друкарні з 14 квітня

Більше від автора

  • Про доступність та UI на прикладі мого особистого сайту

    Знайомтесь це мій особистий сайт. Перший знімок те яким він був ДО другий - ПІСЛЯ сьогоднішнього патчу. І в цій короткій статті я хочу зробити маленьке ревью та розказати на прикладах ЧОМУ я реалізував деякі дивні речі.

    Теми цього довгочиту:

    Доступність
  • Як зробити нескінченну прокрутку на сайті. Або 10 недоліків та одна перевага Infinity Scroll

    В цій статті я хочу описати 10 поширених проблем, пов’язаних з нескінченною прокруткою, які розробнику доведеться вирішувати при реалізації Infinity Scroll. Та про єдину причину, чому попри всі недоліки нескінченну прокрутку активно використовують.

    Теми цього довгочиту:

    Ui-ux
  • Чому ви повинні забути про rgb() та hex кольори при роботі з вебсайтами

    Формат задання кольорів функцією rgb() було представлено ще у 1996 році. Очевидно, що CSS далеко розвинувся з тих часів. Попри це, чомусь, багато веброзробників та вебдизайнерів вперто продовжують використовувати цей застарілий, обмежений та нелюдський формат кольору по цей день.

    Теми цього довгочиту:

    Css

Вам також сподобається

Коментарі (3)

Одного разу дуже здивувався, коли читач, який читає сторінки в голос, міняв інтонацію, бо в HTML було прописано, цитування, курсив, тощо. І тоді я зрозумів, як важливо не лінитися все правильно прописувати.

Вам також сподобається