Kas yra semantiniai elementai HTML ir kam jie skirti?

Semanetiniai HTML elementai yra žymės (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), kurie apibūdina jų apimto turinio semantinę paskirtį, o ne tik jo išvaizdą.

Pagrindinis tikslas:

• Prieinamumas: Padeda pagalbinėms technologijoms (pvz., ekrano skaitytuvams) suprasti puslapio struktūrą ir turinį, padarant turinį prieinamą naudotojams su ribotomis galimybėmis.
• SEO (Paieškos sistemų optimizavimas): Semantiniai žymėjimai geriau indeksuojami ir reitinguojami paieškos sistemų, nes jos gali tiksliau nustatyti pagrindinį turinį ir jo aktualumą užklausoms.
• Kūrimas ir priežiūra: Pagerina kodo skaitomumą ir priežiūrą, padarydama puslapio struktūrą aiškesnę kitiems kūrėjams (ir sau pačiam ateityje).
• Geriau suprasti struktūrą: Leidžia aiškiai atskirti loginius puslapio blokus (navigaciją, pagrindinį turinį, poraštę ir kt.).

Pavyzdys nesemantinės žymėjimo:

<div>
  <h2>Straipsnio pavadinimas</h2>
  <p>Straipsnio turinys...</p>
</div>
<div>
  <h3>Šoninė juosta</h3>
  <p>Informacija apie šoninę juostą...</p>
</div>

Pavyzdys semantinės žymėjimo:

<article>
  <h2>Straipsnio pavadinimas</h2>
  <p>Straipsnio turinys...</p>
</article>
<aside>
  <h3>Šoninė juosta</h3>
  <p>Informacija apie šoninę juostą...</p>
</aside>

Naudojant semantinius elementus, galima sukurti labiau struktūruotas, prieinamesnes ir paieškos sistemoms optimizuotas tinklalapius.