Правила семантической верстки

1 Стал отходить от постоянного использование div'ов и стали возникать вопросы.
Какие элементы нельзя использовать как "обертку", я слышал что section нельзя, не знаю как это относится к другим
article, aside, footer, header, nav, main

2 Можно ли section выносить за main

Добавлено через 27 минут
Можно ли в элемент figure добавлять иконки.
Например иконка с изображением крестика и надписью закрыть.
Или логотипы социальных сетей с подписью что за сеть.

0

Семантика это что, взаимодействие человека и машины? Тег нельзя использовать как обёрту это пустой тег, к примеру <br>. Если вас беспокоит "автопродвижение" вашего сайта с семантической точки зрения за счёт используемых вами семантических тегов то не беспокойтесь, сайт продвинется в топ либо по основной идее поисковых систем, а именно "уникальности и полезность контента" либо из за магии сеошников, скорее всего второй вариант, из за которого же в интернете вы получаете кучу мусора по вашей, как вам казалось до выдачи ответа на запрос, правильной фразе запроса. Если вас интересует правильность вложенности тегов в плане методологии и работы в коллективе аля БЭМ с приправой бутсрапа то собственно ознакомьтесь с бутстрапом или придумайте свою схему для коллектива. Ну и на последок скажу, что для решения любой задачи в верстке вам лучше иметь как минимум 3, а лучше 5 способов её решения, так как ios и гугл сейчас не дремлят и очень скоро вам напишет заказчик, давайка друг, поправь здесь, у тебя там в фаерфоксе кружки, а у меня опять квадратики.

0

Mailo, Наболевшее?

1

Сообщение от sergei2210 Какие элементы нельзя использовать как "обертку"

Смотря для чего эта обертка предназначена. Тег main предназначен для обертывания им основного содержимого документа. Он включает в себя содержимое, которое уникально для документа и исключает содержимое документа, которое повторяется в пределах сайта или приложения, таких как навигационные ссылки общие для сайта, рекламные банеры и прочую общую информацию о сайте.

section используется для тематической группировки контента, когда его необходимо разбить на части предоставив в каждой из них определенную информацию. По простому, часто для этой цели используют div. Нигде не говорится, что section нельзя вкладывать в section, но в спецификации не говорится и об обратном.

Сообщение от sergei2210 Можно ли section выносить за main

Да.

article это раздел содержимого, которое не зависимо от остальной части документа. Она должна быть написана и структурирована так, что бы не зависеть от других разделов документа. Должна иметь смысл и тематику, это статья, но это всегда так, это может быть и комментарий пользователя и сообщение на форуме. article можно вкладывать в article, но в этом случае вложенный элемент должен быть или отсылкой или продолжением основной статьи или как минимум связан с ней по смыслу. Именно в подобных ситуациях тег article может являться комментарием или сообщением. Хотя в спецификации написано, что это может быть вообще - любой другой независимый элемент контента, который может быть распространен или повторно использован.

Теперь самое интересное, что куда вкладывать? С main мы разобрались, он вмещает уникальный для текущей страницы контент. Но что с двумя другими? section в article или article в section? А фиг его знает. Прямого ответа на этот вопрос нет, даже в примерах спецификации они вкладываются друг в друга. То есть section может иметь дочерние элементы article и наоборот.

aside представляет собой часть контента, которая или не связана с контентом сайта вообще (рекламные банеры) или связана с ним по средствам коммуникации или как-то косвенно, например - меню сайта. Он является отдельным от основного контента. Что им оборачивать?

nav это элемент для навигации по сайту, им можно обернуть ссылки. footer и header это элементы для группировки контента, при чем они как и nav могут использоваться не только в элементе body или обертке контейнере, но и в статьях, карточках товаров и как я понимаю в любом элементе, который задает структуру HTML. То есть в тех, которые были описаны выше. Они оборачивают заголовки (h1 - h6), информацию о статье и прочее.

Сообщение от sergei2210 Стал отходить от постоянного использование div'ов и стали возникать вопросы

А это правильно, вообще написано, что:

Авторам настоятельно рекомендуется рассматривать элемент div как элемент последней инстанции, когда никакой другой элемент не подходит. Использование более подходящих элементов вместо элемента div приводит к лучшей доступности для пользователей и более легкого сопровождения кода для авторов.

То есть токо вдуматься последней инстанции и настоятельно рекомендуется, то есть выше будет только - запрещается , что будет говорить о не валидности написанного HTML кода вообще и ликвидации всех divелоперов . А все говорят семантика омно.

Сообщение от sergei2210 Можно ли в элемент figure добавлять иконки. Например иконка с изображением крестика и надписью закрыть. Или логотипы социальных сетей с подписью что за сеть.

Yes. Элемент figure не монополизирован для использования одних изображений. Там может быть абзац, блок кода и тд.

1

DanLo, И как эти теги влияют на сайт в целом? Улучшается быстродействие или он в гугле повыше будет? Или это вы книжку типа прочитали где сказали что так правильно, ну и теперь так и делаю?

Сообщение от DanLo Использование более подходящих элементов вместо элемента div приводит к лучшей доступности для пользователей

Это как, в поисковике опять же выдаётся этот сайт с приоритетом или какие специальные возможности интерфейса на эти теги реагируют?

Сообщение от DanLo более легкого сопровождения кода для авторов

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

0

DanLo,

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

И вопрос по Можно примеры какие изображение можно и нужно вставлять а какие можно вставлять не используя этот тэг.
И я я читал что можно и не только изображение вставлять, но не понятно по какому смыслу это делать, чем руководствоваться выборе.

0

Сообщение от Mailo Или это вы книжку типа прочитали где сказали что так правильно, ну и теперь так и делаю?

Да, вот она - https://www.w3.org/TR/html51/grouping-content.html

Вы поймите, что спорите не со мной а с рабочей группой w3c. Вы им этот вопрос задайте. Да и я признаться честно больше им доверяю, там же не дураки сидят. Использование семантических тегов делает сопровождение и расширение написанного кода легче плюс улучшают доступность. Не все пользуются CMS, не все пишут import React from react и тд.

Сообщение от sergei2210 говорится что контент в нем должен быть независимый от статьи и может быть без ущерба перенесен в другое место и приводится в примеры такой контент как комментарий, но как комментарий может быть независимые от основного контента?

Комментарий в данном случае будет вложен в другой article, то есть структура такая будет.

И контент независимый от статьи не совсем верное определение. Скорее статья не зависимая от окружающего ее контента.

Сообщение от sergei2210 Можно примеры какие изображение можно и нужно вставлять а какие можно вставлять не используя этот тэг.

Да не заморачивайтесь вы так сильно по поводу семантики. https://html.spec.whatwg.org/m... on-element

1