Různé druhy HTML značek

Dělení HTML značek podle způsobu jejich otevírání a uzavírání.

30. září 2013

HTML

HTML značky

7 minut

HTML značky

V jazyce HTML mají různé elementy různá pravidla pro zapisování počátečních a koncových značek.

Počáteční i koncová značka povinná

Některé elementy mají povinnou <počáteční> i </koncovou> značku. Například <div>, <span>, <b>, <h1> apod.

Takové značky v případě ručního neukončení teoreticky ukončí až konec dokumentu a validátor bude hlásit chybu. Často se označují jako značky párové.

Koncová značka volitelná

Další kategorie má povinnou jen značku počáteční a koncová značka je volitelná. Uzavření elementu se potom odvodí z kontextu. Patří sem odstavce (<p>), položky seznamů (<li>, <dd>, <dt>), řádky a buňky tabulek (<tr>, <th>, <td>) nebo formulářový prvek <option>.

Vychází se z jednoduchých pravidel, že například v odstavci / položce seznamu / buňcě tabulky nemůže být další odstavec / položka seznamu / buňka tabulky nebo jiný blokový element, takže se před takovou značkou element automaticky sám ukončí.

V následujícím kódu tedy element <div> ukončí odstavec.

<p>Odstavec bude ukončen automaticky.
<div>
</div>

Zakázaná ukončovací značka

Třetí skupina elementů má koncovou značku zakázanou, jde o tagy jako <img>, <input>, <br> nebo <hr>. Prohlížeče zpravidla omylem uvedenou zakázanou koncovou značku ignorují. Někdy se tyto elementy označují jako nepárové.

Počáteční i koncová značka volitelná

Poslední skupina má počáteční i koncovou značku volitelnou. Takové elementy jsou v kódu povinné, a nejspíš proto se v případě vynechání vytvoří samy bez přičinění autora webu.

Nic ale nebrání je ručně zapsat.

Jedná se o značky jako <html>, <head>, <body> nebo <tbody>.

Tyto elementy se vytvářejí a ukončují rovněž na základě kontextu. Pokud zapíšeme následující kód (v HTML 5 validní).

<title>Titulek stránky</title>
<table>
  <tr>
    <td>Buňka tabulky.
</table>

Prohlížeč může postupovat zhruba následovně:

Nalezne značku <title>, ta ale musí být v elementu <head>, takže ho prohlížeč vytvoří. Element <head> ale zase musí být v <html> → vytvoří se <html>.
Prohlížeč narazí na <table>, tabulka (jakýkoliv obsah) musí být v elementu <body> → vytvoří se napřed <body>.
Element <tr> nemůže být jen tak v tabulce, takže prohlížeč vytvoří <tbody>.
Značka </table> ukončí <tr> i <td>.
Konec dokumentu ukončí <body> a <html>.

Lze se o tom přesvědčit ve vývojářských nástrojích:

Výsledné HTML po domyšlení značek

Význam v praxi

Z neuzavírání nebo neotevírání zbytečných značek reálně nehrozí žádné risiko, že by prohlížeč zavření značek špatně domyslel.

Někteří tvůrci webů zastávají přístup:

Všechny značky ukončuji, takže mě nějaké členění na párové, nepárové, povinně nepárové a nepovinné nemusí zajímat.

Problém je, že:

Skupinu se zakázanou ukončovací značkou je potřeba znát tak jako tak.

Znalost pravidel ukončování může předejít nevysvětlitelným chybám, kdy se nekorektním zanořením ukončí značka jinak, než to vypadá v HTML kódu.

<p style="color: red">Odstavec bude červený automaticky.
  <div>
    Obsah oddílu červený nebude, odstavec se ukončí před ním 
    a koncová značka odstavce tak nemá co ukončovat.
  </div>
</p>

Neznalost chování <tbody> může zaskočit při zkoumání tabulky ve vývojářských nástrojích. A rozlišování dokumentu na část <head> a <body> celkem postrádá smysl.

HTML editory a volitelné značky

Skoro by se dalo říct: proč psát zbytečné značky, které si prohlížeč snadno domyslí?

Problém je špatná znalost editorů správného chování při uzavírání HTML značek.

Neuzavírání např. odstavců potom třeba selže při odsazování.

<p>První odstavec
  <p>Druhý odstavec
    <p>Třetí odstavec

Použít funkci pro sbalení „neukončené“ HTML značky nebo si nechat označit obsah „neukončené“ značky asi bude problém.

Kromě toho často přímo editory umí ukončovat značky tak nějak automaticky. Například s nástrojem Emmet (nebo přímo v Sublime Text editoru) nás nějaké ukončování trápit nemusí, protože HTML značky je možné zapisovat jako znacka + Tab a párovost značky se sama určí.