Ако погледнете HTML надценка за всяка уеб страница днес ще видите HTML елементи, съдържащи се в други HTML елементи. Тези елементи, които са "вътре" на други елементи, са известни като вложени елементи, и те са от съществено значение за изграждането на всяка уеб страница днес.
Какво означава влагане на HTML тагове?
Най-лесният начин да разберете гнезденето е да мислите HTML тагове като кутии, които съдържат съдържанието ви. Вашето съдържание може да включва текст, изображения и сродни медии. HTML таговете са полетата около съдържанието. Понякога трябва да поставите кутии вътре в други кутии. Тези "вътрешни" кутии са вложени вътре в други.
Ако имате блок текст, който искате да бъде удебелен в даден абзац, ще имате два HTML елементи както и самият текст.
Пример: Това е изречение от текст.
Този текст ще използваме като пример. Ето как би било написано в HTML:
Пример: Това е изречение от текст.
Да направи думата изречение получер, добавете отварящи и затварящи тагове преди и след тази дума.
Пример: Това е a изречение на текста.
Както можете да видите, имаме едно поле (абзац), което съдържа съдържанието на изречението, плюс второ поле ( силен tag двойка), което прави тази дума получер.
Когато влагате тагове, затворете маркерите в обратния ред, в който сте ги отворили. Отваряте
първо, последвано от , което означава, че обръщате това и затваряте и след това.
Друг начин да се мисли за това е да се използва отново аналогията на кутиите. Ако поставите кутия в друга кутия, трябва да затворите вътрешната, преди да можете да затворите външната или съдържащата кутия.
Добавяне на още вложени етикети
Ами ако искате да бъде само една или две думи удебелен, а друг набор да е в курсив? Ето как да направите това.
Пример: Това е a изречение на текста и също има някои текст в курсив също.
Можете да видите, че нашата външна кутия,
, сега има два вложени етикета вътре - и . И двете трябва да бъдат затворени, преди да може да се затвори тази съдържаща кутия.
Пример: Това е a изречение на текста и също има някои текст в курсив също.
Това е друг параграф.
В този случай имаме кутии вътре в кутии! Най-външната кутия е
или а. разделение. Вътре в това поле има чифт вложени. абзацни етикети, а вътре в първия абзац имаме следващ. и двойка тагове.Защо трябва да се грижите за гнезденето
Причината номер 1, поради която трябва да се грижите за влагането, е дали ще използвате CSS. Каскадни таблици със стилове разчитайте на таговете да бъдат последователно вложени в документа, за да може той да каже къде стиловете започват и свършват. Неправилното влагане затруднява браузъра да знае къде да приложи тези стилове. Нека да разгледаме някои HTML:
Пример: Това е a изречение на текста и също има някои текст в курсив също.
Това е друг параграф.
Използвайки горния пример, ако искахме да напишем a CSS стил което би повлияло на връзката в това разделение и само тази връзка (за разлика от всякакви други връзки в други раздели на страницата), ще трябва да използваме вложеното, за да напишем този стил като такъв:
.main-content a {
цвят: # F00;
}
Други съображения
Достъпността и съвместимостта на браузъра също имат значение. Ако вашият HTML е неправилно вложен, той няма да бъде толкова достъпен за екранни четци и по-стари браузъри - и дори може напълно да наруши визуален външен вид на страница, ако браузърите не могат да разберат как правилно да изобразят страница, тъй като HTML елементите и маркерите са извън място.
И накрая, ако се стремите да напишете напълно правилен и валиден HTML, ще трябва да използвате правилно влагане. В противен случай всеки валидатор ще маркира вашия HTML като неправилен.