HTML (HyperText Markup Language) je označevalni jezik za izdelavo spletnih dokumentov. Njegova glavna naloga je, da določi pomen in strukturo vsebine, na primer naslove, odstavke, sezname, povezave, slike, tabele in obrazce. Za videz strani običajno uporabljamo CSS, za interaktivnost pa JavaScript.
Pomni: HTML (HyperText Markup Language) določa pomen in strukturo vsebine. Za videz strani uporabljamo CSS, za dodatno delovanje in odzivanje strani pa JavaScript.
Osnovna pravila
- HTML je osnovni označevalni jezik spleta.
- Elementi HTML opisujejo pomen posameznih delov vsebine.
- Dokument HTML ima korenski element
<html>, glavo<head>in telo<body>. - V glavi dokumenta pogosto določimo naslov strani, kodiranje znakov in druge meta podatke.
- V telesu dokumenta zapišemo vsebino, ki jo brskalnik prikaže uporabniku.
- Pri sodobnem dokumentu običajno uporabimo zapis
<!doctype html>. - Na korenskem elementu je priporočljivo nastaviti atribut
lang.
Primerjave
HTML, CSS in JavaScript
Pri izdelavi spletne strani imajo HTML, CSS in JavaScript različne naloge. HTML določa strukturo in pomen vsebine, CSS skrbi za videz, JavaScript pa za interaktivnost in odzivanje strani.
| Tehnologija | Glavna naloga |
|---|---|
| HTML | določa pomen in strukturo vsebine |
| CSS | določa videz in postavitev vsebine |
| JavaScript | doda interaktivnost in obdelavo dogodkov |
Struktura in videz
HTML naj opisuje, kaj vsebina pomeni, ne pa predvsem, kako naj izgleda. Naslov naj bo zapisan z naslovnim elementom, odstavek z odstavkom, seznam s seznamom. Videz teh elementov nato po potrebi določimo s CSS.
Pozor: HTML ni namenjen določanju videza strani. Če z oznakami opisujemo predvsem videz namesto pomena vsebine, postane dokument manj pregleden, manj dostopen in težje vzdrževan.
Osnovno ogrodje dokumenta
Sodoben dokument HTML navadno začnemo z zapisom <!doctype html>. Korenski element <html> naj ima praviloma tudi atribut lang, ki določa privzeti jezik dokumenta. V glavi je priporočljivo določiti kodiranje z <meta charset="utf-8">, pogosto pa dodamo še oznako viewport za primeren prikaz na mobilnih napravah.
<!doctype html>
<html lang="sl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naslov strani</title>
</head>
<body>
<h1>Naslov dokumenta</h1>
<p>To je primer odstavka.</p>
</body>
</html>Vloga glave in telesa
Element <head> vsebuje podatke o dokumentu, ki se praviloma ne prikazujejo kot glavno besedilo strani. Tja spadajo naslov strani, meta podatki, povezave na slogovne datoteke in drugi podatki o dokumentu. Element <body> pa vsebuje vsebino, ki jo brskalnik običajno prikaže uporabniku.
Priporočila
- Dokument začni z zapisom
<!doctype html>. - Na korenskem elementu uporabi atribut
langz ustrezno vrednostjo jezika. - V glavi dokumenta določi kodiranje z
<meta charset="utf-8">. - Za sodobne strani dodaj tudi oznako
<meta name="viewport">. - Za naslove, odstavke, sezname in druge dele vsebine uporabljaj ustrezne elemente glede na njihov pomen.
- Za videz in postavitev strani uporabljaj CSS, ne pa označevalnih elementov, ki bi poskušali nadomestiti slog.
Pomni: Atribut lang pomaga brskalnikom, prevajalnim orodjem in pripomočkom za dostopnost pravilneje obravnavati jezik dokumenta.
Pogoste napake
- Dokument nima zapisa
<!doctype html>, zato brskalnik ne deluje v pričakovanem sodobnem načinu. - Na elementu
<html>ni nastavljen atributlang. - V glavi dokumenta ni določeno kodiranje
utf-8. - Vsebina se zapisuje brez ustreznih strukturnih elementov, zato dokument ni dovolj semantičen.
- Za videz se poskuša skrbeti že z osnovnimi označevalnimi elementi namesto s CSS.
- Elementa
<head>in<body>se ne ločujeta dovolj jasno po njuni vlogi.