MP Web Studio
HTMLTraseu de bază
06 / 120

LECȚIA 06 DIN 120

Structura semantică a paginii

Organizează pagina cu landmarkuri clare.

Sursă oficialăWHATWG HTML — sectionsRevizuit: 2026-08-26
PASUL 1 · ÎNVAȚĂ

Cum funcționează

header, nav, main și footer descriu rolul regiunilor.

Exemplu corect
<header>
  <h1>Studio digital</h1>
  <nav><a href="#servicii">Servicii</a></nav>
</header>
<main id="servicii"><p>Conținut principal.</p></main>
<footer><p>Contact.</p></footer>

Fiecare element comunică rolul regiunii. main apare o singură dată și conține informația dominantă a paginii.

Greșeală frecventă
<div class="header">Titlu</div>
<div class="main">Conținut</div>
<div class="footer">Contact</div>

Clasele sugerează rolul doar dezvoltatorului; elementele semantice îl comunică și browserului și tehnologiilor asistive.

PASUL 2 · APLICĂ

Exercițiul tău

Folosește header, nav cu un link, un singur main și footer.

PASUL 3 · CONSTRUIEȘTE

Scrie și vezi rezultatul

index.htmlHTML
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ

Ce trebuie să treacă

0%neverificat
  • Sunt prezente header, nav, main și footer.
  • Navigația conține un link.
  • Pagina are un singur main.
Explică-mi logica rezolvării

Înlocuiește containerele generice numai când rolul este clar. Păstrează un singur main pentru conținutul dominant.