HTML ogrodje

Osnovno ogrodje dokumenta HTML določa, kako je dokument zgrajen. Celoten dokument je zapisan znotraj elementa <html>, njegova vsebina pa je razdeljena na glavo <head> in telo <body>. Takšna zgradba omogoča, da jasno ločimo podatke o dokumentu od vsebine, ki se prikaže v brskalniku.

Pomni: Element <head> vsebuje podatke o dokumentu, element <body> pa vsebuje vsebino, ki jo brskalnik prikaže uporabniku.

Osnovna pravila

Celoten dokument HTML opišemo z elementom <html>.
Osnovni deli dokumenta so deklaracija <!doctype html>, glava <head> in telo <body>.
V glavi zapišemo metapodatke, na primer naslov strani in kodiranje znakov.
V telesu zapišemo vsebino, ki jo brskalnik prikaže uporabniku.
V sodobnem dokumentu je priporočljivo uporabiti atribut lang in oznako <meta charset="utf-8">.

Primerjave

Glava in telo dokumenta

Glava in telo dokumenta nimata iste naloge. Glava vsebuje podatke o dokumentu, telo pa dejansko vsebino spletne strani.

Del dokumenta	Vloga
`<head>`	vsebuje metapodatke, naslov strani, povezave do slogov in druge podatke o dokumentu
`<body>`	vsebuje besedilo, slike, sezname, tabele in drugo vsebino za prikaz

HTML5 in XHTML

Pri sodobnem spletnem razvoju praviloma uporabljamo ogrodje HTML5. XHTML je strožja, XML-podobna oblika zapisa, ki jo danes srečamo predvsem v starejših gradivih ali posebnih primerih.

Pozor: Brskalnik lahko nekatere manjkajoče dele dokumenta včasih dopolni sam, vendar je pri učenju in pri pisanju pregledne kode priporočljivo, da vse osnovne dele dokumenta HTML vedno zapišemo.

Ogrodje HTML5

Osnovno ogrodje sodobnega dokumenta HTML sestavljajo naslednji elementi v predpisanem zaporedju:

<!doctype html>
<html lang="sl">
<head>
   <meta charset="utf-8">
   <title>Ogrodje</title>
</head>
<body>
   ... vsebina strani ...
</body>
</html>

Deklaracija <!doctype html> brskalniku pove, da gre za dokument HTML, in pomaga zagotoviti prikaz v standardnem načinu. Element <html> omejuje celoten dokument, atribut lang pa pove, v katerem jeziku je napisana vsebina strani.

Del, ki je zapisan med oznakama <head> in </head>, vsebuje metapodatke dokumenta. Sem sodijo na primer naslov strani, povezave do slogovnih predlog, skripte in podatki o kodiranju znakov. Vsak dokument naj ima določen naslov, ki ga zapišemo med oznaki <title> in </title>.

Sama vsebina dokumenta je zaprta med oznakama <body> in </body>. Ta vsebina se prikaže v oknu brskalnika. V glavi je priporočljivo dodati tudi oznako <meta charset="utf-8">, saj s tem določimo kodiranje UTF-8, ki podpira tudi slovenske šumnike.

Pomni: Oznaka <title> ne določa glavnega naslova v vsebini strani, ampak naslov dokumenta, ki se običajno prikaže na zavihku brskalnika.

Struktura HTML5 strani

Vizualni prikaz osnovne strukture HTML5 strani:

<!doctype html>
<html lang="sl">

<head>

<title> Naslov strani </title>

</head>

<body>

<h1> Glavni naslov strani </h1>

<p> Odstavek besedila </p>

<p> Še en odstavek besedila </p>

</body>

</html>

Struktura XHTML strani

XHTML je strožja, XML-podobna oblika zapisa HTML. Danes se na spletu najpogosteje uporablja običajni HTML5, vendar lahko za primerjavo pogledamo tudi osnovno ogrodje XHTML dokumenta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
   ... vsebina strani ...
</body>
</html>

XHTML zahteva bolj strog zapis oznak in atributov, zato se danes pri učenju osnov spletnega razvoja praviloma najprej uporablja HTML5.

Priporočila

Pri vsakem dokumentu zapiši celotno osnovno ogrodje HTML5.
Na elementu <html> uporabi atribut lang.
V glavi dokumenta določi kodiranje z oznako <meta charset="utf-8">.
V elementu <head> določi smiseln naslov strani z oznako <title>.
Vse, kar želiš prikazati uporabniku, zapiši v element <body>.

Pogoste napake

Elementa <head> in <body> se zamenjujeta glede na njuno vlogo.
Naslov strani v elementu <title> se zamenjuje z glavnim naslovom v vsebini dokumenta.
Dokument nima zapisa <!doctype html>.
Na elementu <html> manjka atribut lang.
V glavi dokumenta ni določeno ustrezno kodiranje znakov.

Nazaj

Naprej