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