Nadpisy - Český HTML 5 manuál

HTML a CSS Manuál Textové tagy 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.


 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Textové tagy - Český HTML 5 manuál

 

 

Komentáře

Avatar
Kit
Redaktor
Avatar
Kit:

Pokud se bavíme o SEO (dnes již mrtvé), doporučuji spíše konstrukci nadpisu ve stylu

<h1>Polozubka jatuarana</h1>

Samozřejmě za předpokladu, že daná podstránka je věnována polozubce jatuarana.

Takový nadpis se beze změny hodí i do tagu <title>. Ve výsledcích vyhledávání Google to vypadá pěkně.

Pod takovým nadpisem dobře vypadá i drobenková navigace ve stylu

Rybočich - Ryby - Sladkovodní - Polozubkovité - Polozubka stříbřitá

Vše jako odkazy - kromě poslední položky.

Použití stejného nadpisu h1 na všech podstránkách nedoporučuji. Čtenář takové nadpisy začne ignorovat a to nechceme.

Konstrukce uvedená v článku se hodí hlavně pro indexovou stránku (rozcestník) nebo souvislý článek o rybočiších. Značky h4 - h6 zpravidla nenajdou uplatnění.

Odpovědět 30.6.2012 9:04
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kit
David Čápka:

S tím h1 si to nemyslím, prakticky všechny weby v něm mají logo (ověřoval jsem si to hlavně u těch velkých). Přijde mi i z hlediska SEO lepší, když h1 obsahuje slovo ryba a až potom h2 její konkrétní druh. Stránka je v povědomí vyhledávače jako o rybě a potom následuje její název. Když má hodně stránek to samé slovo ryba v h1, bude web velmi silný ve vyhledávačích pro ryby. To je většinou to, co chceme. Musíme si položit otázku, jak často bude člověk hledat konkrétní rybu a jak často bude hledat něco jako "akvarijní ryby druhy". Optimalizujeme pro druhý dotaz a pod jménem rybu samozřejmě také nalezneme, jen má ten nadpis o něco menší váhu. S tou drobénkovou navigací by to šlo, ale stejně jsem přesvědčen, že je vhodnější postupovat opačně a zastřešit celý web pod několik klíčových slov v h1.

U poslední konstrukce s nadpisy jen ukazuji jak se zanořují, je tam napsané, že se to v praxi příliš nepoužívá.

Odpovědět 30.6.2012 9:44
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.