Asa cum am vazut in cazul elementului <html></html>, includerea unor elemente in alte elemente este unul dintre cele primele lucruri pe care le vom face cand construim pagini web.
Pentru a crea pagini mai complexe vom fi nevoiti sa combinam elementele intre ele, nu doar sa le scriem consecutive.
Un cuvant special
De exemplu, am vrea intr-un paragraf ca primul cuvant sa iasa in evidenta.
Pentru aceasta, vom cuprinde primul cuvant din paragraf intr-un element special:
<p>
<strong>acest</strong> cuvant va fi ingrosat
</p>Iar rezultatul va fi:
acest cuvant va fi ingrosat
Tag-ul pentru a scoate un cuvand in evidenta este: <strong></strong>, iar vizual este similar cu ceea ce face butonul Bold dintr-un editor de text.
Ce este important cand folosim un element in interiorul altui element, este sa il inchidem inainte ca parintele lui sa se inchida.
De exemplu, daca vom folosi aceste tag-uri si pentru ultimul cuvant din paragraf, dar vom scrie tag-ul de inchidere </strong> dupa </p>, codul ar arata astfel:
<p>acest cuvant va fi <strong>ingrosat</p></strong>
Textul tot va arata bine:
acest cuvant va fi ingrosat
Si aceasta se intampla pentru ca HTML este un limbaj permisiv. El incearca sa interpreteze ce am vrut noi sa spunem, desi nu este corect semantic.
Este ca si cum am pune punctul de sfarsit de propozitie inainte de ultimul cuvant. In acest caz poate ca arata cat de cat bine, dar nu stim cum se va comporta acest cod in alte browsere.
Asta nu inseamna ca trebuie sa ne bazam pe acest lucru si sa scriem ordinea tag-urilor gresit.
Copiii unui element
In urmatorul caz, elementul <p></p> se numeste parinte:
<p>
<b>acest</b> cuvant va fi <strong>ingrosat</strong>
</p>
Iar elementele <strong></strong> sunt copii lui.
Pentru ca acest cod sa fie corect, este foarte important ca aceste elemente sa fie incluse in intregime in parintele lor.
Asta inseamna sa inceapa dupa tag-ul de deschidere al parintelui si sa se inchida inainte de tag-ul de inchidere al lui.