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

Вступление

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

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

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

Содержание

Используйте правильные теги
Как правильно вкладывать теги друг в друга
Работа с медиаконтентом
Пишем таблицы на HTML правильно
a или button? Работа с интерактивными элементами и как выбрать правильный тег
Различный теги для медиа-контента
Прекратите писать велосипеды! Как мы можем стилизовать дефолтные HTML-элементы
Пишем доступные формы
Избыточная вёрстка. Как облегчить разметку
Современные фишки HTML и CSS способные облегчить нам жизнь
Экспериментальные технологии, входящие в стандарт

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

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

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

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

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

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

куда можно вкладывать тег;
какие теги можно вкладывать внутрь этого тега;
перечень аттрибутов тега (глобальные, дополнительные и ARIA);
информация о доступности;
вспомогательные данные.

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

Спецификация элемента на примере тега <p>» title=»Спецификация элемента на примере тега <p>» width=»890″ height=»990″ data-src=»https://habrastorage.org/getpro/habr/upload_files/a18/38d/79d/a1838d79d3826d18973cb5a2c3b47409.png»/><figcaption>Спецификация элемента на примере тега <p></figcaption></figure>
<h2>Метаданные тега</h2>
<figure class= — Категории элементов по HTML-спецификации

Метаданные тега <p>» title=»Метаданные тега <p>» width=»1280″ height=»688″ data-src=»https://habrastorage.org/getpro/habr/upload_files/164/d5d/11c/164d5d11c89382a2533812165d6dcad7.png»/><figcaption>Метаданные тега <p></figcaption></figure>
<p>Метаинформация о теге включает в себя несколько пунктов:</p>
<ul>
<li>
<p><strong>Категории</strong> — обозначает, к каким типам тегов относится элемент, могут быть следующие типы:</p>
<ul>
<li>
<p><strong>Metadata content</strong> (например <code><meta></code> и <code><title></code>) — метаданные страницы, обозначающие представление или поведение содержимого, или отношение к другим документам;</p>
</li>
<li>
<p><strong>Flow content</strong> (например <code><article></code>, <code><span></code>, <code><p></code>) — это все теги, используемые в <code><body></code>, то есть почти все в целом, за исключением некоторых мета-тегов;</p>
</li>
<li>
<p><strong>Sectioning content</strong> (например <code><section></code>) — какие-либо большие секции, как правило имеющие конкретную структуру и заголовок;</p>
</li>
<li>
<p><strong>Heading content</strong> (все заголовки <code><h1></code> – <code><h6></code>, а также тег, про который я забыл рассказать в прошлой статье — <code><hgroup></code>) — определяет заголовок секции, обозначенной явно, либо <code><body></code>.</p>
</li>
<li>
<p><strong>Phrasing content</strong> (например <code><a></code>, <code><span></code>, <code><strong></code>) — различный, в основном текстовый контент, но включающий также некоторые элементы, которые позволяют размечать текст на уровне параграфов;</p>
</li>
<li>
<p><strong>Embedded content</strong> (например <code><iframe></code>, <code><canvas></code>, <code><video></code>) — контент, встраиваемый извне (другие сайты, файлы, скрипты);</p>
</li>
<li>
<p><strong>Interactive content</strong> (например <code><a></code>, <code><button></code>, <code><input></code>) — теги, с которыми пользователь может взаимодействовать;</p>
</li>
</ul>
</li>
<li>
<p><strong>Контекст использования элемента</strong> — где мы можем размещать элемент.</p>
</li>
<li>
<p><strong>Контентная модель</strong> — важная для этой статьи часть! Это как раз то, что мы <strong>можем размещать внутри тега</strong>.</p>
</li>
<li>
<p><strong>Tag omission</strong> — возможные сценарии, когда закрывающую часть тега можно опустить. Рекомендую не обращать внимания на этот раздел вообще, так как в современном вебе нормальной практикой является закрытие всех парных тегов.</p>
</li>
<li>
<p>Доступные <strong>аттрибуты</strong> тега.</p>
</li>
<li>
<p>Раздел, касающийся <strong>доступности</strong>. Надеюсь когда-нибудь дойдут руки написать о работе с доступностью в рамках спецификации.</p>
</li>
<li>
<p><strong>DOM Interface</strong> — раздел, необходимый для JavaScript-разработчиков, подробно на нём останавливаться не будем.</p>
</li>
</ul>
<h3>И всё же, как правильно вкладывать теги друг в друга?</h3>
<figure class= — Категории элементов по HTML-спецификации

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

Внутри потоковых тегов находятся все остальные категории.

Heading — это просто залоговки всех уровней, а также тег <hgroup>.

Sectioning — это большие смысловые части документа, секции.

Phrasing — небольшие слова или словосочетания, фразы. В основном это строчные элементы (по крайней мере они такими являлись в спецификации HTML4). Все остальные теги, не имеющие категории Phrasing, как правило являются блочными.

Embedded — как уже писал выше, контент, имеющий внешний источник данных, то есть не имеющий прямое отношение к HTML-документу.

Interactive — категория, пересекающаяся с Flow, Phrasing и Embedded, обозначающая все элементы, с которыми пользователь может взаимодействовать.

Проверять возможность вкладывания тегов друг в друга можено по следующему алгоритму:

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

Давайте разберёмся на примере. Есть тег <section> и мы хотим вложить в него тег <b>: у секции контентая модель Flow, у <b> категории Flow, Phrasing и Palpable. Соответственно вложение допустимо.

Другой пример:

<label>   <p>Имя:</p>   <input type="text" name="name"> </label>

Частая задача, когда нам нужно внутри лейбла держать и инпут и его описание. Проверям:

Для лейбла контентной моделью является Phrasing Content, но без вложения других лейблов.
<p> не имеет категории Phrasing, поэтому вкладывать <p> в <label> нельзя!
<input> имеет категорию Phrasing, поэтому мы можем вложить его в <label>.

Если сильно упрощать, то во Flow мы можем вкладывать и Flow, и Phrasing, а во Phrasing только Phrasing.

Заключение части 2

Но всю эту простыню можно было не читать, а просто воспользоваться сервисом https://caninclude.glitch.me, написанным Александром Вишняковым и скрин которого я разместил в шапке поста. Там по аналогии с Can I Use, можно проверить, вкладывается ли один тег в другой или нет.

Ну и не забывайте валидировать код с помощью W3C Validator, который тоже сможет подсказать, правильно ли вы вкладывали теги, или нет.

ссылка на оригинал статьи https://habr.com/ru/post/664060/