Vlastní HTML značky

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 

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Reset políčka pro nahrávání souboru

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

Přeškrtnutí značkou S

Škrtnutí značkou <s>

Značka <s> slouží k označení obsahu, který už je zastaralý nebo není relevantní.

Podmíněné komentáře pro IE

Podmíněné komentáře pro Internet Explorer

Jak rychle a snadno hackovat HTML a CSS v různých historických versích Internet Exploreru.

Tag <label> a atribut for

Značka <label> a atribut for

Značka <label> slouží ke svázání popisku s formulářovým prvkem. Kdy použít atribut for?

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Komentáře