Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Glava HTML

V glavi HTML dokumenta, torej med oznakama <head> in </head>, opišemo dokument. Vsebina glave se praviloma ne prikazuje kot glavno besedilo strani v oknu brskalnika, ampak vsebuje podatke in nastavitve, ki jih uporabljajo brskalnik, iskalniki in druge storitve.

V glavi lahko določimo naslov strani, metapodatke, notranje sloge, povezave do zunanjih datotek, skripte in nekatere druge nastavitve dokumenta.

Pomni: Glava dokumenta vsebuje podatke o strani, ne pa glavne vsebine, ki jo uporabnik bere v telesu dokumenta.

Osnovna pravila

  • Glava dokumenta je zapisana med oznakama <head> in </head>.
  • V glavi določimo podatke in nastavitve dokumenta.
  • Vsak HTML dokument naj ima smiseln element <title>.
  • V glavi pogosto uporabimo tudi <meta charset="utf-8">.
  • Zunanjo slogovno datoteko najpogosteje povežemo z oznako <link>.

Pozor: Kar zapišemo v glavo dokumenta, praviloma ni glavno besedilo strani. Glavna vsebina strani sodi v element <body>.

Pomembne oznake v glavi dokumenta

Oznaka Opis
<title> določa naslov spletne strani oziroma besedilo na zavihku brskalnika
<meta> določa metapodatke o HTML dokumentu
<style> vsebuje notranja pravila CSS
<link> poveže dokument z zunanjim virom, na primer s slogovno datoteko ali favicono
<script> vključi skripto ali povezavo do zunanje skriptne datoteke
<base> določa privzeti osnovni URL naslov ali privzeti cilj povezav v dokumentu

Oznaka <title>

Oznaka <title> določa naslov spletne strani oziroma dokumenta. Ta oznaka je zelo pomembna, saj se njen zapis prikaže v naslovni vrstici ali na zavihku brskalnika, med priljubljenimi povezavami in pogosto tudi med rezultati spletnih iskalnikov.

Primer:

<head>
  <title>Moja prva spletna stran</title>
</head>

Vsaka spletna stran naj ima smiseln in kratek naslov v oznaki <title>.

Oznaka <meta>

Z oznako <meta> določimo metapodatke o dokumentu. Takšni podatki lahko opisujejo nabor znakov, avtorja, opis strani, ključne besede ali nastavitve prikaza. Element <meta> predstavlja metapodatke, ki jih ne moremo predstaviti z drugimi sorodnimi elementi, kot so <base>, <link>, <script>, <style> ali <title>.

Primer:

<head>
  <meta charset="utf-8">
  <meta name="description" content="Primer HTML dokumenta.">
</head>

Več o oznaki <meta> je opisano na posebni strani o meta oznakah.

Oznaka <style>

Oznako <style> uporabimo, kadar želimo v samem dokumentu zapisati pravila CSS. Tak način imenujemo notranji slog.

<head>
  <style>
    body { background-color: silver; }
    p { color: red; }
  </style>
</head>

Pri večjih spletnih mestih pogosteje uporabljamo zunanjo CSS datoteko, saj je taka rešitev bolj pregledna.

Z oznako <link> povežemo dokument z zunanjim virom. Najpogosteje jo uporabimo za povezavo s slogovno datoteko CSS, uporablja pa se tudi za ikone spletnega mesta.

<head>
  <link rel="stylesheet" href="slog.css">
</head>

Z isto oznako lahko določimo tudi favicono, to je majhno ikono, ki se prikaže na zavihku brskalnika ali med zaznamki.

<head>
  <link rel="icon" href="favicon.png" type="image/png">
</head>

Ta oznaka nima zaključnega dela in je prazni element.

Oznaka <script>

Z oznako <script> vključimo JavaScript kodo ali povezavo do zunanje skriptne datoteke.

<head>
  <script src="_js/core.js"></script>
</head>

Skripte lahko vključimo tudi na koncu telesa dokumenta, kadar želimo, da se vsebina strani najprej naloži.

Oznaka <base>

Oznaka <base> določa privzeti osnovni naslov za vse relativne povezave v dokumentu ali pa privzeti cilj za odpiranje povezav.

MDN navaja, da element <base> določa osnovni URL za vse relativne URL naslove v dokumentu in da je v dokumentu dovoljen samo en tak element.

Če na primer določimo target="_blank", se bodo povezave v dokumentu privzeto odpirale v novem zavihku, tudi če tega atributa ne bomo zapisali pri vsaki povezavi posebej.

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.primer.si/" target="_blank">
</head>
<body>
  <a href="html.html">HTML</a>
</body>
</html>
HTML povezava se odpre v novem zavihku. Podobno vedenje lahko za vse povezave v dokumentu določimo z oznako <base>.

Oznako <base> uporabljamo previdno, ker lahko vpliva na vse relativne povezave v dokumentu. Zato je primerna predvsem takrat, ko res želimo enotno osnovno pot ali enoten način odpiranja povezav.

Primerjave

Notranji in zunanji viri

Oznaka Tipična raba Posebnost
<style> notranja pravila CSS pravila so zapisana v samem dokumentu
<link> zunanja CSS datoteka ali favicona dokument poveže z zunanjim virom
<script> notranja ali zunanja skripta vključi JavaScript kodo ali povezavo do datoteke

Primer glave HTML dokumenta

<head>
  <meta charset="utf-8">
  <title>Primer dokumenta</title>
  <link rel="stylesheet" href="slog.css">
  <link rel="icon" href="favicon.png" type="image/png">
</head>

V sodobnem HTML dokumentu v glavi najpogosteje uporabimo vsaj oznake <meta charset>, <title> in po potrebi <link> za CSS datoteko ali favicono.

Pomni: Smiseln naslov strani v oznaki <title> in pravilno določeno kodiranje z <meta charset="utf-8"> sta med najpogostejšimi in najpomembnejšimi deli glave dokumenta.

Priporočila

  • Vsaki strani dodaj smiseln element <title>.
  • V glavi dokumenta uporabi <meta charset="utf-8">.
  • Za večja spletna mesta raje uporabi zunanjo CSS datoteko prek oznake <link>.
  • V glavi uporabi samo tiste oznake, ki res opisujejo ali nastavljajo dokument.
  • Oznako <base> uporabi samo takrat, ko njen vpliv na vse relativne povezave res želiš.

Pogoste napake

  • Stran nima elementa <title> ali pa je naslov preveč splošen.
  • V glavi ni določeno pravilno kodiranje znakov.
  • Oznaka <base> je uporabljena brez razumevanja, da vpliva na vse relativne povezave v dokumentu.
  • V glavo dokumenta je umeščena vsebina, ki sodi v element <body>.
  • Uporaba oznak v glavi ni pregledna, ker niso ločeni metapodatki, slogi in zunanje povezave.
Nazaj
Naprej