Вложение элементов HTML
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
В этом мануале вы научитесь работать с вложением элементов HTML. Эта технология позволяет применить несколько HTML тегов к одному фрагменту контента.
Элементы HTML могут быть вложенными – то есть один элемент может быть помещен внутри другого элемента. Вложение позволяет применять несколько тегов HTML к одному фрагменту контента. Для примера попробуйте вставить следующий фрагмент кода в файл index.html:
<strong>My bold text and <em>my bold and emphasized text</em></strong>
Сохраните файл и перезагрузите его в браузере.
Примечание: Инструкции по созданию файла index.html вы найдете в руководстве Подготовка HTML-проекта, а о загрузке файла в браузер – в мануале Основы работы с HTML-элементами.
Вы должны получить такую страницу:
My bold text and my bold and emphasized text
Рекомендации по вложению элементов HTML
Обратите внимание, вложенные теги рекомендуется всегда закрывать в порядке, обратном их открытию.
К примеру, в приведенном ниже коде тег <em> закрывается первым, поскольку это был последний тег, который открывался. Тег <strong> закрывается последним, так как он открывался первым.
This sentence contains HTML elements that are <strong><em>nested according to best practices</em></strong>.
И вот вам обратный пример. Следующий HTML-код содержит теги, которые вложены не по этому правилу, поскольку тег <strong> закрывается перед тегом <em>:
This sentence contains HTML elements that are <strong><em>not nested according to best practices</strong></em>.
Чисто технически для рендеринга HTML в браузере это вообще не обязательно, но размещение тегов в обратном порядке может улучшить читаемость кода HTML для вас или других разработчиков.
Вложенные теги HTML
Если вы посмотрите на разметку HTML для любой веб-страницы сегодня, вы увидите элементы HTML, содержащиеся в других элементах HTML. Эти элементы, которые находятся «внутри» других элементов, известны как вложенные элементы , и они необходимы для создания любой веб-страницы сегодня.
Что значит вкладывать теги HTML?
Самый простой способ понять вложение — это думать о HTML-тегах как о полях, в которых содержится ваш контент. Ваш контент может включать в себя текст, изображения и связанные медиа. HTML-теги — это блоки вокруг содержимого. Иногда вам нужно разместить коробки внутри других коробок. Эти «внутренние» коробки вложены в другие.
Если у вас есть блок текста, который вы хотите выделить внутри абзаца, у вас будет два HTML-элемента, а также сам текст.
Этот текст — то, что мы будем использовать в качестве нашего примера. Вот как это будет написано в HTML:
Чтобы сделать предложение слова жирным, добавьте открывающие и закрывающие теги до и после этого слова.
Как видите, у нас есть один блок (абзац), который содержит содержание предложения, плюс второй блок ( пара сильных тегов), который отображает это слово как жирный.
Когда вы вкладываете теги, закрывайте теги в том порядке, в котором вы их открыли. Сначала вы открываете <p>, а затем <strong>, что означает, что вы изменили его и закрыли </ strong>, а затем </ p>.
Еще один способ думать об этом — снова использовать аналогию с блоками. Если вы поместите коробку в другую коробку, вы должны закрыть внутреннюю, прежде чем сможете закрыть внешнюю или содержащую коробку.
Добавление дополнительных вложенных тегов
Что если вы хотите, чтобы одно или два слова были выделены жирным шрифтом, а другое — курсивом ? Вот как это сделать.
Вы можете видеть, что наш внешний блок <p> теперь содержит два вложенных тега — <strong> и <em>. Они оба должны быть закрыты, прежде чем та коробка, в которой они находятся, может быть закрыта.
В этом случае у нас есть коробки внутри коробок! Самым внешним полем является <div> или деление . Внутри этого поля есть пара вложенных тегов абзаца , а внутри первого абзаца у нас есть следующая пара тегов <strong> и <em>.
Почему вы должны заботиться о вложенности
Главная причина, по которой вы должны заботиться о вложенности, — это если вы собираетесь использовать CSS. Каскадные таблицы стилей полагаются на то, что теги должны быть последовательно вложены в документ, чтобы он мог определить, где начинаются и заканчиваются стили. Неправильное вложение мешает браузеру знать, где применять эти стили. Давайте посмотрим на некоторые HTML:
Используя приведенный выше пример, если мы хотим написать стиль CSS, который будет влиять на ссылку внутри этого раздела, и только на эту ссылку (в отличие от любых других ссылок в других разделах страницы), нам потребуется использовать вложение для записи этот стиль как таковой:
Другие соображения
Доступность и совместимость с браузерами тоже важны. Если ваш HTML-код неправильно вложен, он не будет таким же доступным для программ чтения с экрана и более старых браузеров — и он может даже полностью нарушить визуальный вид страницы, если браузеры не смогут понять, как правильно отобразить страницу, поскольку элементы и теги HTML не на своем месте.
Наконец, если вы хотите написать полностью правильный и правильный HTML, вам нужно использовать правильное вложение. В противном случае каждый валидатор пометит ваш HTML как неправильный.
Как правильно верстать в 2022 году. Часть 2. Как правильно вкладывать теги друг в друга
Что значит правильно? Что является источником истины при работе с HTML? Конечно же это специфиакция! В данный момент существует так называемый «живой стандарт» пятой версии HTML. Это значит, что у него нет мажорных версий и он обновляется регулярно. Посмотреть последнее обновление спецификации можно здесь.
Спецификация HTML — это увесистый документ с кучей разделов. Она существует как для разработчиков браузеров, так и для нас — верстальщиков. Конкретно нас интересуют третий и четвёрный раздел (Semantics, structure, and APIs of HTML documents и The elements of HTML). Эти разделы описывают, как теги можно вкладывать друг в друга и что обозначает каждый тег.
Описание элемента
Каждый элемент имеет метаинформацию и описание.
Сверху размещены метаданные, куда включна следующая информация:
куда можно вкладывать тег;
какие теги можно вкладывать внутрь этого тега;
перечень аттрибутов тега (глобальные, дополнительные и ARIA);
информация о доступности;
Далее размещено описание тега — что он обозначает и как его можно использовать.
Спецификация элемента на примере тега <p>
Метаданные тега
Метаданные тега <p>
Метаинформация о теге включает в себя несколько пунктов:
Категории — обозначает, к каким типам тегов относится элемент, могут быть следующие типы:
Metadata content (например <meta> и <title> ) — метаданные страницы, обозначающие представление или поведение содержимого, или отношение к другим документам;
Flow content (например <article> , <span> , <p> ) — это все теги, используемые в <body> , то есть почти все в целом, за исключением некоторых мета-тегов;
Sectioning content (например <section> ) — какие-либо большие секции, как правило имеющие конкретную структуру и заголовок;
Heading content (все заголовки <h1> – <h6> , а также тег, про который я забыл рассказать в прошлой статье — <hgroup> ) — определяет заголовок секции, обозначенной явно, либо <body> .
Phrasing content (например <a> , <span> , <strong> ) — различный, в основном текстовый контент, но включающий также некоторые элементы, которые позволяют размечать текст на уровне параграфов;
Embedded content (например <iframe> , <canvas> , <video> ) — контент, встраиваемый извне (другие сайты, файлы, скрипты);
Interactive content (например <a> , <button> , <input> ) — теги, с которыми пользователь может взаимодействовать;
Контекст использования элемента — где мы можем размещать элемент.
Контентная модель — важная для этой статьи часть! Это как раз то, что мы можем размещать внутри тега.
Tag omission — возможные сценарии, когда закрывающую часть тега можно опустить. Рекомендую не обращать внимания на этот раздел вообще, так как в современном вебе нормальной практикой является закрытие всех парных тегов.
Доступные аттрибуты тега.
Раздел, касающийся доступности. Надеюсь когда-нибудь дойдут руки написать о работе с доступностью в рамках спецификации.
DOM Interface — раздел, необходимый для JavaScript-разработчиков, подробно на нём останавливаться не будем.
И всё же, как правильно вкладывать теги друг в друга?
Категории элементов по 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. Соответственно вложение допустимо.
Частая задача, когда нам нужно внутри лейбла держать и инпут и его описание. Проверям:
Для лейбла контентной моделью является Phrasing Content, но без вложения других лейблов.
<p> не имеет категории Phrasing, поэтому вкладывать <p> в <label> нельзя!
<input> имеет категорию Phrasing, поэтому мы можем вложить его в <label> .
Если сильно упрощать, то во Flow мы можем вкладывать и Flow, и Phrasing, а во Phrasing только Phrasing.
Заключение части 2
Но всю эту простыню можно было не читать, а просто воспользоваться сервисом https://caninclude.glitch.me, написанным Александром Вишняковым и скрин которого я разместил в шапке поста. Там по аналогии с Can I Use, можно проверить, вкладывается ли один тег в другой или нет.
Ну и не забывайте валидировать код с помощью W3C Validator, который тоже сможет подсказать, правильно ли вы вкладывали теги, или нет.