Hlavička HTML dokumentu - Český HTML 5 manuál
Hlavička je první částí HTML dokumentu a obsahuje informace hlavně pro prohlížeč. Můžeme do ní vložit následující tagy:
<title>
<title> je párový tag a obsahuje titulek stránky. Každá HTML stránka ho musí v hlavičce obsahovat a je velmi důležitý pro vyhledávače z hlediska SEO. Titulek by měl obsahovat klíčová slova a zobrazí se jako nadpis záložky v prohlížeči.
Hlavička s titulkem by mohla vypadat např. takto:
<head> <title>Titulek stránky</title> </head>
<style>
Element <style> slouží k vložení stylování přímo do HTML dokumentu. Příliš se nevyužívá, jelikož se styly preferují v externím souboru.
U elementu můžeme uvést nasledující atributy:
- type - Specifikuje typ stylu, jako hodnotu uvedeme text/css.
- media - Sepecifikuje typ zařízení pro který je styl optimalizován. Atributem se nyní nebudeme zabývat.
- scoped - Pokud je atribut uveden, může tag stát mimo hlavičku. Styluje div, jehož id je hodnotou tohoto atributu. Element style je poté součástí tohoto divu.
Ukažme si, jak by se přímo v hlavičce nastyloval nadpis h1:
<head> <title>Titulek stránky</title> <style type="text/css"> h1 {color:blue} </style> </head>
<link>
<link> se používá k provázání dokumentu s externím souborem. Nejčastěji se tak k dokumentu připojují CSS styly. Smí být obsažen pouze v hlavičce a to i několikrát. Nemá obsah, má pouze atributy.
Atributy:
- href - Specifikuje umístění připojovaného souboru (dokumentu).
- hreflang - Specifikuje jazyk připojovaného dokumentu.
- media - Specifikuje typ zařízení, pro které je připojovaný dokument určen.
- rel - Specifikuje vztah mezi dokumenty. nejčastějši hodnoty jsou stylesheet a icon.
- sizes - Umožňuje specifikovat velikost ikony (pouze pro rel="icon").
- type - MIME typ připojovaného souboru (dokumentu). Nejčastěji text/css.
Ukázka připojení CSS souboru k dokumentu:
<head> <title>Titulek stránky</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Ukázka připojení ikony stránky:
<head> <title>Titulek stránky</title> <link rel="icon" href="/favicon.ico" /> </head>
<meta>
Tag <meta> poskytuje tzv. metadata. Jedná se o informace vložené do HTML dokumentu, které se nezobrazí uživateli, ale jsou určeny zejména vyhledávačům. Jistě si domyslíte, že jsou důležité pro SEO optimalizaci stránky.
<meta> musí být vždy umístěn v hlavičce stránky. Kromě vyhledávačů ho používají i webové prohlížeče a webové služby.
Tag má následující atributy:
- charset - Specifikuje znakovou sadu dokumentu. Nejčastěji obsahuje hodnotu UTF-8. Jedná se o nový HTML 5 atribut, který zjednodušuje minulou specifikaci znakové sady.
- content - Specifikuje parametr pro atributy name a http-equiv.
- name - Specifikuje jméno metadat, viz. ukázky níže.
Můžeme určit autora webové stránky:
<meta name="author" content="Jan Novák" />
Dále můžeme vyhledávačům předat klíčová slova, kterých se obsah webu týká.
<meta name="keywords" content="itnetwork, HTML, kurz" />
Nejdůležitější je však popis stránky pro vyhledávače.
<meta name="description" content="Kurzy pro tvorbu webu v HTML a CSS." />
Další dvě jména metadat jsou generator a application-name. V prvním případě je v content název aplikace, která generovala HTML kód (např. Microsoft Frontpage). V druhém případě je to název aplikace, kterou webová stránka reprezentuje, např. itnetwork.
- http-equiv - Umožňuje simulovat hlavičku http odpovědi. Dříve se používal k nastavení kódování.
Lze přes něj např. nastavit automatické obnovení stránky:
<meta http-equiv="refresh" content="30" />
Kód výše obnoví dokument každých 30 vteřin.
<script> a <noscript>
O elementech <script> a <noscript> vypovídá samostatný článek Klientské skripty (JavaScript) .
<base>
<base> umožňuje nastavit kořenovou složku pro relativní odkazy v dokumentu. Její nastavení tak ovlivní např. odkazy, obrázky a další prvky, u kterých je specifikováno relativní umístění.
Tag může být umístěn pouze v sekci <head> a to jen jednou.
<base> má dva atributy:
- href - Specifikuje kořenovou složku pro všechna relativní URL v dokumentu.
- target - Specifikuje cílové umístění pro všechny odkazy.
Ukázka použití <base> pro zjednodušení relativní cesty:
<body> <img src="http://www.mujweb.cz/obrazky/obrazek.jpg" alt="Obrázek" /> <a href="http://www.mujweb.cz/obrazky/psi.htm">Obrázky psů</a> </body>
Kód výše můžeme zjednodušit pomocí <base>. Pozor, jeho použití ovlivní relativní umístění všech elementů na stránce.+
<head> <title>Ukázka base</title> <base href="http://www.mujweb.cz/obrazky/" /> </head> <body> <img src="obrazek.jpg" alt="Obrázek" /> <a href="psi.htm">Obrázky psů</a> </body>
Tag se často využívá pro realizaci tzv. pretty URL. V tomto případě má atribut href na každé stránce hodnotu "/". Tak se zajistí, že pro stránku www.mujweb.cz/clanek/muj-pes bude kořenová složka stejná, jako by se HTML stránka nacházela přímo na www.mujweb.cz.