Cum să folosești elemente HTML semantice — ghid practic

DodaTech Updated 2025-01-15 2 min read

In this tutorial, you'll learn about Cum să folosești elemente HTML semantice. We cover key concepts, practical examples, and best practices.

Elementele HTML semantice descriu clar sensul conținutului — atât pentru dezvoltatori, cât și pentru motoarele de căutare și cititoarele de ecran.

The Problem

Mulți dezvoltatori folosesc încă <div>-uri pentru toate secțiunile paginii, pierzând avantajele de SEO, accesibilitate și mentenanță pe care le oferă elementele semantice.

The Wrong Way

<div class="header">
  <div class="nav">Meniu</div>
</div>
<div class="main">
  <div class="section">Conținut</div>
</div>
<div class="footer">Copyright</div>

Probleme: Fără sens semantic, motoarele de căutare nu înțeleg structura, iar cititoarele de ecran nu pot naviga eficient.

The Right Way

<header>
  <nav>
    <ul>
      <li><a href="/">Acasă</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Articole recente</h2>
    <article>
      <h3>HTML Semantic</h3>
      <p>Ghid complet despre elementele semantice...</p>
    </article>
  </section>

  <aside>
    <h3>Link-uri utile</h3>
    <ul>
      <li><a href="/ghid">Ghid HTML</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2025 DodaTech</p>
</footer>

Step-by-Step Fix

1. Înlocuiește `<div>` cu elemente semantice

Element	Rol
`<header>`	Antetul paginii sau al unei secțiuni
`<nav>`	Navigația principală
`<main>`	Conținutul principal unic
`<section>`	Grup tematic de conținut
`<article>`	Conținut independent (blog, news)
`<aside>`	Conținut secundar (sidebar)
`<footer>`	Subsolul paginii

2. Structurează ierarhic

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <section>
      <article>...</article>
    </section>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</body>

Prevention Tips

Fiecare pagină trebuie să aibă un singur <main>
<header> și <footer> pot apărea de mai multe ori (per articol, per secțiune)
Nu pune <nav> în <nav> — un nivel e suficient
Folosește heading-uri (<h1>–<h6>) în fiecare secțiune

Common Mistakes

Div-uri peste tot — în loc de elemente semantice, se folosesc <div> cu clase CSS
Main multiplu — o pagină trebuie să conțină un singur <main>
Nav în nav — navigațiile nu se cuibăresc una în alta
Section fără heading — fiecare <section> ar trebui să aibă un titlu
Articol nejustificat — <article> e doar pentru conținut independent, nu pentru orice secțiune

FAQ

### Ce înseamnă HTML semantic?

HTML semantic folosește tag-uri care descriu sensul conținutului (de exemplu, <article>, <nav>) în loc de tag-uri generice precum <div>.

Ajută elementele semantice la SEO?

Da, Google și alte motoare de căutare folosesc structura semantică pentru a înțelege mai bine conținutul și a-l indexa corect.

Am nevoie de elemente semantice pentru accesibilitate?

Da, cititoarele de ecran (screen readers) folosesc elementele semantice pentru a naviga rapid între secțiuni.

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.

← Previous Cum să folosești meta tag-uri HTML — ghid SEO și social Next → Cum să creezi tabele HTML — ghid complet

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Quick Fix