Blokové a řádkové prvky
Prvky, které HTML dává k dispozici pro strukturování textu, lze rozdělit do dvou základních kategorií: na blokové a řádkové.
Blokové jsou takové, které vytvoří samostatný blok textu. Jinými
slovy před nimi a za nimi klient ukončí řádek. Typickými příklady blokových
prvků jsou <p>
, <blockquote>
, nadpisy
(<h1>
a spol.) či veškeré prvky pro vytváření seznamů.
Řádkové prvky naproti tomu jsou součástí běžného řádku. Nijak
nenarušují tok textu, který přes ně pokračuje normálně dál. Mezi řádkové patří
všechny prvky pro zvýrazňování textu,
<a>
a také (možná poněkud překvapivě)
<img>
.
Rozdíl mezi těmito dvěma kategoriemi je podstatný především pro formátování
stránky a úpravy jejího vzhledu pomocí CSS. Blokové prvky zde poskytují větší
možnosti, než řádkové. CSS vám také dává možnost chování prvku změnit
(vlastností display
). Například při konstrukci menu designéři
často změní <a>
na blokový prvek.
Neutrální prvky
Prakticky všechny prvky, jež HTML definuje, mají přiřazen určitý význam. Cosi vypovídají o textu ve svém těle. Například že se jedná o nadpis či o odkaz.
Existuje však dvojice tak zvaných neutrálních prvků, které s sebou žádný
význam nenesou. Jedná se o blokový prvek <div>
a řádkový
<span>
. Ty lze použít v situaci, kdy chcete určitou část
stránky odlišit od ostatních, ale nehodí se k tomu žádný z dostupných
významnových prvků. Většinou se používají v kombinaci s atributem
class
či id
, které je zařadí do určité třídy,
případně jim přidělí identifikátor. Díky tomu pak v CSS můžete předepsat, jak
mají vypadat.
Řekněme, že v textu pracujete s rozsáhlejšími příklady. Každý má svůj nadpis, zpravidla několika odstavců textu a možná ještě další obsah (obrzáky, seznamy a podobně). Bylo by vhodné v kódu vyznačit (a následně pomocí CSS zvýraznit), že tyto prvky patří k sobě a dohromady tvoří jeden příklad. Mohlo by to vypadat nějak takto:
<div class="priklad"> <h3>Název příkladu</h3> <p>Tady bude text příkladu.</p> <p>Může být složen z několika odstavců.</p> </div>
Dříve se prvky <div>
běžně využívaly k vyznačení
základních částí stránky – menu, logo, hlavní text, patička,...
HTML5 ovšem pro tyto účely zavedlo významové prvky.
Prostřednictvím <span>
si zase můžete definovat určité
kategorie textu a používat je k zvýrazňování pojmů. Například pro zeměpisný
text si můžete definovat třídy pro řeky (budou modré), města (šedá) a pohoří
(hnědá) a pomocí <span>
přiřazovat tyto třídy částem textu.
Například:
<span class="mesto">Praha</span> je hlavním městem České republiky. Protéká jí řeka <span class="reka">Vltava</span>.
S odpovídající stylovou definicí může pak výsledek vypadat takto:
Praha je hlavním městem České republiky. Protéká jí řeka Vltava.
Ovšem zrovna v tomto případě by zřejmě bylo vhodnější místo
<span>
použít například <em>
, aby názvy
měst a řek byly zvýrazněny i u klientů nepodporujících CSS.
Neutrální versus významové prvky
Předchozí odstavec se dotkl důležitého problému, kdy používat neutrální a
kdy významové prvky. Díky CSS lze snadno vytvořit třídu nadpis
,
která bude k nerozeznání podobná <h1>
a pro nadpis stránky
pak místo <h1>
použít <div
class="nadpis">
. Proč to nedělat?
Stručně řečeno proto, že o <div class="nadpis">
nikdo
kromě vás neví, že se ve skutečnosti jedná o nadpis. Navštíví-li takovou
stránku program sbírající podklady pro vyhledávací službu (Google, Jyxo apod.),
nepozná, že text uzavřený v <div class="nadpis">
je vlastně
nadpisem stránky a nepřidělí mu proto bodové hodnocení. Navštíví-li vaši
stránku někdo s textovým či zvukovým klientem, nadpis nebude adekvátním
způsobem zvýrazněn.
Pokud je stránka dobře strukturována a její části charakterizovány pomocí
významových značek, bude se dobře zpracovávat každému programu pro práci s
Webem a bude dávat uspokojivé výsledky. Kdykoli tedy budete uvažovat o použití
<div>
či <span>
, měli byste se nejprve
zamyslet nad významem dotyčné konstrukce a nad tím, zda neexistuje vhodná
významová značka, která by tomuto významu odpovídala.
Jedním z praktických (a žádaných) důsledků dobře významově strukturovaných stránek je, že se lépe umísťují ve výsledcích vyhledávačů.
zpět: strukturování textu