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

vydáno: 19.01.2016, seriál: Začínáme s HTML

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

Témata

Seriály

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

`<meta>`

`<style>`

Seriál Začínáme s HTML

Seznam všech článků seriálu: