Как правильно верстать в 2022 году. Часть 2. Как правильно вкладывать теги друг в друга06.05.2022 00:01

Вступление

Привет хабр! Меня зовут Николай и я Frontend-разработчик в логистическом стартапе Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

В этой статье мы говорим о вложении тегов друг в друга, так как это один из неочевидных моментов, в котором многие новички часто делают ошибки.

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

Содержание

  1. Используйте правильные теги

  2. Как правильно вкладывать теги друг в друга

  3. Работа с медиаконтентом

  4. Пишем таблицы на HTML правильно

  5. a или button? Работа с интерактивными элементами и как выбрать правильный тег

  6. Различный теги для медиа-контента

  7. Прекратите писать велосипеды! Как мы можем стилизовать дефолтные HTML-элементы

  8. Пишем доступные формы

  9. Избыточная вёрстка. Как облегчить разметку

  10. Современные фишки HTML и CSS способные облегчить нам жизнь

  11. Экспериментальные технологии, входящие в стандарт

Как правильно вкладывать теги друг в друга

Что значит правильно? Что является источником истины при работе с HTML? Конечно же это специфиакция! В данный момент существует так называемый «живой стандарт» пятой версии HTML. Это значит, что у него нет мажорных версий и он обновляется регулярно. Посмотреть последнее обновление спецификации можно здесь: https://html.spec.whatwg.org/

Спецификация HTML — это увесистый документ с кучей разделов. Она существует как для разработчиков браузеров, так и для нас — верстальщиков. Конкретно нас интересуют третий и четвёрный раздел (Semantics, structure, and APIs of HTML documents и The elements of HTML). Эти разделы описывают, как теги можно вкладывать друг в друга и что обозначает каждый тег.

Описание элемента

Каждый элемент имеет метаинформацию и описание.

Сверху размещены метаданные, куда включна следующая информация:

  • куда можно вкладывать тег;

  • какие теги можно вкладывать внутрь этого тега;

  • перечень аттрибутов тега (глобальные, дополнительные и ARIA);

  • информация о доступности;

  • вспомогательные данные.

Далее размещено описание тега — что он обозначает и как его можно использовать.

Спецификация элемента на примере тега <p>» />Спецификация элемента на примере тега <p></p> <h2>Метаданные тега</h2> <p><img src=Категории элементов по HTML-спецификации

Две основные категории тегов — это Metadata (метаданные) и Flow (поточные теги). Метаданные — это то что в основном входит в , а Flow — то что можно положить в . Однако, некоторые мета-теги мы можем разместить в , поэтому они заходят на Flow-контент (например это

Рейтинг@Mail.ru