На Доке вышла статья про семантическую вёрстку в HTML. Это одна из моих любимых тем. Также это одна из спорных и не очевидных тем. Я, конечно же, не могу пройти мимо. На мой взгляд статья содержит ряд неточностей. Дам свои комментарии по этим моментам.
Семантическая вёрстка — особый подход к написанию HTML-разметки страниц. При этом подходе разработчик опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру страницы.
Это не особый способ разметки, а стандартный, страницы должны правильно размечаться. Смысловое содержание и предназначение блока — это одно и то же. Семантика элемента буквально несёт информацию о смысле контента, который в нём находится и как он связан с другим контентом.
<aside> — тег для дополнительного контента, используется для создания «сайдбара» или бокового меню на сайтах.
Один из самых распространённых стереотипов, наряду с картинкой о разметке классической страницы.
<aside> — это не боковая колонка! <aside> — это второстепенный контент, который связан с окружающим контентом. Кажется мне стоит сделать отдельный, более подробный пост про этот элемент.<nav> — контейнер для навигации со ссылками на другие страницы и разделы сайта
В спецификации есть примечание, что в
<nav> не стоит заворачивать любую навигацию, а только основную. Если на странице несколько <nav>, то каждому из них нужно задавать имя.Теги вроде <header> и <footer> — ориентиры.
Это верно только в том случае, когда они относятся к основному разделу страницы
<body>. То есть между <body> и этими элементами нет других секционных элементов (<section>, <article>, <aside>, <nav>).Уровень доступности сайта сам по себе — один из факторов ранжирования в поисковых системах.
Доступность не является фактором ранжирования. В официальных источниках от Google и Yandex такой информации нет. Core Web Vitals оказывает небольшое влияние. Оценка доступности хоть и отображается в Lighthouse, но это информационный показатель, он не входит в Core Web Vitals.
Семантическая вёрстка помогают и самим поисковым движкам. Они не понимают сам текст, его контекст и то, насколько он важен.
Роботы понимают текст и контекст, причём в первую очередь. Иначе куча сайтов с вёрсткой на
<div>-ах бы не оказалась в топах поисковой выдачи. Качество текста, его смысл, связь с другим текстом на странице — один из решающих показателей при ранжировании. Об этом достаточно много упоминается в документации Google Search.Семантические теги дают поисковым системам нужный контекст, помогают понять содержимое сайта и проиндексировать его относительно других со схожей тематикой.
Семантические элементы помогают алгоритмам чуть лучше понять контент и его взаимосвязи, но гораздо менее важны, чем сам текст. Сайт в любом случае будет проиндексирован. Хороший текст с плохой разметкой будет выше в выдаче, чем плохой текст с хорошей разметкой.
Например, в Google под название сайта попадают заголовки второго уровня, если используете тег <h2>.
Семантические элементы действительно влияют на построение сниппетов, но больше влияния на это оказывает микроразметка.
Если тянет добавить к <div> классы вроде header, sidebar, content, post и footer, лучше использовать теги <header>, <aside>, <main>, <article> и <footer>.
Этот совет работает не всегда.
sidebar не всегда <aside>, content не всегда <main>, post не всегда <article>. Иногда лучше написать <div> с одним из этих классов, чем использовать созвучный с классом элемент.