Вмъкване на HTML тагове

Как да Nest HTML Tags правилно

Ако погледнете HTML маркировката за която и да е уеб страница днес, ще видите HTML елементи, съдържащи се в други HTML елементи. Тези елементи, които са "вътре" на други, са известни като "вложени елементи" и те са от съществено значение за изграждането на която и да е уеб страница днес.

Какво означава да HTML кодове за гнездо?

Най-лесният начин да разберете гнездяването е да мислите HTML таговете като полета, които съдържат вашето съдържание. Съдържанието ви може да включва текст, изображения и т.н. HTML таговете са полетата около съдържанието. Понякога трябва да поставите кутии в други кутии. Тези "вътрешни" кутии са вложени в други.

Ако имате блок от текст, който искате да е получер в даден абзац, ще имате два HTML елемента, както и самият текст.

Пример: Това е изречение от текст.

Този текст е това, което ще използваме като наш пример. Ето как ще бъде написано това.

Пример: Това е изречение от текст.

Тъй като искате думата "изречение" да е смела, добавете отваряне и затваряне на удебелени тагове преди и след това.

Пример: Това е изречение на текст.

Както можете да видите, имаме една кутийка (параграф), която съдържа съдържанието / текста на нашето изречение, плюс второ поле (силната двойка тагове), което ще направи тази дума по-смела.

Когато поставяте маркери, е изключително важно да затворите етикетите в обратен ред, в който сте ги отворили. Отваряте първо

, последван от , което означава, че го обърнете и затворете и след това .

Друг начин да помислите за това е отново да използвате аналогията на кутиите. Ако поставите кутия в друга кутия, трябва да затворите вътрешната, преди да затворите външната или съдържащата кутия.

Добавяне на повече вложени вериги

Какво ще стане, ако искаш само една или две думи да бъдат смели и друг набор да бъде курсив? Ето как да направите това.

Пример: Това е изречение на текст и също има курсив текст .

Можете да видите, че нашата външна кутия,

, вече има два вградени маркера в нея - и . Те трябва да бъдат затворени, преди съдържащата кутия да бъде затворена.

Пример: Това е изречение на текста и също има курсив текст .

/ p>

В този случай имаме кутии вътре в кутиите! Най-голямата кутия е

или "разделение". Вътре в тази кутия има двойка вложени маркери за параграфи, а в първия абзац имаме следващи двойки и тагове. Още веднъж, погледнете всяка уеб страница днес и ще видите това и много повече гнездене се случва! Ето как са създадени страниците - кутии в кутиите.

Защо трябва да се грижите за гнездяването

Най-важната причина, поради която трябва да се грижите за гнездяването, е дали ще използвате CSS. Каскадните стилови листове разчитат на етикетите, за да бъдат последователно вложени в документа, така че да могат да разберат къде стилите започват и завършват. Ако сте настроили стил, който да засяга всички "връзки, които са вътре в раздела с класа на" основно съдържание "" текст на страницата, неправилното гнездене прави трудно браузърът да знае къде да приложи тези стилове. Нека да разгледаме някои HTML:

Пример: Това е изречение на текста и също има курсив текст . > Това е друг параграф .

Използвайки примера, който току-що казах, ако искам да напиша CSS стил, който би повлиял на връзката вътре в това разделение и само тази връзка (за разлика от всички други връзки в други части на страницата), ще трябва да използвам гнездящ да пиша моя стил, като такъв:

.main-content а {цвят: # F00; }

Други причини са достъпността и съвместимостта на браузъра. Ако вашият HTML е неправилно вложен, той няма да бъде толкова достъпен за екранни четци и по-стари браузъри - и дори може да наруши визуалния облик на страница, ако браузърите не могат да разберат как да прави правилно страницата, защото HTML елементите и маркерите са на място.

И накрая, ако се стремите да напишете напълно правилен и валиден HTML, ще трябва да използвате правилното гнездене. В противен случай всеки валидатор ще означи вашия HTML като неправилен.