Dacă te uiți la HTML marcaj pentru orice pagină web de astăzi, veți vedea elemente HTML conținute în alte elemente HTML. Aceste elemente care se află „în interiorul” altor elemente sunt cunoscute sub numele de elemente imbricateși sunt esențiale pentru construirea oricărei pagini web astăzi.
Ce înseamnă asocierea etichetelor HTML?
Cel mai simplu mod de a înțelege cuibăritul este să vă gândiți Etichete HTML ca casete care conțin conținutul dvs. Conținutul dvs. poate include text, imagini și suporturi conexe. Etichetele HTML sunt casetele din jurul conținutului. Uneori, trebuie să plasați cutii în interiorul altor cutii. Acele cutii „interioare” sunt cuibărite în interiorul altora.
Dacă aveți un bloc de text pe care doriți să îl îndrăzniți î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 ar fi scris în HTML:
Exemplu: Aceasta este o propoziție de text.
Pentru a face cuvântul
propoziție bold, adăugați etichete de deschidere și de închidere înainte și după cuvântul respectiv.Exemplu: Acesta este un propoziție de text.
După cum puteți vedea, avem o casetă (paragraful) care conține conținutul propoziției, plus o a doua casetă ( puternic pereche de etichete), care face ca acest cuvânt să fie îndrăzneț.
Când cuibăriți etichete, închideți etichetele în ordinea opusă în care le-ați deschis. Deschideți
primul, urmat de , ceea ce înseamnă că inversați și închideți și apoi.
Un alt mod de a vă gândi la acest lucru este să folosiți din nou analogia cutiilor. Dacă așezați o cutie într-o altă cutie, trebuie să o închideți pe cea interioară înainte de a putea închide cutia exterioară sau care conține.
Adăugarea mai multor etichete imbricate
Ce se întâmplă dacă doriți doar să fie unul sau două cuvinte îndrăzneț și un alt set care să fie cursiv? Iată cum să faci asta.
Exemplu: Acesta este un propoziție de text și are și unele text cursiv de asemenea.
Puteți vedea că cutia noastră exterioară,
, are acum două etichete imbricate în interior - si . Ambele trebuie închise înainte ca cutia care conține să poată fi închisă.
Exemplu: Acesta este un propoziție de text și are și unele text cursiv de asemenea.
Acesta este un alt paragraf.
În acest caz, avem cutii în interiorul cutiilor! Cutia cea mai exterioară este
sau a. Divizia. În interiorul acelei cutii se află o pereche de cuiburi. etichete de paragraf, iar în interiorul primului paragraf, avem un următor. și pereche de etichete.De ce ar trebui să-ți pese de Nesting
Motivul nr. 1 pentru care ar trebui să-ți pese de cuibărit este dacă vei folosi CSS. Foi de stil în cascadă mizați-vă pe etichete pentru a fi cuibărite în mod constant în document, astfel încât să poată spune unde încep și se termină stilurile. Cuibarea incorectă face dificil pentru browser să știe unde să aplice aceste stiluri. Să vedem câteva HTML:
Exemplu: Acesta este un propoziție de text și are și unele text cursiv de asemenea.
Aceasta este un alt paragraf.
Folosind exemplul de mai sus, dacă am vrea să scriem un Stil CSS care ar afecta legătura din această diviziune și numai acea legătură (spre deosebire de orice alte legături din alte secțiuni ale paginii), ar trebui să folosim cuibărirea pentru a scrie acest stil, ca atare:
.main-content a {
culoare: # F00;
}
Alte considerente
Accesibilitatea și compatibilitatea browserului contează, de asemenea. Dacă codul dvs. HTML este imbricat incorect, acesta nu va fi la fel de accesibil cititorilor de ecran și browserelor mai vechi - și ar putea chiar să rupă complet aspectul vizual al unei pagini dacă browserele nu pot afla cum să redea corect o pagină, deoarece elementele și etichetele HTML sunt în afara loc.
În cele din urmă, dacă te străduiești să scrii HTML complet corect și valid, va trebui să folosești cuiburi corecte. În caz contrar, fiecare validator va semnaliza codul HTML ca incorect.