Structură și semantică

Scheletul documentului și tag-urile care descriu conținutul.

Actualizat 8 octombrie 2026

Ce este HTML

HTML (HyperText Markup Language) descrie structura și sensul conținutului: „asta e un titlu”, „asta e o listă”, „asta e navigația”. Nu e limbaj de programare — nu are logică, doar marchează conținut.

Un element = tag de deschidere + conținut + tag de închidere:

<a href="/blog" class="link">Blog</a>

anumele tag-ului
href="/blog" class="link"atribute
Blogconținut
</a>tag de închidere

Atributele dau informații în plus (href, class, id, alt).
Unele elemente sunt void — n-au conținut și nici tag de închidere: <img>, <input>, <br>, <meta>.
Elementele se imbrică și formează un arbore — din el browserul construiește DOM-ul.

Structura unui document

<!doctype html>
<html lang="ro">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Titlul paginii</title>
  </head>
  <body>...</body>
</html>

Parte	Rol
`<!doctype html>`	modul standard al browserului (fără el intră în „quirks mode”, cu reguli vechi)
`lang="ro"`	limba — pentru screen reader, traducere automată, SEO
`<head>`	metadate, invizibile: encoding, titlu, viewport, link-uri CSS
`viewport`	fără el, pe mobil pagina apare micșorată ca pe desktop
`<body>`	tot ce vede utilizatorul

În Next.js nu scrii asta de mână — app/layout.tsx generează <html>, <head> și <body>.

Ce înseamnă „semantic”

Semantic = tag-ul spune ce este conținutul, nu cum arată. <div> și <span> nu spun nimic; <nav> spune „aici e navigația”.

De ce contează:

Accesibilitate — screen reader-ele sar direct la <main> sau listează titlurile.
SEO — motoarele de căutare înțeleg ce e important.
Cod lizibil — vezi structura paginii dintr-o privire.
Comportament gratis — <button> e focusabil și merge cu Enter; <div> nu.

Tipuri de elemente

Elemente de structură (landmarks)

Tag	Ce este	Când îl folosești
`<header>`	antet	sus pe pagină sau la începutul unui `article`/`section`
`<nav>`	navigație principală	meniul site-ului, breadcrumbs — nu orice grup de linkuri
`<main>`	conținutul principal	o singură dată pe pagină
`<article>`	conținut independent	ar avea sens și scos din pagină: post, comentariu, card de produs
`<section>`	grup tematic	o parte a paginii care are un titlu propriu
`<aside>`	conținut secundar	sidebar, „articole similare”
`<footer>`	subsol	copyright, linkuri secundare

article vs section: întreabă-te „ar avea sens singur, într-un feed RSS?” Da → article. Nu, e doar o parte a paginii → section.

Block vs inline

	Block	Inline
Exemple	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`, `code`
Ocupă	toată lățimea, începe pe rând nou	doar cât îi trebuie, în textul curent
Pentru	blocuri de conținut	bucăți dintr-un text

<div> și <span> sunt variantele fără sens — folosește-le doar pentru stilizare, când nu există un tag semantic potrivit.

Text

Tag	Sens
`<h1>`…`<h6>`	titluri, ierarhic
`<p>`	paragraf
`<strong>`	important (nu doar „bold”)
`<em>`	accent (nu doar „italic”)
`<ul>` / `<ol>` + `<li>`	listă neordonată / ordonată
`<a href>`	link — duce undeva
`<button>`	buton — face ceva
`<img alt>`	imagine
`<code>`, `<pre>`	cod
`<time datetime>`	dată sau oră citibilă de mașini

Titluri

Un singur <h1> — subiectul paginii.
Nu sări nivele: h1 → h2 → h3, nu h1 → h4.
Alegi nivelul după structură, mărimea o dai din CSS.

Greșeli frecvente

<div onclick> în loc de <button> sau <a>.
Titluri alese după mărime (<h4> pentru că „arată bine”).
Mai multe <main> pe pagină.
<br><br> pentru spațiere — spațierea e treaba CSS-ului.

Pe scurt

HTML = structură și sens, nu aspect.
Folosește tag-ul care descrie conținutul; div/span doar când nu există altul.
Un h1, un main, titluri în ordine.