Специфичные теги article и figure. Применяете ли вы их и в каких случаях?

Question

[MyQuestion]

Добрый день!

Какова их область применения и востребованы ли эти теги в вашей работе?

article - Предназначен для статей в блоге. Вроде всё понятно. Но используете ли вы их по назначению таким образом? Каким образом выглядит этот код? Обязателен ли в article - header и footer? Ещё для меня очень важно понимать, размечаете ли вы с помощью article, карточки товара? Или превью новости, в блоке news? Иногда я встречаю людей, которые топят за семантику, но article не используют нигде, либо используют очень редко, когда вспомнят про него... А как у вас дела с этим тегом?

figure - Предназначен для выделения блока с изображением, и с помощью figcaption связывают изображение с его описанием.
Та же история... Вы используете его? Где? Иногда вижу, что где-то используют, где-то нет. Например в слайдере? В карточке товара? А если мне не нужно связывать изображение с его описанием?

Как вы используете эти теги в вашей работе?

Comments

[Андрей Федоров]

figure/figcaption использую по прямому назначению - картинка/подпись под картинкой

[MyQuestion]

Андрей Федоров, я ровно это и написал в тексте созданной темы.
Лично Вы, используете figure/figcaption в разметке слайдера, карточек товара? Во всех ли случаях вы используете этот тег, когда нужно вставить не декоративное, контентное изображение?
Я имею ввиду, что если вы видите блок с изображением, то используете figure/figcaption во всех 100% случаях, без вариантов.

[Андрей Федоров]

MyQuestion, нет конечно. Для обычных изображений я стараюсь использовать picture. Но если по смыслу должно быть быть изображение с подписью, то использую figure в качестве обертки + figcaption.

[MyQuestion]

Андрей Федоров, Спасибо!
Именно это я и спрашивал )

[Андрей Федоров]

MyQuestion, на здоровье. Однако я хотел бы пояснить - тег picture используется вовсе не из-за семантики, а из соображений адаптивности.

[Дмитрий Беляев]

MyQuestion, вообще article - это не только статья, это еще и синоним для subject, и в HTML тег article используется именно в этом понятии, единица чего либо.
Польза выделять товар или превью новости этим тегом есть, NVDA/VoiceOver выделяют такой элемент

[MyQuestion]

Дмитрий Беляев, Спасибо!
В Вашей работе, Вы тоже его используете? Размечаете ли этим тегом превью статей, новостей, а так же карточки товара?

[Дмитрий Беляев]

MyQuestion, на текущей работе я отошел от веба, у меня вообще больше ресерча чем разработки, а разрабатываю плагины для vscode. Так что не актуально.
А вот предыдущим местом был как раз интернет магазин, и там да, мы использовали article как раз для карточек товара.

Answer 1

[valgerofficial]

Вижу уже 2 вопрос от вас.. не нужно ломать голову.. что да как, тут не так всё тяжело. Было много версий HTML, и раньше делали по другому.. например..

<div id="header"></div>

Была блочная вёрстка, и верстали с помощью div'ов, им давали особый ид как выше в примере "header" тем самым обозначали что этот ид относится к шапке сайта. Но основатели HTML, решили ввести свою "Семантику" во всё это дело, и упростить , что бы и вам, и поисковикам было понятно что где находится. Конечно если вы используете HTML5.. нужно использовать его семантику.. глупо использовать HTML5 и верстать старыми методами (Как показано выше). Всё очень просто.

<header></header> - Это шапка сайта
<nav></nav>  - Это навигация сайта
<footer></footer> - Это подвал сайта
<main></main> - Это основной контент страницы.

P.S Мой совет, почитайте про "Семантика HTML5" и вам сразу всё станет понятно)

Comments

[MyQuestion]

Я понимаю )
В спеке всё чётко и хорошо написано. Но теория это теория, практика эта практика. Например БЕМ. Есть большой БЕМ, есть малый БЕМ и если я буду чётко следовать гайду по БЕМ от яндекса, то скорее всего, в конечном итоге, я буду использовать большой БЕМ, который использует только Яндекс. Но кому он нужен ещё, крому яндекса?

Я знаю теорию. То, что я спрашиваю - как вы делаете на практике? Я хочу знать мнение, практического применения, от опытных разработчиков, что бы потом не переучиваться.

Например, мне было очень тяжело смириться, когда я узнал, что навигацию, и огромное количество элементов, нужно делать на ul>li. А как жеdiv, всё же так хорошо было ... я рыдал (
Я не хочу учиться неправильно. Каждый вопрос неопределённости, для меня повод для прокрастинации.
Поэтому, когда я вижу, что мне отвечают на вариативный вопрос односложно, и по факту на него не отвечают, я расстраиваюсь (
Пишешь простыню текста, с кучей вопросов и просьбой примеров, а тебе на это:
- Да.

[Иван В]

MyQuestion, что такое большой и малый БЭМ?

[MyQuestion]

Иван В,
Малый БЭМ, это тот БЭМ, которым в основном все пользуются в мире. БЭМ в разметке, иногда БЭМ в методологии сборки проекта, хранения файлов проектов.

Большой БЭМ, это целая экосистема, которой пользуются в яндексе. Огромное количество JS, который используется в этой системе. HTML в JS, собственные фреймворки и библиотеки, что бы это всё удобно собиралось. Я эту тему не сильно изучал, но можно найти материалы на эту тему. Может даже на ютубе, на канале яндекса.
Если в кратце, большой БЭМ слишком сложный, и вряд ли он подходит под задачи верстальщика или среднего фронтендера.

[MyQuestion]

Иван В,
Ну, я не уверен, что этот термин широко распространён и стоит конкретно его искать в интернете. Если вы изучите все технологии предлагаемым яндексом, связанных с БЭМ-ом, наверное, можно будет утверждать, что вы знаете большой БЭМ )

[Иван В]

MyQuestion,

Я знаю теорию. То, что я спрашиваю - как вы делаете на практике? Я хочу знать мнение, практического применения, от опытных разработчиков, что бы потом не переучиваться.

На практике конечному заказчику бывает фиолетово на семантику и доступность. Особенно, если речь идет о каком-нибудь временном проекте (например, лэндинг меропрития или MVP какого-нибудь сервиса).
Обычно, главное чтобы было сделано быстро и смотрелось красиво.

Да, если проект долгоиграющий, заниматься семантикой нужно. Но опять-таки, очень зависит от стадии проекта. Если сроки горят и нужно быстрее быстрее, правильную семантику можно отложить на потом, а сейчас делать так как кажется верным.

[valgerofficial]

Mellorn, Ну.. тут я нечего не скажу, я лишь скажу что я использую каждый тек header,main,footer всего один раз на сайте) Если это обычный и не сложный лендинг.

Answer 2

[Сергей]

Применяю <article>
в верстке карточек товара или услуг. Все что внутри <li> оборачиваю в него

Comments

[MyQuestion]

Спасибо!

Answer 3

[Irkov]

Применяем figure + figcaption. Когда речь идет о новостях и фотках к ним, то figure очень логично туда ложится.

Comments

[MyQuestion]

Спасибо!
Действительно, логично )