Šta su semantički elementi u HTML i čemu služe?

Semantički elementi u HTML-u su oznake (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) koje opisuju semantičku svrhu sadržaja koji okružuju, a ne samo njegov izgled.

Glavna svrha:

• Pristupačnost: Pomažu pomoćnim tehnologijama (kao što su čitači ekrana) da razumeju strukturu i sadržaj stranice, čineći sadržaj pristupačnim za korisnike sa ograničenjima.
• SEO (Optimizacija za pretraživače): Stranice sa semantičkom oznakom se bolje indeksiraju i rangiraju od strane pretraživača, jer mogu preciznije odrediti glavni sadržaj i njegovu relevantnost za upite.
• Razvoj i održavanje: Poboljšavaju čitljivost i održivost koda, čineći strukturu stranice jasnijom za druge programere (i za vas u budućnosti).
• Bolje razumevanje strukture: Omogućavaju jasno razdvajanje logičkih blokova stranice (navigacija, glavni sadržaj, podnožje itd.).

Primer ne-semantickog označavanja:

<div>
  <h2>Naslov članka</h2>
  <p>Sadržaj članka...</p>
</div>
<div>
  <h3>Bočni panel</h3>
  <p>Informacije o bočnom panelu...</p>
</div>

Primer semantičkog označavanja:

<article>
  <h2>Naslov članka</h2>
  <p>Sadržaj članka...</p>
</article>
<aside>
  <h3>Bočni panel</h3>
  <p>Informacije o bočnom panelu...</p>
</aside>

Korišćenje semantičkih elemenata doprinosi kreiranju strukturiranijih, pristupačnijih i optimizovanijih web stranica za pretraživače.