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