Если вы посмотрите на HTML разметка для любой веб-страницы сегодня вы увидите элементы HTML, содержащиеся в других элементах HTML. Эти элементы, которые находятся «внутри» других элементов, известны как вложенные элементы, и они необходимы для создания любой веб-страницы сегодня.
Что означает вложение HTML-тегов?
Самый простой способ понять вложение - это подумать о HTML-теги как коробки, в которых хранится ваш контент. Ваш контент может включать текст, изображения и связанные с ними мультимедиа. HTML-теги - это рамки вокруг содержимого. Иногда вам нужно поместить коробки внутри других коробок. Эти «внутренние» коробки вложены внутрь других.
Если у вас есть блок текста, который вы хотите выделить полужирным шрифтом внутри абзаца, у вас будет два HTML-элементы а также сам текст.
Пример: это предложение текста.
Этот текст мы будем использовать в качестве примера. Вот как это будет написано в HTML:
Пример: это предложение текста.
Сделать слово приговор жирным шрифтом добавьте открывающие и закрывающие теги до и после этого слова.
Пример: это приговор текста.
Как видите, у нас есть одно поле (абзац), которое содержит содержание предложения, плюс второе поле ( сильный пара тегов), что выделяет это слово жирным шрифтом.
При вложении тегов закрывайте теги в порядке, обратном их открытию. Вы открываете
сначала, затем , что означает, что вы измените это и закроете а затем.
Еще один способ подумать об этом - еще раз использовать аналогию с коробками. Если вы помещаете коробку в другую коробку, вам нужно закрыть внутреннюю, прежде чем вы сможете закрыть внешнюю или содержащую коробку.
Добавление дополнительных вложенных тегов
Что, если вы хотите, чтобы было одно или два слова полужирный, а другой - курсивом? Вот как это сделать.
Пример: это приговор текста, а также текст, выделенный курсивом тоже.
Вы можете видеть, что наша внешняя коробка,
, теперь в нем есть два вложенных тега - и . Они оба должны быть закрыты, прежде чем можно будет закрыть этот контейнер.
Пример: это приговор текста, а также текст, выделенный курсивом тоже.
Это еще один абзац.
В данном случае коробки внутри коробок! Самая внешняя коробка - это
или а. разделение. Внутри этого ящика есть пара вложенных. теги абзацев, а внутри первого абзаца у нас есть следующий. а также пара тегов.Почему вам нужно заботиться о вложении
Причина №1, по которой вам следует позаботиться о вложенности, - это использование CSS. Каскадные таблицы стилей полагайтесь на то, что теги будут последовательно вложены в документ, чтобы можно было определить, где стили начинаются и заканчиваются. Из-за неправильной вложенности браузеру сложно понять, где применить эти стили. Давайте посмотрим на HTML:
Пример: это приговор текста, а также текст, выделенный курсивом тоже.
Это другой абзац.
Используя приведенный выше пример, если бы мы хотели написать CSS стиль это повлияет на ссылку внутри этого раздела, и только на эту ссылку (в отличие от любых других ссылок в других разделах страницы), нам нужно будет использовать вложенность для написания этого стиля как такового:
.main-content a {
цвет: # F00;
}
Прочие соображения
Доступность и совместимость с браузером тоже имеют значение. Если ваш HTML-код вложен неправильно, он будет не так доступен для программ чтения с экрана и старых браузеров - и может даже полностью нарушить внешний вид страницы, если браузеры не могут понять, как правильно отобразить страницу, потому что элементы и теги HTML находятся вне место.
Наконец, если вы стремитесь написать полностью правильный и действительный HTML, вам необходимо использовать правильное вложение. В противном случае каждый валидатор пометит ваш HTML как неправильный.