Если вы посмотрите на разметку HTML для любой веб-страницы сегодня, вы увидите элементы HTML, содержащиеся в других элементах HTML. Эти элементы, которые находятся «внутри» других элементов, известны как вложенные элементы , и они необходимы для создания любой веб-страницы сегодня.
Что значит вкладывать теги HTML?
Самый простой способ понять вложение — это думать о HTML-тегах как о полях, в которых содержится ваш контент. Ваш контент может включать в себя текст, изображения и связанные медиа. HTML-теги — это блоки вокруг содержимого. Иногда вам нужно разместить коробки внутри других коробок. Эти «внутренние» коробки вложены в другие.
Если у вас есть блок текста, который вы хотите выделить внутри абзаца, у вас будет два HTML-элемента, а также сам текст.
Пример: это предложение текста.
Этот текст — то, что мы будем использовать в качестве нашего примера. Вот как это будет написано в HTML:
<p> Пример. Это текстовое предложение. </ p>
Чтобы сделать предложение слова жирным, добавьте открывающие и закрывающие теги до и после этого слова.
<p> Пример. Это <strong> предложение </ strong> текста. </ p>
Как видите, у нас есть один блок (абзац), который содержит содержание предложения, плюс второй блок ( пара сильных тегов), который отображает это слово как жирный.
Когда вы вкладываете теги, закрывайте теги в том порядке, в котором вы их открыли. Сначала вы открываете <p>, а затем <strong>, что означает, что вы изменили его и закрыли </ strong>, а затем </ p>.
Еще один способ думать об этом — снова использовать аналогию с блоками. Если вы поместите коробку в другую коробку, вы должны закрыть внутреннюю, прежде чем сможете закрыть внешнюю или содержащую коробку.
Добавление дополнительных вложенных тегов
Что если вы хотите, чтобы одно или два слова были выделены жирным шрифтом, а другое — курсивом ? Вот как это сделать.
<p> Пример. Это <strong> предложение </ strong> текста, а также текст <em>, выделенный курсивом </ em>. </ p>
Вы можете видеть, что наш внешний блок <p> теперь содержит два вложенных тега — <strong> и <em>. Они оба должны быть закрыты, прежде чем та коробка, в которой они находятся, может быть закрыта.
<div>
<p> Пример. Это <strong> предложение </ strong> текста, а также текст <em> курсив </ em>. </ p>
<p> Это еще один абзац. < / p>
</ div>
В этом случае у нас есть коробки внутри коробок! Самым внешним полем является <div> или деление . Внутри этого поля есть пара вложенных тегов абзаца , а внутри первого абзаца у нас есть следующая пара тегов <strong> и <em>.
Почему вы должны заботиться о вложенности
Главная причина, по которой вы должны заботиться о вложенности, — это если вы собираетесь использовать CSS. Каскадные таблицы стилей полагаются на то, что теги должны быть последовательно вложены в документ, чтобы он мог определить, где начинаются и заканчиваются стили. Неправильное вложение мешает браузеру знать, где применять эти стили. Давайте посмотрим на некоторые HTML:
<div class = "main-content">
<p> Пример. Это <strong> предложение </ strong> текста, а также текст <em>, выделенный курсивом </ em>. </ p>
<p > Это <a href="/index.html"> другой абзац </a>. </ P>
</ div>
Используя приведенный выше пример, если мы хотим написать стиль CSS, который будет влиять на ссылку внутри этого раздела, и только на эту ссылку (в отличие от любых других ссылок в других разделах страницы), нам потребуется использовать вложение для записи этот стиль как таковой:
.main-content a {
color: # F00;
}
Другие соображения
Доступность и совместимость с браузерами тоже важны. Если ваш HTML-код неправильно вложен, он не будет таким же доступным для программ чтения с экрана и более старых браузеров — и он может даже полностью нарушить визуальный вид страницы, если браузеры не смогут понять, как правильно отобразить страницу, поскольку элементы и теги HTML не на своем месте.
Наконец, если вы хотите написать полностью правильный и правильный HTML, вам нужно использовать правильное вложение. В противном случае каждый валидатор пометит ваш HTML как неправильный.