HTML značky <div> a <span>

Elementy <div> a <span> jsou hodně zvláštní tím, že na rozdíl od ostatních HTML značek prakticky nemají žádný význam a používají se téměř výhradně pro účely CSS stylování.

Pro účely stylování se těmto značkám přidávají třídy nebo identifikátory.

<div class="trida">
  Element stylovaný přes třídu
</div>

Druhé využití je pro obalení skupiny prvků, které potřebují mít stejný atribut (například určení jazyku atributem lang) nebo pro manipulaci pomocí JavaScriptu.

Rozdíl mezi <div> a <span>

Jediný rozdíl mezi oběma značkami je v tom, že <div> je blokový (display: block) a <span> řádkový (display: inline).

Před a za značkou <div> se tedy zalomí řádek. U <span>u nikoliv.

<div>

Název značky je odvozen od anglického division = česky oddíl.

Jedná se o blokový element s povinnou počáteční i koncovou značkou. Atributy má pouze globální.

Protože se pomocí <div>ů s oblibou stavěl a staví celý layout stránek, autory HTML specifikací napadlo přidat nové strukturální značky jako jsou <header>, <article>, <section>, <footer> a podobně.

Správně by se měly používat místo <div>u, kdykoliv to dává smysl. S ohledem na problémy těchto značek ve starších prohlížečích (IE 8 je neumí stylovat bez použití JS) je k úvaze, jestli přináší tak velkou výhodu, aby mělo smysl je používat místo <div>ů.

Psát v CSS místo .footer jen footer a v HTML <div class="footer"> nebo <footer> není zase takový rozdíl.

<span>

Řádková neutrální značka, která při samotném použití nic nedělá. Například v předchozí větě je každé slovo obalené ve <span>u. Jako by nebylo.

Používá se mnohem méně než <div> (cca 3× méně). Asi proto, že řádkových značek pro zvýraznění obsahu existuje víc, než je potřeba.

Sémantika

Protože <div> a <span> nemají zvláštní sémantický význam, mělo by jejich použití být až poslední možnost, po které tvůrce webu sáhne.

Pomocí stylování není problém celý web sestavit jen z <div>ů a <span>ů a nahradit tak nadpisy, odstavce nebo seznamy.

Někteří začátečníci sahají k tomuto řešení, protože <div> a <span> mají minimum výchozích CSS pravidel, které tak není nutné přebíjet.

Není to ale úplně rozumné, protože bez používání odpovídajících HTML značek se z kódu vytratí čitelnost pro nevisuální zařízení, jako jsou:

1. roboti některých vyhledávačů,
2. slepí uživatelé odkázaní na hlasové čtečky

I některé velké JS aplikace používají <div>/<span> místo sémanticky vhodnějších značek. Tam to nemusí vadit, protože požadovaná funkce je zajištěna skriptem, aplikace nepotřebují být indexované vyhledávači a pro přístupnost slouží atributy aria a role:

Pro běžné weby ale bývá pohodlnější a snazší volit sémantické značky.