HTML5 ieviesa semantiskos elementus, kas ļauj skaidrāk aprakstīt lapas struktūru. Atšķirībā no universālā <div>, semantiskie elementi norāda satura nozīmi, kas palīdz meklētājiem, ekrāna lasītājiem un citiem izstrādātājiem labāk saprast lapas uzbūvi.

Galvenie semantiskie elementi

<header>
<h1>Mājas lapas nosaukums</h1>
<nav>
<a href="/">Sākums</a>
<a href="/par-mums">Par mums</a>
<a href="/kontakti">Kontakti</a>
</nav>
</header>

<main>
<article>
<h2>Raksta virsraksts</h2>
<p>Raksta saturs...</p>
</article>
</main>

<aside>
<h3>Saistītie raksti</h3>
<ul><li><a href="#">Cits raksts</a></li></ul>
</aside>

<footer>
<p>&copy; 2025 Mans uzņēmums</p>
</footer>

Elementu apraksti

  • <header> — lapas vai sadaļas galvene. Parasti satur logotipu, virsrakstu un navigāciju
  • <nav> — navigācijas saišu bloks (galvenā izvēlne, satura rādītājs)
  • <main> — lapas galvenais saturs. Katrā lapā drīkst būt tikai viens <main>
  • <article> — patstāvīgs satura gabals (raksts, komentārs, foruma ieraksts)
  • <section> — tematiski saistīta satura sadaļa ar savu virsrakstu
  • <aside> — papildu saturs (sānjosla, saistītie raksti, reklāma)
  • <footer> — lapas vai sadaļas kājene (autortiesības, kontakti, papildu saites)

Figure, time un details

HTML5 piedāvā arī citus noderīgus semantiskos elementus:

<figure> un <figcaption> — attēls vai diagramma ar parakstu (skatīt attēlu sadaļu).

<time> — datums vai laiks mašīnlasāmā formātā:

<p>Publicēts <time datetime="2025-06-15">2025. gada 15. jūnijā</time></p>

<details> un <summary> — sakļaujams saturs, kuru lietotājs var atvērt un aizvērt:

<details>
<summary>Vairāk informācijas</summary>
<p>Šis saturs ir redzams tikai tad, kad lietotājs noklikšķina uz "Vairāk informācijas".</p>
</details>

Rezultāts

Vairāk informācijas

Šis saturs ir redzams tikai tad, kad lietotājs noklikšķina uz "Vairāk informācijas".

Div vs semantiskie elementi

<div> joprojām ir noderīgs kā universāls konteiners CSS stilizēšanai, bet, ja elementam ir konkrēta nozīme, vienmēr dod priekšroku semantiskajam tagam. Piemēram:

Tā vietā: Labāk lietot:
<div class="header"> <header>
<div class="nav"> <nav>
<div class="footer"> <footer>
<div class="article"> <article>

Priekšrocības

  • SEO — meklētāji labāk saprot lapas struktūru un var precīzāk indeksēt saturu
  • Pieejamība — ekrāna lasītāji var piedāvāt lietotājiem ērtāku navigāciju
  • Koda lasāmība — citiem izstrādātājiem ir vieglāk saprast lapas uzbūvi

Laboja mad, labots 1x