HTML tag-uri HTML

Cum să HTML tag-uri Nest corect

Dacă vă uitați la marcajul HTML pentru orice pagină de astăzi, veți vedea elemente HTML conținute în alte elemente HTML. Aceste elemente care sunt "înăuntru" ale altora sunt ceea ce se numește "elemente imbricate" și ele sunt esențiale pentru construirea oricărei pagini web astăzi.

Ce inseamna tag-uri HTML pentru Nest?

Cel mai simplu mod de a înțelege cuibăritul este să gândiți la etichetele HTML ca la casetele care conțin conținutul. Conținutul dvs. poate include text, imagini etc. Etichetele HTML sunt casetele din jurul conținutului. Uneori, trebuie să plasați cutii în interiorul altor cutii. Aceste cutii "interioare" sunt imbricate în interiorul altora.

Dacă aveți un bloc de text pe care doriți să-l bold într-un paragraf, veți avea două elemente HTML , precum și textul în sine.

Exemplu: Aceasta este o propoziție de text.

Acest text este ceea ce vom folosi ca exemplu. Iată cum va fi scris.

Exemplu: Aceasta este o propoziție de text.

Pentru că doriți ca cuvântul "propoziție" să fie îndrăzneț, adăugați deschiderea și închiderea etichetelor îndrăznețe înainte și după aceea.

Exemplu: Aceasta este o propoziție a textului.

După cum puteți vedea, avem o casetă (paragraful) care conține conținutul / textul propoziției noastre, plus oa doua casetă (perechea puternică de etichete), care va face ca acel cuvânt să fie aldin.

Când creezi etichete, este foarte important să închizi etichetele în ordinea inversă pe care le-ai deschis. Deschideți mai întâi

, urmat de , ceea ce înseamnă că inversați și închideți și apoi .

Un alt mod de a gândi este să folosim încă o dată analogia cutiilor. Dacă plasați o cutie într-o altă cutie, trebuie să închideți interiorul înainte de a închide caseta exterioară sau care conține.

Adăugarea mai multor etichete nesecate

Ce se întâmplă dacă doriți doar unul sau două cuvinte să fie îndrăznețe și altul să fie italic? Iată cum să faceți acest lucru.

Exemplu: Aceasta este o propoziție a textului și are, de asemenea, un text italicizat .

Puteți vedea că cutia noastră exterioară,

, are acum două etichete imbricate în interiorul acesteia - și . Ambele trebuie să fie închise înainte ca acea cutie să poată fi închisă.

Exemplu: Aceasta este o propoziție a textului și are și un text italicizat .

/ p>

În acest caz avem cutii în interiorul cutiilor! Cea mai extinsă casetă este

sau "diviziunea". În interiorul acelei căsuțe se află o pereche de etichete paranteze imbricate, iar în primul paragraf avem o pereche de etichete și următoare. Încă o dată, uitați-vă la orice pagină web de astăzi și veți vedea acest lucru și multe alte cuibări se întâmplă! Acesta este modul în care sunt construite paginile - cutii din interiorul cutiilor.

De ce ar trebui să aveți grijă de hrănire

Primul motiv pentru care ar trebui să vă pasa de cuibărire este dacă intenționați să utilizați CSS. Formatele stil cascadă se bazează pe etichete pentru a fi imbricate consecvent în document, astfel încât să poată spune unde încep și se termină stilurile. Dacă ați configurat un stil care ar trebui să afecteze toate "linkurile care se află în interiorul diviziei, cu o clasă de text" de conținut principal "pe pagină, încorporarea greșită face dificil browserul să știe unde să aplice aceste stiluri. Să ne uităm la câteva coduri HTML:

Exemplu: Aceasta este o propoziție a textului și are de asemenea un text italicizat . > Acesta este un alt paragraf .

Folosind exemplul pe care tocmai l-am afirmat, dacă aș vrea să scriu un stil CSS care ar avea impact asupra legăturii din interiorul acestei diviziuni și numai acel link (spre deosebire de orice alte linkuri din alte secțiuni ale paginii), aș fi nevoit să folosesc cuiburi pentru a scrie stilul meu, ca atare:

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

Alte motive includ compatibilitatea cu accesibilitatea și browserul. Dacă HTML-ul dvs. este imbricat incorect, acesta nu va fi la fel de accesibil pentru cititorii de ecran și browserele mai vechi - și ar putea chiar să rupă aspectul vizual al unei pagini în cazul în care browserele nu își pot da seama cum să renderă corect o pagină, deoarece elementele HTML și etichetele sunt în afara locului.

În cele din urmă, dacă vă străduiți să scrieți cod HTML complet corect și valid, va trebui să utilizați corect încadrarea. În caz contrar, fiecare validator vă va semnala codul HTML ca incorect.