Смысловая разметка и заголовки

Смысловая разметка — элементы header, nav, main, article, section и footer, которые называют части страницы, и заголовки h1–h6, идущие по порядку уровней.

Разметка со смыслом

В прошлом уроке вы собрали страницу из таблицы. Для глаз она выглядела как сайт, а для программы это были ячейки: ни заголовка, ни меню, ни главной части. А кроме глаз у страницы есть ещё читатели.

• Программа чтения с экрана. Незрячий человек слушает страницу. Хорошая программа умеет перечислить области (шапка, меню, основное, подвал) и заголовки, и человек прыгает между ними, а не слушает всё подряд. По опросам WebAIM пользователи таких программ чаще всего начинают поиск нужного именно с заголовков.
• Поисковик. Ему важно знать, что на странице главное, а что повторяется на каждой.
• Режим чтения и переводчик в браузере вытаскивают из страницы основной текст, если она размечена по смыслу.
• Вы сами. Открыв файл через год, вы быстрее поймёте <nav>, чем <div class="m2">.

Смысл записывают элементами. Они ничего не красят и не двигают: красить будет CSS. Они только называют, чем является кусок страницы.

Основные элементы

• <header> это шапка страницы или раздела: название, логотип, меню.
• <nav> это навигация: основное меню или другой блок ссылок по сайту. Его принято делать списком: меню это перечень пунктов.
• <main> это основное содержимое страницы. Он один: это то, ради чего пришли.
• <section>: раздел со своим заголовком.
• <article> это самостоятельный фрагмент, который понятен и вне страницы: карточка услуги, пост, отзыв.
• <aside> это дополнение к основному: контакты, врезка, связанные ссылки.
• <footer> это подвал: адрес, права, второстепенные ссылки.

А где смысла нет, остаётся <div>: «коробка без значения». Он нужен, например, чтобы сгруппировать куски для раскладки. Плохо не то, что div существует, а когда им заменяют элементы со смыслом.

Элементам можно дать имя через атрибут class: <article class="card">. В HTML он ничего не значит, зато по нему CSS потом найдёт нужные элементы. Мы пользуемся им в этом курсе, чтобы страница была готова к стилям.

Проверьте себя: сколько main на странице и почему?

Один: это основное содержимое, ради которого пришли. Второй main запутал бы программу, которая ищет, где «главное».

Что видит программа

Эта схема показывает страницу так, как её разбирает программа: список областей и оглавление из заголовков. Попробуйте оба примера и поправьте разметку: удалите main, смените h2 на h4, добавьте второй h1. Схема подскажет, что стало хуже.

Смысловая разметка Всё из div

Разметка (можно править) <header> <p>Название проекта</p> <nav aria-label="Разделы"><ul><li><a href="#a">Обо мне</a></li></ul></nav> </header> <main> <h1>Название проекта</h1> <section> <h2>Услуги</h2> <article><h3>Первая услуга</h3><p>Описание.</p></article> <article><h3>Вторая услуга</h3><p>Описание.</p></article> </section> <section> <h2>Контакты</h2> </section> </main> <aside><h2>Связаться</h2></aside> <footer><p>Адрес и права</p></footer>

Ориентиры

Ни одного ориентира. Диктор может только читать всё подряд сверху вниз.

Заголовки

Ни одного заголовка. По странице нельзя перемещаться по разделам.

Проверьте себя: что увидит программа в странице целиком из div?

Ничего: ни областей, ни заголовков. Только плоский текст, который приходится читать подряд.

Оглавление из заголовков

Заголовки от h1 до h6 работают как оглавление. У них есть простые правила:

1. Один h1 на странице: он говорит, о чём она.
2. Разделы получают h2. Внутри раздела подразделы получают h3, и так вглубь.
3. Уровни идут по порядку. После h2 не прыгают на h4: у оглавления была бы дыра.
4. Уровень выбирают по месту в структуре, а не по размеру букв. Если h3 слишком мелкий, это забота CSS, а не повод поставить h2.

Был соблазн упростить: говорили, что в HTML5 можно ставить h1 в каждом section, и браузер сам вычислит уровень. Задумывался так называемый «алгоритм структуры документа», но ни один браузер и ни одна программа чтения с экрана его не поддержали, и в 2022 году его описание убрали из спецификации. Поэтому уровни расставляют вручную.

А что насчёт <b> и <i>? Для смысла есть <strong> (важно) и <em> (интонационный акцент). Теги b и i остались, но означают просто «выделено, как будто полужирным» и «курсивом» без важности. Выбирайте по смыслу.

Проверьте себя: можно ли поставить h4 сразу после h2?

Нет: пропущен уровень, и оглавление получает дыру. После h2 идёт h3.

Что делали в 2005-м, а что делаем сейчас

В 2005 году смысловых элементов ещё не было: их придумали в HTML5, который стал рекомендацией только в 2014-м. Движение за веб-стандарты, которое началось раньше (Джеффри Зелдман, книга «Designing with Web Standards», 2003), требовало отделять смысл от вида. Структуру тогда писали из div с понятными именами: <div id="header">, <div id="nav">, <div id="content">. Это была попытка выразить смысл тем, что было под рукой.

Мы пишем страницу эпохи 2005 года современными элементами. Идея та же, что тогда, только язык богаче. Это честный приём: в курсе мы повторяем эпохи по подходу, но не заставляем вас писать хуже, чем можно.

Практика

Перед вами страница в духе 2005 года: сетка из таблицы и подписи через font. Перепишите её по смыслу. Все ваши данные уже в странице: название, разделы, услуги и контакты. Вам надо переложить их в смысловые элементы и дописать пару предложений о каждом разделе вместо многоточий.

Эта версия пойдёт в эпоху 2005 года вашей машины времени, и дальше в этой эпохе вы будете её наращивать: ссылки, картинки, таблицу, а в части про CSS и оформление.

Что было не так с 2005 годом

Страницы уже разделяли на структуру и вид, но структуру писали из безымянных div, и программы по-прежнему не знали, где шапка, а где главное. Не хватало и нескольких крупных вещей: сайты почти не умели подстраиваться под экран, а доступность оставалась делом добровольным. Всё это придёт в следующих эпохах.