Dokumenta <head> sadaļā tiek ievietota dažāda meta informācija, kas nav tieši redzama lietotājam, bet ir būtiska lapas pareizai darbībai, meklētāju optimizācijai (SEO) un attēlošanai sociālajos tīklos.

Rakstzīmju kodējums

Vienmēr norādi dokumenta rakstzīmju kodējumu. UTF-8 ir universālais standarts, kas atbalsta visas valodas, tai skaitā latviešu diakritiskās zīmes (ā, č, ē, ģ, ī, ķ, ļ, ņ, š, ū, ž):

<meta charset="UTF-8">

Viewport — mobilā saderība

Šis meta tags ir obligāts responsīvām (mobile-friendly) lapām. Bez tā mobilās ierīces mēģinās attēlot lapu tā, it kā tā būtu paredzēta datoram:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Lapas apraksts (SEO)

Meta apraksts parādās meklētāju (Google) rezultātos zem lapas virsraksta. Tam jābūt īsam (līdz 160 rakstzīmēm), informatīvam un unikālam katrai lapai:

<meta name="description" content="Iemācies HTML pamatus — virsrakstus, rindkopas, saites, attēlus un citus elementus. Pamācība latviešu valodā.">

Meklētāju norādījumi

<meta name="robots"> norāda meklētāju robotiem, kā rīkoties ar šo lapu:

<!-- Indeksēt lapu un sekot saitēm (noklusējums) -->
<meta name="robots" content="index, follow">

<!-- Neindeksēt lapu -->
<meta name="robots" content="noindex, nofollow">

Favicon — lapas ikona

Favicon ir mazā ikona, kas redzama pārlūkprogrammas cilnē, grāmatzīmēs un vēsturē:

<!-- Klasiskais favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Modernais favicon (SVG) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple ierīcēm -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Open Graph — sociālie tīkli

Open Graph meta tagi kontrolē, kā lapa izskatās, kad to kopīgo sociālajos tīklos (Facebook, LinkedIn, Twitter u.c.):

<meta property="og:title" content="HTML pamati — pamācība latviski">
<meta property="og:description" content="Apgūsti HTML no nulles ar piemēriem latviešu valodā.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/html-pamati">
<meta property="og:type" content="article">

CSS un JavaScript pievienošana

Ārējos CSS failus pievieno ar <link> elementu galvenē. JavaScript failus — ar <script> tagu, ko parasti ievieto pirms </body> noslēguma vai galvenē ar defer atribūtu:

<head>
<link rel="stylesheet" href="stils.css">
<script src="skripts.js" defer></script>
</head>

Atribūts defer nodrošina, ka skripts tiek izpildīts tikai pēc tam, kad viss HTML dokuments ir ielādēts.

Pilna head sadaļas paraugs

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Lapas apraksts meklētājiem">
<meta name="robots" content="index, follow">

<title>Lapas nosaukums</title>

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="stils.css">

<meta property="og:title" content="Lapas nosaukums">
<meta property="og:description" content="Lapas apraksts">
<meta property="og:image" content="https://example.com/bilde.jpg">

<script src="skripts.js" defer></script>
</head>

Laboja mad, labots 1x