Vkladanie značiek HTML

Ako HTML tagy hniezdo správne

Ak sa pozriete na značku HTML pre ktorúkoľvek webovú stránku dnes, uvidíte prvky HTML obsiahnuté v iných prvkoch HTML. Tieto prvky, ktoré sú "vnútri" iných, sú známe ako "vnorené elementy" a sú dôležité pre budovanie akejkoľvek webovej stránky dnes.

Čo to znamená HTML tagy hniezda?

Najjednoduchší spôsob, ako pochopiť vnorenie, je premýšľať o značkách HTML ako o rámčekoch, ktoré obsahujú. Váš obsah môže obsahovať text, obrázky atď. Tagy HTML sú rámčeky okolo obsahu. Niekedy musíte umiestniť boxy vnútri iných políčok. Tieto "vnútorné" boxy sú vnorené do iných.

Ak máte blok textu, ktorý chcete vnútri odseku tučným písmom, budete mať dva prvky HTML, ako aj samotný text.

Príklad: Toto je textová veta .

Tento text je to, čo budeme používať ako náš príklad. Tu je, ako by to bolo napísané.

Príklad: Toto je veta textu.

Pretože chcete, aby slovo "veta" bolo tučné, pridáte začiatočné a zatváracie značky pred a po tomto období.

Príklad: Ide o vetu textu.

Ako môžete vidieť, máme jedno políčko (odsek), ktorý obsahuje obsah / text našej vety, plus druhé pole (silný štvorček tagov), ktorý bude robiť toto slovo tučným písmom.

Keď vložíte značky, je veľmi dôležité, aby ste značky zavreli v opačnom poradí, ako ste ich otvorili. Najprv otvoríte

, za ktorým nasleduje , čo znamená, že to zvrátite a zavrite a potom .

Ďalším spôsobom, ako zamyslieť sa nad tým, je znova použiť analógiu krabičiek. Ak umiestnite krabicu do inej krabice, musíte zatvoriť vnútornú skrinku, aby ste mohli zatvoriť vonkajšiu alebo obsahujúcu škatuľu.

Pridávanie viacerých vnorených značiek

Čo ak chcete, aby jedno alebo dve slová boli odvážne a iný súbor bol kurzívou? Tu je postup ako to urobiť.

Príklad: Ide o vetu textu a tiež text kurzívou .

Môžete vidieť, že naša vonkajšia schránka,

, má teraz vnútri dva vnorené značky - a . Musia byť obe zatvorené predtým, než je možné uzavrieť box s obsahom.

Príklad: Jedná sa o vetu textu a má tiež kurzívu .

/ p>

V tomto prípade máme boxy vnútri krabičiek! Najpoužívanejšie pole je

alebo "divízia". Vo vnútri tohto poľa je pár vnorených značiek odseku a v prvom odseku máme ďalší pár a značiek. Znova sa pozrite na každú webovú stránku dnes a uvidíte to a oveľa viac hniezdenia sa deje! Takto sú vytvorené stránky - boxy vnútri políčok.

Prečo by ste mali starať o hniezdenie

Prvým dôvodom, prečo by ste sa mali zaujímať o hniezdenie, je, ak chcete použiť CSS. Kaskádové štýly sa spoliehajú na značky, ktoré majú byť vnorene vnorené do dokumentu, aby dokázali rozpoznať, kde štýly začínajú a končia. Ak nastavíte štýl, ktorý by mal ovplyvniť všetky odkazy, ktoré sa nachádzajú vo vnútri divízie s triedou "hlavného obsahu" textu na stránke, nesprávne vnorenie znemožňuje prehliadaču vedieť, kde tieto štýly používať. Poďme sa pozrieť na niektoré HTML:

Príklad: Je to veta textu a má tiež text kurzívu . > Toto je ďalší odsek .

Použil som príklad, ktorý som práve uviedol, ak by som chcel napísať štýl CSS, ktorý by ovplyvnil spojenie v rámci tejto divízie a len ten odkaz (na rozdiel od akýchkoľvek iných odkazov v iných častiach stránky), musel by som použiť hniezdenie písať môj štýl, ako také:

.main-content a {farba: # F00; }

Medzi ďalšie dôvody patrí dostupnosť a kompatibilita prehliadača. Ak je váš kód HTML nesprávne vnorený, nebude tak prístupný pre čítačky obrazovky a staršie prehliadače - a dokonca by dokonca úplne narušil vizuálny vzhľad stránky, ak prehliadače nemôžu zistiť, ako správne vykresliť stránku, pretože prvky HTML a značky sú na mieste.

Nakoniec, ak sa snažíte napísať úplne správny a správny kód HTML, budete musieť použiť správne vnorenie. V opačnom prípade bude každý validátor označený ako nesprávny kód HTML.