Разбор семантики <article> и <section> тегов HTML5

Разбор семантики <article> и <section> тегов HTML5

HTML передает пользовательским устройствам две взаимосвязанные, но разные информации. Первая - это информация о визуальном представлении, которая сообщает устройству, как отображать документ по умолчанию.

Вторая известна как семантическая информация или, просто, семантика. Она передает смысл в документе, т.е. назначение каждого элемента и взаимосвязь между ними.

Таким образом, мы можем верстать свои страницы и манипулировать тем, как машины должны воспринимать наш контент.

Группировка контента выполняет определенную функцию в описании HTML5 документа. Но как определить, какое из семантических значений, уже имеющихся у <article> или <section> наиболее точно описывает функцию, которую ваше сгруппированное содержимое должно выполнять в структуре документа?

Элемент <article> представляет собой законченную, или самодостаточную, композицию в документе, странице, приложении или сайте, которая, в принципе, может самостоятельно распространяться или повторно использоваться, например, при синдикации. Это может быть сообщение на форуме, статья в журнале или газете, запись в блоге, комментарий пользователя, интерактивный виджет или гаджет, или любой другой независимый элемент контента.

Элемент <section> представляет собой общий раздел документа или приложения. Раздел в данном контексте - это тематическая группа содержимого, обычно с заголовком....

Примерами секций могут быть главы, различные страницы с вкладками в диалоговом окне с вкладками или пронумерованные разделы тезисов. Главная страница веб-сайта может быть разделена на разделы для введения, новостей и контактной информации.

Общее правило заключается в том, что элемент <section> уместен только в том случае, если содержание элемента будет явно перечислено в конспекте документа.

Если бы вы делали верстку Twitter, вы бы обернули каждый твит, поступающий на ленту пользователей, в <article>, потому что они самодостаточны и в принципе, независимо распространяемы? Или вы бы обернули их в <section>, потому что они являются общей секцией приложения? Или, возможно, в данном случае семантически уместен <div>?

Если все это вас заинтриговало, рекомендую почитать статью, где автор на примере страниц блога Smashing Magazine объясняет, как группировать контент с помощью тегов <article> и <section>.

https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/

В целом, в HTML5 только 2 тега семантически нейтральны, это <div> и <span> (еще <wbr>). Все остальные несут определенны смысл. Вы уже наверное поняли, что используя HTML5 семантически, можно влиять на то, как Гугл воспримет ваш контент.

Сеошники из чата «Семантическое SEO и HTML5 верстка» как раз и пытаются этим манипулировать.

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/1168...