HTML: structura și elementele semantice — HTML & CSS de la zero

HTML descrie conținutul unei pagini prin „etichete" (tag-uri) care înconjoară textul și îi dau sens: acesta e un titlu, acesta un paragraf, aceasta o listă. Scris corect, HTML-ul e „semantic" — fiecare element spune ce este, nu cum arată. Semantica bună ajută cititoarele de ecran, motoarele de căutare și pe tine, când revii peste șase luni.

Anatomia unui element

Un element are de obicei o etichetă de deschidere, conținut și o etichetă de închidere. Unele elemente se închid singure (imagini, întreruperi de rând). Elementele pot avea atribute care le configurează, de exemplu adresa unui link sau sursa unei imagini.

Structura obligatorie a paginii

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Titlul din tab</title>
</head>
<body>
  <!-- conținutul vizibil -->
</body>
</html>

Elemente semantice de conținut

h1–h6: titluri, în ordine ierarhică. Un singur h1 per pagină.
p: paragraf de text.
ul / ol cu li: liste neordonate / ordonate.
a cu href: link către altă pagină sau secțiune.
img cu src și alt: imagine, cu text alternativ obligatoriu.
strong / em: importanță / accent, nu doar „bold" și „italic".

Elemente semantice de structură

header, nav, main, section, article, aside, footer descriu zonele paginii. Folosește-le în loc de div peste tot — un nav spune „aici e navigația", un div nu spune nimic.

O pagină semantică minimală

<body>
  <header><h1>Blogul meu</h1><nav>...</nav></header>
  <main>
    <article>
      <h2>Primul articol</h2>
      <p>Conținut...</p>
    </article>
  </main>
  <footer><p>&copy; 2026</p></footer>
</body>

Exercițiu

Construiește o pagină „Despre mine" cu: un header cu numele tău ca h1, un main cu 2 paragrafe și o listă cu 3 hobby-uri, o imagine cu alt, și un footer. Verifică în browser că structura e logică fără CSS.

Greșeli frecvente

Folosești div pentru tot, în loc de elemente semantice.
Sari peste niveluri de titlu (h1 apoi direct h4).
Omiți atributul alt la imagini — problemă de accesibilitate și SEO.
Folosești întreruperi de rând repetate pentru spațiere în loc de CSS.
Uiți meta charset UTF-8 și diacriticele apar stricate.

De reținut

Elementele HTML dau sens conținutului, nu aspect.
Structura DOCTYPE / html / head / body e obligatorie.
Titlurile respectă o ierarhie; un singur h1 per pagină.
Preferă elemente semantice în locul lui div.

Pe scurt

HTML semantic descrie ce este fiecare bucată de conținut. O pagină bine structurată e logică și utilizabilă chiar înainte de a adăuga o linie de CSS.