Ce este semantică în contextul dezvoltării web…

Semantica în dezvoltarea web reprezintă utilizarea etichetelor HTML în conformitate cu scopul lor semantic, nu doar pentru stilizare. Aceasta ajută la descrierea structurii și sensului conținutului, făcând pagina web mai ușor de înțeles pentru browsere, motoare de căutare, cititoare de ecran și alți parsatori.

Principalele avantaje ale marcajului semantic:

Accesibilitate: Îmbunătățește interacțiunea cu site-ul pentru persoanele cu dizabilități care folosesc cititoare de ecran.
SEO: Ajută motoarele de căutare să înțeleagă mai bine structura și conținutul paginii, influențând pozitiv clasamentul.
Ușurința în întreținere: Face codul mai ușor de citit și înțeles pentru alți dezvoltatori.
Compatibilitate: Asigură afișarea corectă a conținutului pe diferite dispozitive și browsere.

Exemple de etichete semantice în HTML5:

<header>: Reprezintă introducerea sau navigația pentru întregul document sau o secțiune specifică.
<nav>: Reprezintă un grup de linkuri de navigare.
<main>: Reprezintă conținutul principal al documentului.
<article>: Reprezintă un fragment de conținut complet și autonom, care poate fi distribuit independent (de exemplu, o postare pe blog, o știre).
<section>: Reprezintă o secțiune independentă de conținut în document.
<aside>: Reprezintă conținut care este indirect legat de conținutul principal al paginii (de exemplu, o bară laterală).
<footer>: Reprezintă subsolul pentru întregul document sau o secțiune specifică.
<figure> și <figcaption>: Reprezintă un element media (imagine, diagramă etc.) și descrierea sa.
<time>: Reprezintă data și ora.

Compararea abordării semantice și non-semantice:

Non-semantic	Semantice
Utilizarea `<div>` și `<span>` pentru tot	Utilizarea etichetelor specifice (`<header>`, `<nav>`, `<article>`)
Descrierea structurii prin clase (`class="header"`)	Utilizarea etichetelor care descriu în mod inerent structura
Dependența de CSS pentru înțelegerea structurii	Structura este înțeleasă din codul HTML

Exemplu de markup non-semantic:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Acasă</a></li>
      <li><a href="#">Despre</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Titlu</h2>
    <p>Conținut...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Exemplu de markup semantic:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Acasă</a></li>
      <li><a href="#">Despre</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Titlu</h2>
    <p>Conținut...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

Marcajul semantic nu înlocuiește CSS pentru stilizare, dar face ca documentul HTML să fie mai informativ și mai util pentru diferiți consumatori de conținut.

Ce este semantică în contextul dezvoltării web?