HTML in semantika¶

Kaj HTML v resnici je¶

HTML ni jezik za oblikovanje. HTML je jezik za opis pomena in strukture vsebine. To je eno najpomembnejših sporočil celotnega predmeta.

Ko pišemo HTML, v resnici odgovarjamo na vprašanja:

kaj je naslov,
kaj je odstavek,
kaj je navigacija,
kaj je seznam,
kaj je članek,
kaj je obrazec,
kaj je tabela.

Če dijak to razume, bo kasneje precej lažje razumel tudi CSS, dostopnost, iskalnike in predloge.

Minimalna sodobna HTML predloga¶

<!doctype html>
<html lang="sl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Moja knjižnica</title>
  <meta name="description" content="Preprosta spletna aplikacija za evidenco knjig.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Moja knjižnica</h1>
    <nav aria-label="Glavna navigacija">
      <a href="/">Domov</a>
      <a href="/dodaj">Dodaj knjigo</a>
      <a href="/o-projektu">O projektu</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Seznam knjig</h2>
      <p>Tu bo glavni seznam.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026</p>
  </footer>
</body>
</html>

Ta primer je majhen, a vsebuje večino pomembnih gradnikov sodobne strani.

Pomen osnovnih delov dokumenta¶

`<!doctype html>`¶

Pove brskalniku, da gre za sodoben HTML dokument.

`<html lang="sl">`¶

Atribut lang pomaga:

bralnikom zaslona,
prevajalnim orodjem,
pravilni obdelavi jezika.

To je ena tistih malenkosti, ki pokažejo, da do spletne strani ne pristopamo površno.

`<meta charset="utf-8">`¶

Poskrbi, da se šumniki in drugi znaki pravilno prikažejo.

`<meta name="viewport" ...>`¶

To je pomembna osnova za odzivnost na mobilnih napravah. Brez nje se lahko stran na telefonih obnaša čudno ali zastarelo.

Semantični elementi¶

Semantični elementi ne povedo samo, kako nekaj izgleda, ampak kaj nekaj pomeni.

Pri tem predmetu so najpomembnejši:

header
nav
main
section
article
aside
footer

Zakaj so pomembni¶

Semantični HTML pomaga:

ljudem, ker je dokument bolj logičen,
CSS-u, ker je struktura čistejša,
dostopnosti, ker tehnologije lažje razumejo vsebino,
razvijalcu, ker je projekt bolj berljiv,
iskalnikom, ker lažje razberejo pomen strani.

Struktura strani¶

Dobra struktura¶

<main>
  <section>
    <h2>Najnovejše knjige</h2>

    <article>
      <h3>Alamut</h3>
      <p>Roman Vladimirja Bartola.</p>
    </article>

    <article>
      <h3>1984</h3>
      <p>Roman Georgea Orwella.</p>
    </article>
  </section>
</main>

Slaba struktura¶

<div class="main">
  <div class="box">
    <div class="big">Najnovejše knjige</div>
    <div class="item">
      <div class="title">Alamut</div>
      <div class="desc">Roman Vladimirja Bartola.</div>
    </div>
  </div>
</div>

Drugi primer morda še vedno “izgleda prav”, a logika dokumenta je veliko slabša.

Naslovi in hierarhija¶

Naslovov ne uporabljamo zaradi velikosti črk, ampak zaradi logične zgradbe dokumenta.

Dobro:

<h1>Moja knjižnica</h1>
<h2>Seznam knjig</h2>
<h3>Fantastika</h3>

Slabo:

<h1>Moja knjižnica</h1>
<h4>Seznam knjig</h4>
<h2>Fantastika</h2>

Pravilna hierarhija pomaga pri orientaciji in dostopnosti.

Pogosti vsebinski elementi¶

Odstavki¶

<p>Ta aplikacija vodi evidenco knjig v majhni knjižnici.</p>

Poudarki¶

<p><strong>Pozor:</strong> podatki se shranijo v bazo.</p>
<p><em>Opomba:</em> leto izida ni obvezno polje.</p>

Seznami¶

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Flask</li>
</ul>

Seznami so odlični za korake, pravila, kategorije, navigacijo in kontrolne sezname.

Povezave¶

Povezava pomeni premik na drug vir ali lokacijo.

<a href="/dodaj">Dodaj novo knjigo</a>
<a href="https://www.python.org/">Python</a>

Pomembno pravilo:

povezava pomeni prehod,
gumb pomeni dejanje.

To je majhna stvar, ki začetnikom pogosto dela zmedo.

Slike in `alt`¶

Pri slikah razloži dve situaciji.

Informativna slika¶

Če slika nosi pomen, mora imeti smiseln alt.

<img src="naslovnica.jpg" alt="Naslovnica knjige Alamut">

Dekorativna slika¶

Če slika ne nosi pomena in je samo okras, uporabi prazen alt.

<img src="okras.png" alt="">

S tem pokažeš, da splet ni samo “vizualna površina”, ampak tudi informacijski sistem.

Tabele¶

Tabele uporabljamo za tabelarične podatke, ne za postavitev strani.

<table>
  <thead>
    <tr>
      <th>Naslov</th>
      <th>Avtor</th>
      <th>Leto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alamut</td>
      <td>Vladimir Bartol</td>
      <td>1938</td>
    </tr>
  </tbody>
</table>

Če aplikacija prikazuje sezname, evidence ali poročila, bodo tabele zelo hitro uporabne.

`div` in `span`¶

To nista “slaba” elementa. Sta pa nesemantična elementa, zato ju uporabimo takrat, ko noben smiselni semantični element ni bolj ustrezen.

div je blokovni splošni vsebnik,
span je vrstični splošni vsebnik.

Napaka ni, da ju uporabljaš. Napaka je, da z njima zamenjaš skoraj vse ostalo.

Obrazci kot del HTML-ja¶

Obrazci sicer dobijo svoje poglavje, a je koristno že tukaj omeniti:

form zbira podatke,
label poimenuje polje,
input, textarea, select omogočajo vnos,
button sproži oddajo.

To je eden najpomembnejših trenutkov, ko HTML iz “prikaza” postane “interakcija”.

HTML in dostopnost¶

Dostopnost ni neka ločena eksotična tema. Velik del dostopnosti je pravzaprav posledica dobrega HTML-ja.

Osnovna pravila:

uporabi pravi element za pravi namen,
ohrani logično hierarhijo naslovov,
dodaj label obrazcem,
dodaj smiseln alt,
navigacijo poimenuj jasno,
ne uporabljaj div kot ponarejen gumb.

Dijaki naj čim prej dobijo občutek, da “pravilen HTML” ni samo akademska kaprica.

Pogoste napake¶

Vse je `div`¶

To pomeni, da razvijalec razmišlja samo o videzu, ne pa o pomenu vsebine.

Naslovi so izbrani po velikosti¶

Velikost se ureja s CSS, ne z napačnim izborom naslovne ravni.

Povezava se uporablja kot gumb¶

Če element sproži dejanje na isti strani, je pogosto bolj smiseln button.

Manjkajoči `alt`¶

To je zelo pogosta, zelo banalna in zelo nepotrebna napaka.

Napačna struktura strani¶

Včasih začetniki zložijo vse v en sam velik blok brez jasne notranje logike. Posledica je slabša berljivost in težje oblikovanje.

Kontrolni seznam za dijaka¶

Preden odda HTML stran, naj preveri:

1. Ali imam <html lang="sl">?
2. Ali imam charset in viewport?
3. Ali ima stran točno en glavni <h1>?
4. Ali so naslovi v logičnem vrstnem redu?
5. Ali sem uporabil semantične elemente?
6. Ali imajo slike ustrezen alt?
7. Ali so seznami res seznami?
8. Ali sem tabelo uporabil samo za podatke?

Majhen praktičen cilj¶

Po tem poglavju naj dijak zna izdelati:

osnovno strukturo strani,
glavo, navigacijo, glavno vsebino in nogo,
seznam ali preglednico podatkov,
stran, ki je razumljiva tudi brez CSS.

To zadnje je zelo pomembno. Če HTML sam po sebi ni logičen, CSS samo zakrpa nered.

Dobro pravilo

Najprej napiši HTML tako, da ima smisel brez CSS. Šele nato dodaj videz. Če je struktura dobra, bo vse kasneje veliko manj boleče.