Gniježđenje HTML oznaka

Kako ispravno zacrkati HTML oznake

Ako danas gledate HTML oznaku za bilo koju web stranicu, vidjet ćete HTML elemente sadržane u drugim HTML elementima. Ti elementi koji su "unutra" drugih poznati su kao "ugniježđeni elementi" i bitni su za izgradnju bilo koje web stranice danas.

Što znači to Nest HTML oznake?

Najlakši način za razumijevanje gniježđenja je da mislite na HTML oznake kao polja koja sadrže vaš sadržaj. Vaš sadržaj može sadržavati tekst, slike itd. HTML oznake su okviri oko sadržaja. Ponekad morate staviti kutije unutar drugih kutije. Te "unutarnje" kutije su ugniježđene unutar drugih.

Ako imate blok teksta koji želite podebljati unutar odlomka, imat ćete dva HTML elementa, kao i sam tekst.

Primjer: Ovo je rečenica teksta.

Taj tekst je ono što ćemo koristiti kao naš primjer. Evo kako će biti pisano.

Primjer: Ovo je rečenica teksta.

Budući da želite da riječ "rečenica" bude podebljana, dodajte otvaranje i zatvaranje bold oznaka prije i poslije toga.

Primjer: Ovo je rečenica teksta.

Kao što vidite, imamo jednu kutija (odlomak) koji sadrži sadržaj / tekst naše rečenice, plus drugi kutić (jaki oznaku), koji će ta riječ učiniti podebljano.

Kada umnožite oznake, ključno je da zatvorite oznake u suprotnom redoslijedu koji ste ih otvorili. Prvo otvorite

, a zatim , što znači da je obrnuto i zatvorite , a zatim .

Drugi način razmišljanja o tome je ponovno koristiti analogiju kutije. Ako stavite kutiju unutar drugog okvira, morate zatvoriti unutarnju prije nego što zatvorite okvir vanjskog ili sloja.

Dodavanje dodatnih ugniježđenih oznaka

Što ako želite samo jednu ili dvije riječi biti podebljane, a druga će biti kurziv? Evo kako to učiniti.

Primjer: Ovo je rečenica teksta i također sadrži neki stisnuti tekst .

Možete vidjeti da naš vanjski okvir,

, sad ima dvije ugniježđene oznake: i . Obje moraju biti zatvorene prije nego što se kutija za zatvaranje može zatvoriti.

Primjer: Ovo je rečenica teksta i također sadrži neki tekst .

Ovo je još jedan odlomak. / p>

U ovom slučaju imamo kutije unutar kutije! Najizloženija kutija je

ili "podjela". Unutar tog okvira nalaze se par ugniježđenih oznaka stavki, a unutar prvog stavka imamo sljedeći tag par i . Još jednom, pogledajte bilo koju web stranicu danas i vidjet ćete ovo i još mnogo gniježđenja događa! Tako se grade stranice - kutije unutar kutije.

Zašto biste trebali brinuti o gniježđenju

Brojni razlog zbog kojeg biste trebali brinuti o gniježđenju jest ako koristite CSS. Kaskadne sheme stila oslanjaju se na oznake da se dosljedno ugniježđuju unutar dokumenta tako da može otkriti gdje se stilovi počinju i završavaju. Ako postavite stil koji bi trebao utjecati na sve "veze unutar dijeljenja s klasom" glavnog sadržaja "" teksta na stranici, netočno gniježđenje čini pregledniku teško da zna gdje primijeniti te stilove. Pogledajmo neki HTML:

Primjer: Ovo je rečenica teksta i također sadrži neki tekst .

Ovo je drugi stavak .

Koristeći primjer koji sam upravo izjavio, ako bih želio napisati stil CSS-a koji bi utjecao na vezu unutar ove odjeljke, a samo to povezivanje (za razliku od bilo kojih drugih veza u drugim odjeljcima stranice), trebalo bih upotrijebiti gnijezdeći da pišem svoj stil, kao takav:

.main-sadržaj {color: # F00; }

Ostali razlozi uključuju dostupnost i kompatibilnost preglednika. Ako je vaš HTML pogrešno ugniježđen, neće biti jednako pristupačan čitačima zaslona i starijim preglednicima - i može čak i potpuno uništiti vizualni izgled stranice ako preglednici ne mogu shvatiti kako pravilno prikazati stranicu jer su HTML elementi i oznake su izvan mjesta.

Naposljetku, ako pokušavate napisati potpuno točan i valjan HTML, morat ćete upotrijebiti ispravno gniježđenje. Inače, svaki validator označit će vaš HTML kao netočan.