Mis on semantilised elemendid HTML-is ja milleks nad on vajalikud?

Semantilised elemendid HTML-is on sildid (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), mis kirjeldavad nende ümbritseva sisu tähenduslikku otstarvet, mitte ainult selle välimust.

Peamised eesmärgid:

• Ligipääsetavus (Accessibility): Aitavad abitehnoloogiatel (näiteks ekraanilugejatel) mõista lehe struktuuri ja sisu, muutes sisu kasutajatele, kellel on piiratud võimalused, kättesaadavaks.
• SEO (Search Engine Optimization): Otsingumootorid indekseerivad ja järjestavad paremini semantilise märgistusega lehti, kuna nad saavad täpsemalt määratleda põhisisu ja selle asjakohasuse otsingupäringutele.
• Arendus ja hooldus: Parandavad koodi loetavust ja hooldatavust, muutes lehe struktuuri teiste arendajate (ja tulevikus ka iseenda) jaoks arusaadavamaks.
• Paranenud struktuuri mõistmine: Annab võimaluse selgelt eristada lehe loogilisi blokke (navigeerimine, põhisisu, jalus jne).

Näide mitte-semantilisest märgistusest:

<div>
  <h2>Artikli pealkiri</h2>
  <p>Artikli sisu...</p>
</div>
<div>
  <h3>Servaala</h3>
  <p>Servaala teave...</p>
</div>

Näide semantilisest märgistusest:

<article>
  <h2>Artikli pealkiri</h2>
  <p>Artikli sisu...</p>
</article>
<aside>
  <h3>Servaala</h3>
  <p>Servaala teave...</p>
</aside>

Semantiliste elementide kasutamine aitab luua paremini struktureeritud, ligipääsetavaid ja otsingumootoritele optimeeritud veebilehti.