Semantična struktura HTML strani

Pri zgradbi spletne strani ni pomembno le, kako je vsebina videti, ampak tudi kakšen pomen imajo posamezni deli dokumenta. Zato v HTML uporabljamo semantične elemente, ki jasno opišejo vlogo posameznega dela vsebine.

Beseda semantično pomeni pomensko. Semantični elementi pomagajo brskalniku, razvijalcu in drugim orodjem bolje razumeti zgradbo dokumenta.

Pomni: Semantični elementi praviloma ne služijo predvsem videzu, ampak opisu pomena in vloge posameznih delov dokumenta.

Osnovna pravila

Semantični elementi opišejo pomen posameznega dela dokumenta.
Za glavno vsebino strani uporabimo <main>.
Za navigacijo uporabimo <nav>.
Za samostojno vsebinsko celoto uporabimo <article>.
Za tematski razdelek vsebine uporabimo <section>.

Primerjave

Semantični in nesemantični elementi

Nekateri elementi sami po sebi ne povedo veliko o pomenu vsebine. Takšna elementa sta na primer <div> in <span>. Uporabna sta za združevanje ali oblikovanje vsebine, vendar ne povesta, kakšna je vloga tega dela dokumenta.

Semantični elementi pa pomen vsebine opišejo bolj jasno. Primeri takih elementov so <header>, <nav>, <main>, <section>, <article>, <aside> in <footer>.

Vrsta elementa	Primer	Opis
nesemantični	`<div>`, `<span>`	ne povesta jasno, kakšna je vloga vsebine
semantični	`<header>`, `<nav>`, `<main>`, `<article>`	jasneje opišejo pomen posameznega dela dokumenta

Pozor: Oznako <div> uporabimo takrat, ko za določen del vsebine nimamo primernejšega semantičnega elementa.

Semantični elementi sami po sebi ne pomenijo nujno drugačnega videza. Njihova glavna prednost je, da bolj jasno opišejo zgradbo in pomen vsebine.

Pomembni semantični elementi HTML5

Element	Opis
`<header>`	označuje glavo dokumenta ali posameznega razdelka
`<nav>`	označuje del strani, namenjen navigaciji
`<main>`	določa glavno vsebino dokumenta
`<section>`	označuje tematski razdelek vsebine
`<article>`	označuje samostojno vsebinsko celoto, na primer članek ali novico
`<aside>`	označuje dodatno ali spremljevalno vsebino
`<footer>`	označuje nogo dokumenta ali razdelka
`<figure>`	združuje samostojno vsebino, kot je slika, graf ali koda
`<figcaption>`	določa napis oziroma opis elementa `<figure>`
`<details>`	omogoča prikaz ali skrivanje dodatnih informacij
`<summary>`	določa vidni naslov elementa `<details>`
`<mark>`	označi poudarjen del besedila
`<time>`	označuje datum, čas ali oboje

Element `<section>`

Element <section> uporabimo za tematski razdelek vsebine. Pri takem razdelku je praviloma smiselno uporabiti tudi naslov, na primer <h2>.

Element `<article>`

Element <article> uporabimo za samostojno vsebinsko enoto, ki jo lahko obravnavamo ločeno od preostale strani, na primer za novico, članek ali objavo.

Elementa `<figure>` in `<figcaption>`

Če želimo sliko, graf ali drugo samostojno vsebino povezati z napisom, uporabimo element <figure> in znotraj njega <figcaption>.

<figure>
  <img src="slika.jpg" alt="Opis slike.">
  <figcaption>Opis slike.</figcaption>
</figure>

Elementa `<details>` in `<summary>`

Element <details> omogoča, da uporabnik dodatno vsebino razpre ali skrije. Naslov takega bloka določimo z elementom <summary>.

<details>
  <summary>Več informacij</summary>
  <p>To je dodatna vsebina.</p>
</details>

Element `<time>`

Element <time> uporabimo za zapis datuma, časa ali obdobja. Po potrebi lahko dodamo tudi atribut datetime.

<time datetime="2026-04-15">15. 4. 2026</time>

Osnovna semantična zgradba strani

Na sodobni spletni strani pogosto uporabimo glavo, navigacijo, glavno vsebino, dodatno vsebino in nogo. Takšna zgradba je pregledna in pomensko jasna.

<body>
  <header>
    <h1>Naslov strani</h1>
  </header>

  <nav>
    Povezave
  </nav>

  <main>
    <section>
      <h2>Poglavje</h2>
      <article>
        Glavna vsebina
      </article>
    </section>

    <aside>
      Dodatna vsebina
    </aside>
  </main>

  <footer>
    Noga strani
  </footer>
</body>

Primer uporabe nekaterih semantičnih elementov

<article>
  <header>
    <h2>Novica</h2>
  </header>

  <p>Besedilo novice.</p>

  <footer>
    Avtor novice
  </footer>
</article>

V tem primeru element <article> predstavlja samostojno vsebinsko enoto, znotraj katere sta uporabljena še <header> in <footer>.

Pri pisanju sodobnih spletnih strani je dobro, da elemente izbiramo glede na njihov pomen. Tako je dokument preglednejši, pomensko jasnejši in praviloma lažje vzdrževan.

Zakaj je semantična zgradba pomembna?

Semantična zgradba izboljša preglednost kode, olajša vzdrževanje spletne strani in pomaga različnim orodjem bolje razumeti vsebino dokumenta. Zaradi tega je spletna stran praviloma bolj urejena in razumljivejša.

Struktura HTML strani s semantičnim označevanjem

Priporočila

Za glavno vsebino strani uporabi <main>.
Za navigacijske povezave uporabi <nav>.
Za samostojne vsebinske enote uporabi <article>.
Za tematske razdelke uporabi <section> in jim praviloma dodaj naslov.
Oznako <div> uporabi takrat, ko ni primernejšega semantičnega elementa.

Pogoste napake

Za vse dele strani se uporablja samo <div>, čeprav obstajajo primernejši semantični elementi.
Element <section> je uporabljen brez smiselnega naslova razdelka.
Element <article> je uporabljen za vsebino, ki ni samostojna celota.
Element <nav> je uporabljen za vsebino, ki ni namenjena navigaciji.
Element <main> ni uporabljen za glavni del vsebine strani.

Nazaj

Naprej