Nesting HTML Tags

Kako pravilno označiti oznake HTML

Če pogledate oznako HTML za katero koli spletno stran danes, boste videli elemente HTML, ki jih vsebujejo drugi elementi HTML. Ti elementi, ki so "znotraj" drugih, so tisti, ki so znani kot "vgnezdeni elementi", in so bistvenega pomena za gradnjo katere koli spletne strani danes.

Kaj pomeni gnezditi HTML oznake?

Najlažji način razumevanja gnezdenja je zamisliti oznake HTML kot polja, ki vsebujejo vašo vsebino. Vaša vsebina lahko vključuje besedilo, slike itd. HTML oznake so polja okrog vsebine. Včasih morate postaviti škatle v druge okence. Te "notranje" škatle so ugnezdene znotraj drugih.

Če imate blok besedila, ki ga želite krepko premakniti v odstavek, boste imeli dva elementa HTML in sam tekst.

Primer: To je stavek besedila.

To besedilo je tisto, kar bomo uporabili kot naš primer. Tukaj je, kako bi bilo napisano.

Primer: to je stavek besedila.

Ker želite, da je beseda "stavka" krepko, dodate krtačne oznake za odpiranje in zapiranje pred in po njem.

Primer: to je stavek besedila.

Kot lahko vidite, imamo eno polje (odstavek), ki vsebuje vsebino / besedilo našega stavka in drugo polje (močan par oznake), ki bo to besedo označil krepko.

Ko vtipkate oznake, je ključnega pomena, da zapirate oznake v nasprotnem vrstnem redu, kot ste jih odprli. Najprej odprete

, nato pa , kar pomeni, da to spremenite in zaprite in nato .

Drug način razmišljanja o tem je, da znova uporabite analogijo polj. Če postavite polje znotraj druge škatle, morate zapreti notranji, preden lahko zaprete zunanjo ali vsebujočo škatlo.

Dodajanje dodatnih gnezdenih oznak

Kaj, če želite samo eno ali dve besedi biti krepki, drugi pa je ležeči? Evo, kako to storiti.

Primer: to je stavka besedila in ima tudi italicized text .

Vidite lahko, da ima naš zunanji polji

​​v njej dve ugnezdeni oznaki - in . Oba morata biti zaprta, preden je lahko vsebnik zaprt.

Primer: to je stavka besedila in ima tudi italicizirano besedilo .

To je še en odstavek.

V tem primeru imamo škatle v škatlah! Najbolj odsečeno polje je

ali "delitev". V tem polju sta para ugnezdenih oznak odstavka in v prvem odstavku imamo naslednji in oznako para. Še enkrat si oglejte katerokoli spletno stran danes in to boste videli in še več gnezdenja se dogaja! Tako se gradijo strani - škatle v škatlah.

Zakaj bi morali skrbeti za gnezdenje

Prvi razlog, zaradi katerega bi se morali gnezditi, je, če boste uporabljali CSS. Cascading Style Sheets se zanašajo na oznake, ki se v dokumentu dosledno gnezdijo, tako da lahko pove, kje se začnejo in končajo slogi. Če nastavite slog, ki bi moral vplivati ​​na vse "povezave, ki so znotraj razdelka z vrsto besedila" main-content "" na strani, nepravilno gnezdenje otežuje, da brskalnik ve, kje uporabiti te sloge. Oglejmo si nekaj HTML:

Primer: To je stavek besedila in ima tudi italicized text .

To je drug odstavek .

Z uporabo primera, ki sem ga ravnokar navedel, če bi želel napisati slog CSS, ki bi vplival na povezavo znotraj te razdelke, in samo to povezavo (v nasprotju z drugimi povezavami v drugih razdelkih strani), bi morala uporabiti gnezdenje, da bi napisal moj slog, kot tak:

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

Drugi razlogi vključujejo dostopnost in združljivost brskalnika. Če je vaš HTML nepravilno vgnezden, to ne bo tako dostopno bralnikom zaslona in starejšim brskalnikom - lahko pa bi celo popolnoma prekinil vizualni videz strani, če brskalniki ne bodo mogli ugotoviti, kako pravilno narediti stran, ker elementi in oznake HTML so izven kraja.

Končno, če si prizadevate napisati popolnoma pravilen in veljaven HTML, boste morali uporabiti pravilno gnezdenje. V nasprotnem primeru bo vsak potrditveni znak označil vaš HTML kot nepravilen.