Комментарии 8
Столько воды про очевидные, в общем, вещи, а главный вопрос - чем отличаются article и section, на который никто внятно ответить не может - опять не затронут.
Но если вы запомните основы — что section, article, aside и nav создают подразделы на веб-страницах, — то вы уже на 90 % на правильном пути.
Section группирует article. Посмотрите пример 6.
Если вам нужно больше информации по этой теме вот тут хороший материал.
Категорически с Вами не согласна. Автор пытался донести на разных примерах, что действительно важно в разметке, а что второстепенно.
На этот вопрос хорошо ответил Брюс Лоусон в 2020-м:
<section>можно использовать с aria-label, чтобы подсказать скринридеру, где начинается и заканчивается определенная часть статьи. В остальных случаях забудьте про него, или используйте другой элемент, типа<aside aria-label=”quick summary”>или<div role=”region” aria-label=”quick summary”>.<main>,<header>,<footer>и<nav>очень полезны для пользователей скринридеров и полностью прозрачны для тех, кто не пользуется вспомогательными технологиями. Так что используйте их.<article>не только для статей в блоге — он для любых самодостаточных штук. А еще он помогает WatchOS отобразить ваш контент правильно.
Section неотделим от контента страницы. Article отделим и может быть переиспользован на других страницах.
На момент написания этой статьи ни один браузер или программа для чтения не реализовали алгоритм выделения контуров, поэтому нам нужны сторонние инструменты тестирования, такие как аутлайнер.
К сожалению, за 11 лет с публикации оригинала статьи это не изменилось, браузеры по-прежнему не поддерживают алгоритм Document outline. Когда у HTML-спецификации были две параллельные ветки, WHATWG и W3C, в W3C-ветку даже добавили отдельное предупреждение:
Предупреждение: в данный момент нет известных нативных реализаций алгоритма схемы документа в графических браузерах или инструментах вспомогательных технологий (напр. скринридерах для слепых — прим. перев.), хотя этот алгоритм реализован в других программах, таких как валидаторы и браузерные расширения. Таким образом, нельзя полагаться на алгоритм схемы документа, чтобы донести структуру документа до пользователей. Авторам рекомендуется передавать структуру с помощью уровней заголовков (
h1-h6) (т.е. по-старому, как во времена HTML4 — прим. перев.).
В WHATWG-ветку стандарта (которая сейчас единственная) примечание добавлять не стали, вместо этого попытались было исправить сам алгоритм, приблизив его к реальности, но что-то не получилось. Так что по итогу и сейчас приходится пользоваться старыми добрыми уровнями заголовков:(. Несколько лет назад была неплохая статья о трудностях с внедрением этого алгоритма и истории попыток их преодоления.
Заголовки в web документе это больше про SEO... (да простят меня люди с ограничеными возможностями), так что я не согласен с автором, что он позволяет себе нарушать очередность последовательности... прим в примерах h1 потом h5 и тд. Вам сеошники раскажут что так делать не надо. Заголовки - это не про дизайн, это про продажи! Если тебе надо что б твоя статия ботами читалась как Продажа лошадей, то выделяй заголовком эту фразу, а если ты продаешь каких-то особых, лошадей-лидеров, про которых все знают, то выделяй заголовками их имена. Семантический вес имеют h1 h2 (иногда кто-то говорит что h3), всё остальное - чепуха
Заголовки в web документе это больше про SEO… (да простят меня люди с ограничеными возможностями), так что я не согласен с автором, что он позволяет себе нарушать очередность последовательности… прим в примерах h1 потом h5 и тд.blockquote>
Это пример, который показывает совсем другое.
Заголовки — это не про дизайн, это про продажи! Если тебе надо что б твоя статия ботами читалась как Продажа лошадей, то выделяй заголовком эту фразу, а если ты продаешь каких-то особых, лошадей-лидеров, про которых все знают, то выделяй заголовками их имена. Семантический вес имеют h1 h2 (иногда кто-то говорит что h3), всё остальное — чепухаblockquote>
О дизайне в этой статье вообще речи не шло. Про семантический вес тоже не было ни слова.
HTML5 и алгоритм разметки документов