Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h2>Содержание</h2>

2 <ul><li><a>Пример</a></li>

3 <li><a>Выводы</a></li>

4 <li><a>Полезные ссылки</a></li>

5 </ul><h2>Пример</h2>

6 <p>При разметке макета страницы разработчики используют теги заголовков для выделения участка макета. Чаще всего тип заголовка выбирается исходя из размеров шрифта, что приводит к неправильной семантической разметке. Для примера возьмём типичную структуру разметки лендинга.</p>

7 <p>Такой тип разметок встречается часто. Вместо указания дополнительных классов разработчики подставляют заголовки, которые лучше подходят под дизайн макета. Но в чём же тут проблема?</p>

8 <p>Заголовки и их уровень можно представить в виде оглавления книги. Есть название книги, его можно описать как заголовок первого уровня. Есть глава, которая описывается заголовком второго уровня. Есть части главы, которые описываются заголовком третьего уровня. И этот список можно продолжать. Суть: текст делится на последовательные заголовки, внутри которых находится информация.</p>

9 <p>По этому примеру можно построить иерархию заголовков лендинга о булочках:</p>

10 <p>Теперь в таком виде "компьютер" видит структуру лендинга. Человеческий глаз, в отличие от компьютера, способен понять разницу в заголовках и выстроить правильную схему того, где начинается секция, а где заканчивается. Это происходит благодаря анализу информации на странице. Компьютер, в частности, поисковые роботы, ориентируются по структуре заголовков.</p>

11 <p>Обратите внимание, что заголовков <h4> и <h5> не существует, но они предполагаются по смыслу, так как есть заголовок <h6>. Это нарушает семантику и приводит к проблемам как со стороны поисковых систем, так и со стороны устройств, читающих текст со страницы для слабовидящих людей.</p>

12 <p>Исправим вёрстку лендинга, чтобы добиться правильной структуры информации.</p>

13 <p>При такой вёрстке получится следующая структура заголовков:</p>

14 <p>Структура заголовков нормализовалась. Исчезли проблемы в последовательности, а порядок заголовков стал отвечать информации внутри них.</p>

15 <p>Все заголовки внутри одной страницы могут повторяться. Как в примерах выше, заголовки второго, третьего уровня могут повторяться много раз в рамках одной страницы. Исключение - заголовок первого уровня. Это самый приоритетный заголовок, он может встречаться только один раз в рамках одной страницы. В настоящее время ведутся дискуссии о снятии этого ограничения. В будущем возможно использование заголовка первого уровня внутри любого тега <section>, <article>. Сейчас такого стандарта нет, поэтому используйте заголовок первого уровня один раз для страницы.</p>

16 <h2>Выводы</h2>

17 <ul><li>Не используйте больше одного заголовка первого уровня.</li>

18 <li>Следите за вложенностью заголовков. Все заголовки должны идти последовательно.</li>

19 <li>Заголовки могут повторяться. Последовательность не означает, что можно использовать только 6 заголовков на странице.</li>

20 </ul><h2>Полезные ссылки</h2>

21 <ul><li>Визуальное представление вложенности заголовков: headingsMap<a>для Chrome</a>и для<a>Firefox</a></li>

22 </ul>