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