Nadpisy - Český HTML 5 manuál

V HTML máme k dispozici 6 typů nadpisů. Hovoříme o nadpisu úrovně 1 až nadpisu úrovně 6. Nadpisy slouží pro lepší orientaci na webu a to jak pro čtenáře, tak pro vyhledávače. Jsou klíčové pro SEO a právě z nadpisů si Google bere mnoho informací. Zaměřme se na to, kdy jakou úroveň správně použít.

<h1>

Nadpis úrovně 1 má nejvyšší váhu a smí být v HTML dokumentu pouze jeden. Dnes, v době dynamických webů, se uchytilo vložení stejného h1 do všech stránek. Tento hlavní nadpis obsahuje název webu a případně nějaký slogan, např:

<h1>Rybočich - vše pro ryby a akvarijní živočichy</h1>

Jelikož často používáme pro takovýto název webu grafické logo, vžil se způsob obrázkového nadpisu h1, který je přívětivý i pro vyhledávače. Obrázký jsou řádkové elementy a nadpisy blokové, můžeme tedy snadno obrázek vložit přímo do tagu h1:

<h1><img src="logo.png" alt="Rybočich - vše pro ryby a akvarijní živočichy" title="Rybočich - vše pro ryby a akvarijní živočichy" /></h1>

Pro jistotu zadáme i alternativní text, i titulek, aby vyhledávače nadpis správně zaindexovaly. U některých webů lze vidět obrázkový nadpis řešený tak, že mají v h1 text, který poté pomocí CSS skryjí nebo nastaví mimo obrazovku. Všechny takovéhle nekalé techniky jsou však nebezpečné, protože se Google nemusí líbit (a také nelíbí) a váš web je poté evidován jako podvodný. To samozřejmě sníží jeho pozici ve vyhledávači a tím i návštěvnost.

Pokud máte statické webové stránky (např. s iframe), bude v nadpisu h1 spíše zaměření dané stránky než název webu.

<h2>

Nadpis druhé úrovně se používá již jako nadpis dané podstránku/článku. Leží vždy pod nadpisem h1. Nadpisy ostatně vždy řadíme logicky za sebe. H2 se teoreticky může vyskytovat na stránce vícekrát, ale není to obvyklé. V našem příkladu s webem pro akvaristy by nadpis h2 mohl vypadat takto:

<h2>Ryby</h2>
<p>Ryba je vodní živočich s osifikovanou páteří. Řadíme je do obratlovců...</p>

Označoval by podstránku, ve které jsou vypsány informace o rybách.

<h3 - h6>

Další 4 nadpisy jsou již určeny pro lepší orientaci v textu. Pojďme si ukázat, jak se používají:

<h2>Ryby</h2>
<p>Ryba je vodní živočich s osifikovanou páteří. Řadíme je do obratlovců...</p>

<h3>Sladkovodní</h3>
<p>Sladkovodní ryby jsou výborná volba pro domácí akvária.</p>

<h4>Vrubozobcovité<h4>

<h5>Kančík tyrkysový</h5>
<p>Modrofialová rybička, která je vhodná do větších akvárií...</p>

<h4>Polozubkovité</h4>

<h5>Polozubka jatuarana</h5>
<p>Agresivní rybka, hledající potravu u dna...</p>

<h5>Polozubka stříbřitá</h5>
<p>Má nejmenší šupiny ze všch a ploché zoubky ve 2 řadách...</p>
<h6>Obrázky polozubek</h6>
<p><img src="obrazky/ryby/polozubky/stribrna1.jpg" alt="Polozubka u dna" /></p>
<p><img src="obrazky/ryby/polozubky/stribrna2.jpg" alt="Polozubka při krmení" /></p>


<h3>Slanovodní</h3>
<p>Pěstování slanovodních ryb je složitější, musíte totiž vodu osolit.</p>

<h4>Mečounovité</h4>
 . . .

V reálu by byly ryby rozděleny do několika podstránek a nepotřebovali bychom tedy tolik nadpisů. Výše uvedená ukázka je spíše teoretická a poslední 2 úroveně nadpisů se příliš nepoužívají.

Atributy

Nadpisy obsahovaly atribut align, který však již není validní. Jako v blokovém elementu v nich nyní text zarovnáme v CSS pomocí:

h1 {
  text-align: center;
}

Tagy h1-h6 tedy nemají žádné atributy.