Nesting HTML Tags

Kako pravilno uneti oznake HTML-a

Ako pogledate HTML oznaku za bilo koju web stranicu danas, videćete HTML elemente sadržane u okviru drugih HTML elementa. Ovi elementi koji su "iznutra" drugih su ono što su poznate kao "ugneženi elementi", i od suštinskog su značaja za izgradnju bilo koje web stranice danas.

Šta znači gnezdo HTML oznake?

Najjednostavniji način razumevanja gnezda je razmišljanje o HTML oznakama kao kutije koje sadrže vaš sadržaj. Vaš sadržaj može sadržati tekst, slike i sl. HTML oznake su kutije oko sadržaja. Ponekad morate staviti kutije u druge kutije. Ove "unutrašnje" kutije su ugnježene unutar drugih.

Ako imate blok teksta koji želite bold u paragrafu, imate dva HTML elementa, kao i sam tekst.

Primer: Ovo je rečenica teksta.

Taj tekst je ono što ćemo koristiti kao primer. Evo kako će to biti napisano.

Primer: Ovo je rečenica teksta.

Zato što želite da reč "rečenica" bude označena boldom, dodate otvaranje i zatvaranje bold oznaka pre i poslije toga.

Primer: Ovo je rečenica teksta.

Kao što vidite, imamo jednu kutiju (pasus) koja sadrži sadržaj / tekst naše rečenice, plus drugu kutiju (jak par para), koji će ovu riječ označiti boldom.

Kada zatvorite oznake, veoma je važno da zatvorite oznake u suprotnom redosledu kojim ste ih otvorili. Prvo otvorite

, a zatim , što znači da to promenite i zatvorite a zatim .

Drugi način razmišljanja o tome je još jednom da iskoristi analogiju kutija. Ako postavite kutiju u neku drugu kutiju, morate zatvoriti unutrašnju, pre nego što zatvorite spoljašnju ili sadrži kutiju.

Dodavanje još ugrađenih oznaka

Šta ako samo želite jednu ili dve reči biti odvažene, a drugo da bude kurziv? Evo kako to učiniti.

Primer: Ovo je rečenica teksta i takođe ima i neki .

Možete videti da naša spoljašnja kutija,

, sada sadrži dvije ugnežene oznake unutar nje - i . Oni moraju biti zatvoreni pre nego što se sadržaj koji se nalazi može zatvoriti.

Primer: Ovo je rečenica teksta i takođe ima i italicizirani tekst .

Ovo je još jedan pasus.

U ovom slučaju imamo kutije unutar kutija! Najkasnije polje je

ili "podjela". Unutar tog okvira nalaze se dve ugnežene oznake pasusa, au prvom pasusu imamo sledeći i tag par. Još jednom, pogledajte bilo koju web stranicu danas i videćete ovo i mnogo više gnezda! Tako se izgrade stranice - kutije unutar kutija.

Zašto biste se trebali brinuti o gnezdi

Jedan razlog zbog kojeg biste trebali biti gnezdo jeste da li ćete koristiti CSS. Kaskadni listovi stilova se oslanjaju na oznake da bi se dosledno ugnežavali u dokumentu tako da može da otkrije gde se načini počinju i završavaju. Ako podesite stil koji bi trebalo da utiče na sve "veze koje se nalaze unutar odjela sa klasom" glavnog sadržaja "teksta na stranici, netačno gneženje otežava pretraživaču da zna gde da primenjuje ove stilove. Pogledajmo neki HTML:

Primer: Ovo je rečenica teksta i takođe ima i italicized text .

Ovo je drugi stav .

Koristeći primjer koji sam upravo rekao, ako bih želeo napisati CSS stil koji bi utjecao na vezu unutar ove podjele, a samo tu vezu (za razliku od drugih veza u drugim dijelovima stranice), trebao bih koristiti gneženje da napišem svoj stil, kao takav:

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

Drugi razlozi uključuju pristupačnost i kompatibilnost pretraživača. Ako je vaš HTML pogrešno ugrađen, on neće biti dostupan čitačima ekrana i starijim pregledačima - i čak bi mogao potpuno da prekine vizuelni izgled stranice ako pretraživači ne mogu shvatiti kako pravilno praviti stranicu jer HTML elementi i oznake nisu na mjestu.

Konačno, ako se trudite da napišete potpuno tačan i važeći HTML, potrebno je da koristite tačno gnezdo. U suprotnom, svaki validator će označiti HTML kao netačan.