Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Logično oblikovanje besedila v HTML

Pri logičnem oziroma pomenskem oblikovanju besedila z oznakami ne določamo predvsem videza, ampak pomen posameznega dela besedila. Tako z oznako povemo, ali gre za poudarek, pomemben del besedila, kodo, citat, okrajšavo ali kaj drugega.

Takšne oznake pomagajo, da je dokument bolj pregleden in pomensko jasnejši.

Pomni: Pri logičnem oblikovanju besedila oznake izbiramo glede na pomen vsebine, ne samo glede na videz.

Osnovna pravila

  • Logično oblikovanje poudarja pomen posameznega dela besedila.
  • Za poudarek uporabimo ustrezno pomensko oznako in ne zgolj oblikovanja videza.
  • Oznake za kodo, citate, okrajšave in časovne podatke uporabimo takrat, ko vsebina res predstavlja tak podatek.
  • Za videz besedila praviloma uporabljamo CSS.
  • Pomenske oznake izboljšajo preglednost dokumenta.

Pozor: Oznake za logično oblikovanje ne uporabljamo samo zato, ker želimo določeno obliko besedila. Če želimo spremeniti predvsem videz, je praviloma primernejši CSS.

Oznake za logično oblikovanje besedila

  • <sub> – indeks
  • <sup> – potenca oziroma nadpisano besedilo
  • <em> – poudarjeno besedilo
  • <strong> – pomembno besedilo
  • <abbr> – okrajšava
  • <cite> – naslov dela ali sklic
  • <code> – del programske kode
  • <dfn> – izraz, ki ga določamo ali razlagamo
  • <kbd> – vnos s tipkovnice
  • <q> – krajši citat znotraj vrstice
  • <blockquote> – daljši citat
  • <samp> – primer izpisa programa ali vzorec
  • <mark> – označeno besedilo
  • <var> – spremenljivka
  • <time> – datum in čas

Pogoste oznake in njihov pomen

<em> in <strong>

Oznaka <em> označi poudarjeno besedilo, oznaka <strong> pa besedilo, ki je posebej pomembno.

<p>To je <em>poudarjeno</em> besedilo.</p>
<p>To je <strong>pomembno</strong> besedilo.</p>

<sub> in <sup>

Oznaki <sub> in <sup> uporabimo za zapis indeksov in potenc.

<p>H<sub>2</sub>O</p>
<p>x<sup>2</sup></p>

<abbr>

Oznaka <abbr> označuje okrajšavo. Pogosto ji dodamo atribut title, ki pojasni njen pomen.

<p><abbr title="HyperText Markup Language">HTML</abbr> je jezik za označevanje.</p>

<code>, <kbd>, <samp> in <var>

Te oznake pogosto uporabljamo pri računalniških in tehničnih vsebinah:

  • <code> za programsko kodo,
  • <kbd> za vnos s tipkovnice,
  • <samp> za izpis programa,
  • <var> za spremenljivke.
<p>Ukaz je <code>print()</code>.</p>
<p>Pritisni <kbd>Enter</kbd>.</p>
<p>Program vrne <samp>Napaka</samp>.</p>
<p>Spremenljivka je <var>x</var>.</p>

<q> in <blockquote>

Oznako <q> uporabimo za krajši citat znotraj vrstice, oznako <blockquote> pa za daljši citat.

<p>Učitelj je rekel: <q>Danes ponovimo HTML.</q></p>

<blockquote>
  HTML je osnovni jezik za označevanje spletnih strani.
</blockquote>

<mark>

Oznaka <mark> označi del besedila, ki ga želimo posebej izpostaviti.

<p>Zapomni si oznako <mark>&lt;strong&gt;</mark>.</p>

<time>

Oznaka <time> označuje datum, uro ali časovno obdobje. Uporabna je zato, ker pove, da gre za časovni podatek. Pogosto uporabimo atribut datetime, v katerem je datum ali čas zapisan v standardni obliki.

<p>Objavljeno: <time datetime="2026-03-19">19. 3. 2026</time></p>
<p>Sestanek se začne ob <time datetime="10:30">10.30</time>.</p>
<p>Počitnice bodo trajale od <time datetime="2026-07-01">1. 7. 2026</time> do <time datetime="2026-08-31">31. 8. 2026</time>.</p>

Primer različnih oznak skupaj

<p>To je <em>poudarjeno</em> besedilo.</p>
<p>To je <strong>pomembno</strong> besedilo.</p>
<p>To je <abbr title="HyperText Markup Language">HTML</abbr>.</p>
<p>To je <cite>naslov dela</cite>.</p>
<p>To je <code>koda</code>.</p>
<p>To je <dfn>definicija</dfn>.</p>
<p>To je <kbd>vnos</kbd>.</p>
<p>To je <q>citat</q>.</p>
<p>To je <samp>vzorec</samp>.</p>
<p>To je <var>spremenljivka</var>.</p>
<p>To je H<sub>2</sub>O in x<sup>2</sup>.</p>
<p>To je <mark>označeno</mark> besedilo.</p>
<p>Objavljeno: <time datetime="2026-03-19">19. 3. 2026</time>.</p>

To je poudarjeno besedilo.
To je pomembno besedilo.
To je HTML.
To je naslov dela.
To je koda.
To je definicija.
To je vnos.
To je citat.
To je vzorec.
To je spremenljivka.
To je H2O in x2.
To je označeno besedilo.
Objavljeno: .

Pri logičnem oblikovanju besedila je pomembno, da oznako izberemo glede na pomen vsebine, ne samo glede na videz. Za videz besedila je praviloma namenjen CSS.

Priporočila

  • Za poudarek uporabi <em>, za pomembnost pa <strong>.
  • Za okrajšave uporabi <abbr> in po potrebi dodaj atribut title.
  • Za računalniške vsebine uporabi ustrezne oznake, kot so <code>, <kbd>, <samp> in <var>.
  • Za datume in časovne podatke uporabi <time>.
  • Za videz besedila uporabljaj CSS, ne pa neustreznih pomenskih oznak.

Pogoste napake

  • Pomenske oznake se uporabljajo samo zaradi videza besedila.
  • Za poudarjanje ni razlikovanja med pomenom oznak <em> in <strong>.
  • Za kodo, tipkovni vnos, izpis programa in spremenljivko niso uporabljene ustrezne oznake.
  • Okrajšava ni označena z oznako <abbr>, čeprav bi to izboljšalo jasnost besedila.
  • Časovni podatek ni označen z oznako <time>, čeprav gre za datum ali uro.
Nazaj
Naprej