Od provozovatele projektu Rychlost.CZ

HTML hlavičky - Začínáme s HTML

vydáno: 19.01.2016, seriál: Začínáme s HTML | komentářů: 0

Toto je 3. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Hlavičky HTML dokumentu obsahují metadata <meta> o daném dokumentu. Tyto informace se nezobrazují uživateli, ale používají je prohlížeče a vyhledávače. Dále se v hlavičce dokumentu připojují externí soubory pomocí tagu <link> nebo v ní lze editovat vzhled dokumentu tagem <style>. Také zde patří již zmiňovaný titulek stránky <title>.

Hlavičky se vkládájí mezi tagy <head> </head>.

Do naší ukázky si přidáme dva <meta> tagy. Tyto tagy se skládají z atributu name a obsahu content.

V našem příkladu uvádíme atribut keywords neboli klíčová slova. Do obsahu content uvedeme důležitá slova našeho dokumentu. 

Ukázka:
HTML
<meta name="keywords" content="html dokument, klíčová slova, webdev">
Použité tagy: <meta>

Druhým přidaným je tag <meta> s atributem description neboli popisem dokumentu. Tento popis se zobrazuje ve výsledcích vyhledávačů a měl by být u každého dokumentu odlišný.

Ukázka:
HTML
<meta name="description" content="Základní HTML dokument o hlavičkách">
Použité tagy: <meta>

Nakonec si přídáme do dokumentu interní styly vzhledu pomocí tagu <style>. Do tohoto tagu zadáváme vlastnosti elementu dle CSS referencí. V naši ukázce jsme zarovnali text v odstavci <p> na střed.

Ukázka:
HTML
<style>
p { text-align:center; }
</style>
Použité tagy: <style>
Ukázka:
HTML
<!DOCTYPE html>
<html land="cs">
<head>
<title>Titulek HTML dokumentu</title>
<meta name="keywords" content="html dokument, klíčová slova, webdev">
<meta name="description" content="Základní HTML dokument o hlavičkách.">
<style>
p { text-align:center; }
</style>
</head>
<body>
<p>Odstavec HTML dokumentu</p>
<!-- pokračování kódu -->
Použité tagy: <html>, <head>, <title>, <meta>, <style>, <body>, <p>

Zrekapitulujme si použité tagy.

<meta>

Párový tag definující metadata jako například znakovou sadu, klíčová slova, popis nebo jméno autora dokumentu.

  • Tip1 Správným nastavením metadat vylepšíte pozice dokumentu ve vyhledávačích

<style>

Párovým tagem <style> určujeme vzhled elementů přímo v dokumentu bez nutnosti použití externích souborů.

HTML: návody jak psát html tagy