Kāda ir HTML dokumenta struktūra?

Apskatīsim pirmajā sadaļā doto piemēru:

HTML dokumenta struktūra

Dokumenta tips:

<!DOCTYPE html> informē pārlūkprogrammu par to, ka dokuments ir rakstīts HTML5 standartā. Šī deklarācija vienmēr atrodas pašā dokumenta sākumā. Senākās HTML versijās DOCTYPE bija sarežģītāks, bet HTML5 tas ir vienkāršots līdz minimumam.

Šī daļa nav obligāti nepieciešama, lai lapa darbotos, bet bez tās var rasties problēmas ar sarežģītu lapu attēlošanu, jo pārlūkprogrammai nākas "uzminēt", pēc kādām specifikācijām attēlot kodu. Vienmēr iekļauj DOCTYPE savos dokumentos.

HTML elements:

<html lang="lv"> tags norāda dokumenta sākumu un beigas. Tas kalpo kā ietvars visam pārējam saturam. Atribūts lang norāda dokumenta valodu — tas palīdz meklētājiem un ekrāna lasītājiem pareizi apstrādāt saturu. Latviešu valodai lietojam lang="lv".

Galvene:

<head> sadaļā tiek ievietota metainformācija par lapu. Šeit parasti atrodas:

  • <meta charset="UTF-8"> — norāda rakstzīmju kodējumu. UTF-8 atbalsta visas valodas, tai skaitā latviešu diakritiskās zīmes
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — nodrošina pareizu attēlošanu mobilajās ierīcēs
  • <title> — lapas nosaukums, kas redzams pārlūkprogrammas cilnē un meklētāju rezultātos
  • <meta name="description"> — īss lapas apraksts meklētājiem
  • <link rel="stylesheet" href="stils.css"> — ārējā CSS faila pievienošana
  • <script src="skripts.js"></script> — JavaScript faila pievienošana

Galvenē esošā informācija nav tieši redzama apmeklētājam (izņemot <title>, kas parādās pārlūkprogrammas cilnē un meklētāju rezultātos).

Saturs jeb ķermenis:

<body> tags apzīmē sākumu un beigas visam lapas saturam — šeit tiek ievietots teksts, saites, attēli, izvēlnes un visi pārējie satura elementi, ko redzēs lietotājs, atverot šo lapu.

Pilns HTML5 dokumenta paraugs

<!DOCTYPE html>
<html lang="lv">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Manas lapas apraksts">
<title>Mana mājas lapa</title>
<link rel="stylesheet" href="stils.css">
</head>

<body>
<h1>Laipni lūgti!</h1>
<p>Šī ir mana mājas lapa.</p>
<script src="skripts.js"></script>
</body>

</html>

Laboja mad, labots 1x