Înainte de apariția CSS, în HTML aveam elemente prin care se putea formata textul. <b> pentru text îngroșat (bold), <i> pentru text înclinat (italic), ș.a. Din motive de compatibilitate cu site-urile foarte vechi, acesta încă sunt afișate corespunzător de către browser. Însă nu mai sunt recomandate, ci ar trebui să folosim doar CSS pentru formatare.
Capitolul 2: HTMLElemente semantice
Începând cu HTML5, au fost introduse elemente care ajută la gruparea diferitelor secțiuni ale paginii, în funcție de utilitate. Această informație poate ajuta diferite aplicații. De exemplu, motoarele de căutare (precum Google) pot să dea mai multă importanță anumitor secțiuni.
Multe din aceste elemente au fost introduse la începutul anilor 2010 și sunt mai mult adaptate la modul în care erau construite paginile web atunci și acum în mare măsură. Din punct de vedere vizual, nu schimbă modul de afișare, dar pot fi stilizate în CSS.
Elemente block
Elementele block se întind pe toată lățimea pe care o au la dispoziție.
<header> poate include numele site-ului, logo-ul, și alte elemente pe care de obicei le găsim în partea de sus a paginii. Mai poate fi folosit într-un articol sau o secțiune. Ai grijă să nu confunzi cu <head>.
<footer> include elemente pe care le găsim de obicei la sfârșitul paginii: informații de contact, link-uri spre alte pagini, informații legale ș.a. Mai poate fi folosit într-un articol sau o secțiune.
<main> Include elementele mai importante de pe pagină.
<article> Reprezintă un singur articol, orice ar însemna asta pentru pagină. Poate fi vorba de un articol de pe un blog sau site de știri, imagine dintr-o galerie, sau orice are sens.
<aside> Include elemente mai puțin importante, cum ar fi cele dintr-un sidebar.
<section> Include elemente ce nu pot fi catalogate în alt fel, dar reprezintă o secțiune distinctă.
<nav> Marchează un meniu.
Atunci când nu se potrivește niciun element semantic, dar ai nevoie să pui un element, poți folosi elementul generic <div>.
Exemplu
Iată un exemplu comun de afișare în pagină al elementelor semantice:
<header>
<h1>ScoalaWeb</h1>
<nav>...</nav>
</header>
<aside>
<nav>...</nav>
</aside>
<main>
<section>
<h2>Promovate</h2>
<article>...</article>
<article>...</article>
</section>
<section>
<article>...</article>
<article>...</article>
</section>
</main>
<footer>
© 2025 Cornel
<nav>...</nav>
</footer>
Elemente inline
Elementele inline sunt elemente ce pot fi introduse în mijlocul unui text (în-linie). Unele din acestea sunt afișate în mod diferit de către browser, dar nu ar trebui să le folosim pentru formatare, ci doar pentru semnificația lor.
<em> marchează un text de accentuat (emphasis).<strong> marchează un text foarte important.<small> marchează un text mai puțin important. <del> marchează un text șters.<sub> marchează un subscript (exemplu).<sup> marchează un superscript (exemplu).
Dacă ai nevoie să folosești un element inline, dar niciunul nu se potrivește, poate dacă vrei să formatezi textul fără să îi schimbi semnificația, poți folosi elementul <span>.