Cookies

Na naší webové stránce používáme soubory cookies pro její správné fungování, přizpůsobení analytických dat a dynamiky obsahu pro uživatele. Více informací o cookies.

Potvrzením zároveň ukládáte souhlas se zpracováním osobních údajů v rámci nařízení GDPR.

Hlavička HTML

Všeobecné i specifické nastavení stránky
Předchozí Následující

#1 Hlavička <head>

V každém správném dokumentu se musí nacházet hlavička, která obsahuje doplňující informace o stránce – od názvu stránky k informacím pro vyhledávací engine, takzvaná metadata.

Tip: Cokoliv, co se nachází v hlavičce, se na stránce nezobrazuje. 
<head>

 <link rel="stylesheet" type="text/css" href="style.css">

 <meta charset="utf-8">

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

 <title>Název stránky</title>

</head>

									

									
								
							
Prvek <title>

								
Prvek <title>, neboli název stránky (titulek), je prvek, jehož cílem je definovat název stránky – text, který se zobrazuje nejen na záložce v prohlížeči, ale také v seznamu stránek vyhledávače a pomáhá vyhledávacímu enginu kategorizovat Vaší stránku. Více se dozvíte v následující kapitole.

							
								
Proto je nejlepší mít název stránky co nejvýstižnější (ne však velmi dlouhý – čehokoli moc škodí).

							
<title>Název stránky, který dává smysl</title>

									

									
								
							
								
									Upozornění:
									Název stránky je pro každý dokument povinný!
								
							
Metadata

								
Nepárový prvek metadat <meta>, se používá k doplnění aditivních informací o stránce. Může se jednat o klíčová slova, autora dokumentu, nastavení viewportu atd.

							
								
									Poznámka:
									Metadata jsou důležitá pro vyhledávače, jelikož jsou využívána k indexaci stránek.
								
							
								
Příklad některých často využívaných metadat:

							
<meta charset="UTF-8">

<meta name="keywords" content="HTML, hlavička, meta">

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

<meta name="description" content="Tutoriály pro HTML">

									

									
								
							
Propojení souborů

								
Do hlavičky se téměř vždy vkládá propojení na CSS soubory, které stylují danou stránku. Soubory lze propojit pomocí nepárového prvku <link> a atributu href a několika dalších doplňujících.

							
<link rel="stylesheet" href="general.css">

<link rel="stylesheet"href="page.css">

									

									
								
							
								
CSS styly nemusí být propojeny pomocí prvku <link>, ale můžou být do hlavičky vloženy přímo pomocí prvku <style>.

							
Seznam nejčastějších prvků v hlavičce
Tag  Popis

<title>  Definuje název stránky (více v další kapitole)

<meta>  Definuje metadata – informace o stránce

<link>  Propojení souborů, nejčastěji stylovacích

<style>  Stylování dokumentu

<script>  Client-side skript (nejčastěji JavaScript)

<base>  Defaultní URL adresa webu pro relativní odkazy

								
Příklad hlavičky s některými prvky:

							
<head>

 <link rel="stylesheet" type="text/css" href="style.css">

 <meta charset="utf-8">

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

 <base href="https://piskod.cz/">

 <title>Název stránky</title>

</head>