HTML prvek <head> je kontejner pro následující prvky: <title>, <style>, <meta>, <link>, <script> a <base>.

HTML prvek <head>

Prvek <head> je kontejnerem pro metadata (to jsou data o datech) a je umístněn mezi prvky <html> a <body>. Metadata jsou data o HTML dokumentu jako celku a nejsou zobrazována (kromě titulku).

Metadata určují titulek dokumnetu, znakovou sadu dokumentu, styly, skripty a další meta informace.

HTML prvek <title>

Titulek <title> určuje jak bude dokument pojmenován v prohlížeči. Musí to být jenom text. Je zobrazen na horní liště prohlížeče.

Prvek <title> je povinný pro každý HTML dokument.

Obsah titulku je velmi důležitý pro prohledávací roboty a závisí na něm optimalizace prohledávače (Google a jiné.) Titulek se používá ve vyhledávacím algoritmu vyhledávače k rozhodnutí pořadí, ve kterém jsou nalezené stránky (výsledky hledání) zobrazeny uživateli.

Prvek <title>:

  • určuje jméno dokumentu v prohlížeči.

  • pokud si stránku uložíme do historie, tak stejný název budeme mít v historii.

  • zobrazuje se ve výsledcích prohledávání prohledávače

Takže, snažte se, aby váš titulek byl co nejvýstižnější!

Příklad <title>
<!DOCTYPE html>
<html>
<head>
  <title>Smysluplný titulek</title>
</head>
<body>
<p>
Obsah HTML stránky ......
</p>
</body>
</html>

HTML prvek <style>

Prvek <style> se používá k definici stylu celé HTML stránky, t.j. definujeme jak stránka vypadá (ne co obsahuje).

Příklad <style>
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

HTML prvek <link>

Prvek <link> definuje vztah mezi naším dokumentem a dalším zdrojem, který v dokumentu potřebujeme. Používá se často k svázání externího stylu.

Příklad <link>
<link rel="stylesheet" href="mujstyl.css">
Všechno o stylech najdete na CSS Tutorial na W3Schools v angličtině.

HTML prvek <meta>

Prvek <meta> se používá obvykle pro určení znakové stránky webového dokumentu, popisu, klíčových slov pro vyhledávače, autora dokumentu a nastavení pohledu.

Metadata nejsou zobrazena na stránce, ale používá je prohlížeč (třeba jak zobrazit stránku nebo jak často ji občerstvit). Dále je používají vyhledávače a jiné webové služby.

Příklady

Nastavení znakové sady stránky UTF-8
<meta charset="UTF-8">
Klíčová slova pro vyhledávače
<meta name="keywords" content="HTML, CSS, JavaScript">
Popis webové stránky
<meta name="description" content="Výuka HTML, hlavička dokumentu a prvky v hlavičce">
Určení autora
<meta name="author" content="Mgr. Ing. Jiří Chráska"
Občerstvení stránky každých 30 sekund
<meta http-equiv="refresh" content="30">

Toto se používá třeba k funkci html stránek, které zobrazují nějaké proměnlivé hodnoty (třeba měření z meteostanice). Každých 30 sekund se stránka načte znovu z web serveru a překreslí se v prohlížeci.

Nastavení pohledu (viewport)

Viewport je viditelná plocha webové stránky, tak jak ji vidí uživatel. Je závislá na zařízení, na mobilech je menší než na počítači.

Meta "viewport" určuje, jak se bude stránka chovat na různých displejích.

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

Viewport říká prohlížeči jak nastavit rozměry stránky a její měřítko.

width=device-width nastavuje šířku stránky na šířku obrazovky zařízení (která je na různých zařízeních jiná).

initial-scale=1.0 nastavuje počáteční přiblížení, když je stránka načtena prohlížečem.

Následují příklady s bez nastavení viewportu a s nastavením. Obě stránky si otevřete na vašem "chytrém" mobilním telefonu a uvidíte rozdíl.

Tabulka 1. Porovnání rozdílu
stránka bez viewportu stránka s viewportem

Screenshot 20240613 003624 com.android.chrome

Screenshot 20240613 003653 com.android.chrome

HTML prvek <script>

Prvek <script> už známe z lekce o JavaScriptu, definuje nám JavaScriptový program, který běží v prohlížeči.

Příklad <script> se zabudovaným JavaScriptem přímo v dokumentu
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Ahoj z JavaScriptu!";
}
</script>
Příklad <script> s odkazem na JavaScript v externím souboru
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>

Toto používám na svém webu k správné sazbě matematiky, pomocí HTML a stylů to moc nejde.

HTML prvek <base>

Prvek <base> určuje základní URL anebo cíl pro všechna relativní URL ve stránce. Ovlivňuje všechny relativní odkazy pomocí href a de facto je přepisuje na absolutní.

Prvek <base> musí mít v sobě buď atribut href nebo target a nebo oba dva.

V celém dokumentu může být pouze jeden prvek <base>.

Příklad <base>
<head>
  <base href="https://sspvc.lixis.cz/operacni_systemy/os-2.rocnik/html/" target="_blank">
</head>

K čemu se to používá?

Moc se to nepoužívá. Někdy se to používá pro ladění webu.

Zajímavý je target="_blank" to zajistí otevírání každého odkazu v novém okně prohlížeče. Další hodnoty target jsou popsány zde.

Shrnutí prvků hlavičky

Můžete kliknout na odkazy v prvním sloupci a zobrazí se vám podrobný výklad v angličtině na webu https://www.w3schools.com/.

Prvek (tag) Popis (description)

<head>

Definuje informace o celém dokumnetu.

<title>

Nastavuje titulek dokumentu.

<base>

Nastavuje implicitní adresu a cíl pro všechny odkazy na stránce.

<link>

Definuje vztah mezi dokumentem a externím zdrojem.

<meta>

Nastavuje metadata o HTML dokumentu.

<script>

Definuje skript běžící na straně klienta

<style>

Definuje styl pro dokument.