Kas ir semantiskie elementi HTML un kam tie ir nepieciešami?

Semantiskās HTML elementi ir tagi (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), kas apraksta to iekļauto satura semantisko nozīmi, ne tikai tā ārējo izskatu.

Galvenais mērķis:

• Pieejamība: Palīdz palīgtehnoloģijām (piemēram, ekrāna lasītājiem) saprast lapas struktūru un saturu, padarot saturu pieejamu lietotājiem ar ierobežojumiem.
• SEO (meklētāju optimizācija): Semantiskā marķēšana ļauj labāk indeksēt un rangēt lapas meklētājprogrammās, jo tās var precīzāk noteikt galveno saturu un tā atbilstību vaicājumiem.
• Izstrāde un uzturēšana: Uzlabo koda lasāmību un uzturēšanu, padarot lapas struktūru skaidrāku citiem izstrādātājiem (un sev nākotnē).
• Labāka struktūras izpratne: Ļauj skaidri atdalīt lapas loģiskos blokus (navigāciju, galveno saturu, kājeni utt.).

Piemērs nesemantiskai marķēšanai:

<div>
  <h2>Raksta virsraksts</h2>
  <p>Raksta saturs...</p>
</div>
<div>
  <h3>Sānu panelis</h3>
  <p>Sānu paneļa informācija...</p>
</div>

Piemērs semantiskai marķēšanai:

<article>
  <h2>Raksta virsraksts</h2>
  <p>Raksta saturs...</p>
</article>
<aside>
  <h3>Sānu panelis</h3>
  <p>Sānu paneļa informācija...</p>
</aside>

Semantisko elementu izmantošana palīdz veidot strukturētākas, pieejamākas un meklētājprogrammām optimizētākas tīmekļa lapas.