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> pro odkazy a také (možná poněkud překvapivě) <img> pro obrázky.

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 div a span

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ýznamový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 (obrázky, 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, Seznam apod.), nepozná, že text uzavřený v <div class="nadpis"> je vlastně nadpisem stránky a nepřidělí mu proto větší váhu než běžnému textu na stránce. 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 prvků, 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čů.