Vytváření vlastních HTML značek

Prohlížeč v podstatě cokoliv začínajícího < a nějakým písmenem považuje za HTML značku.

1. Pokud takovou značku zná a má nějaký speciální význam, převezme její obsah či atributy a na jejím místě zobrazí nějakou svou komponentu.

   Typickým příkladem jsou formulářové prvky, například značka <input>, která vykreslí , nebo třeba značka <progress> vykreslí v podporovaných prohlížečích průběh.

2. Když daná značka žádnou komponentu vykreslovat nemá, což je většina značek (např. <div>, <span>, <h1> apod. nebo i vlastní značky), pouze se vypíše obsah mezi počáteční a koncovou značkou.

Známé značky potom mají v prohlížečích před-připravené CSS styly (zhruba následující), tudíž třeba <h1> se zobrazí velkým tučným písmem s odsazením. Nic nám ale nebrání známé i neznámé značky dále stylovat.

Vlastní značka

Zapíšeme HTML:

<ctverec barva=modry></ctverec>

Přidáme trochu CSS:

ctverec {display: block; width: 50px; height: 50px}
ctverec[barva=modry] {background: blue}

A čtverec zapsaný vlastní značkou je na světě:

Co na to specifikace?

HTML specifikace přímo počítá s vytvářením vlastních značek. Aby nedocházelo ke konfliktu s existujícími značkami, mají mít vlastní tagy v názvu –.

Příklad se značkou <ctverec> tedy neodpovídá specifikaci. V praxi nicméně bude fungovat. Jedině hrozí risiko, že někdy v budoucnu vznikne oficiální značka stejného názvu.

Starší prohlížeče

V IE 8 a starších se normálně neobjeví nic, protože stylovat neznámé značky neumí.

Dá se tomu ale pomoci skriptem:

document.createElement("nazev-znacky");

Popřípadě registrování vlastních značek víc automatisovat.

var znacky = "ctverec obdelnik kruh";
znacky.replace(/\w+/g, function(znacka){document.createElement(znacka)});

HTML 5 značky

Jako vlastní HTML značky se chovají i elementy z HTML 5 jako <header>, <footer>, <article> a podobně, tj. starší prohlížeče je neznají a není možné je stylovat.

HTML 5 značky v IE 8 a starších

Stačí použít výše uvedený postup pro vlastní značky i s HTML 5 značkami. A nejspíš skript připojit podmíněnými komentáři jen pro IE 8 a starší.

<!--[if lte IE 8]>
<script>
var znacky = "article aside audio bb canvas datagrid datalist details dialog eventsource figure figcaption footer header hgroup mark menu meter nav output progress section time video";
znacky.replace(/\w+/g, function(znacka){document.createElement(znacka)});
</script>
<![endif]-->

Používat, nebo ne?

Z důvodu zmíněné nekompatibility se nabízí otázka, zda vlastní HTML značky nebo neznámé HTML5 značky používat.

Z pohledu vývojáře

Mohou vlastní/HTML5 značky zpřehlednit a zrychlit psaní. Místo <div class=header> stačí napsat <header>.

Z pohledu návštěvníka

Momentálně nenabízejí vlastní značky téměř nic navíc, jen vytváří komplikace uživatelům starších Explorerů, ve kterých je celý web s využitím vlastní značek závislý na JavaScriptu, který navíc ještě zdržuje načítání.

Odkazy jinam

HTML5 Shiv

Hotové řešení registrující HTML 5 značky pro starší prohlížeče řeší i výchozí CSS a jde hotlinkovat.

Hotlinkování se zrovna v tomto případě ukázalo jako nepraktické, protože URL níže přestala fungovat.

Hromada webů je tak teď kvůli tomu rozbitá v Internet Exploreru 8.

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Připojit vzdáleně HTML5 Shiv je možné například z CDNJS, ale nejbezpečnější s ohledem do budoucna je použít lokální kopii.

Hudba budoucnosti 

• Custom Elements: defining new elements in HTML
• A Detailed Introduction To Custom Elements
• Custom Elements for Custom Applications