HTML5 - nové vlastnosti

Stejně jako CSS3 tak i HTML5 s sebou přináší spousty nových vlastností, tagů a sémantiky, ale i offline webové aplikace, podporu audia a videa bez použití flashe a dalších ovládacích modulů, také microdata, která slouží k sémantickému popisování dat a samozřejmě další novinky.

V tomto článku se budu věnovat nové sémantice, novým tagům a novým vlastnostem tagů v HTML5, ale i těm starým z HTML 4.1, které přetrvaly nebo dostaly nový význam. Určitě zde nenajdete vše, protože změn a novinek je spousta, pokusím se tedy představit ty nejdůležitější a nejpraktičtější. O samotném HTML5 bylo napsáno tolik, že ho snad není třeba představovat. Předem se omlouvám za všechny nesrovnalosti, které můžete v článku najít, je to způsobeno tím, že HTML5 je stále ve fázi navrhování a ne každý zdroj, ze kterého jsem čerpal, je aktuální.

Jako zdroje informací jsem použil především připravovaný návrh konsorcia W3C pro HTML5, také mi posloužila osobní stránka Jense Meierta, kde naleznete podporované vlastnosti v různých verzích HTML a XHTML, a také seriál Webdesignérův průvodce po HTML5 na zdrojak.cz.

!DOCTYPE

Nejdříve začneme trochu zlehka, a to prologem pro HTML, který se od svých předchůdců podstatně liší, a to v tom, že již nemusíte uvádět verzi a odkaz na DTD. Dnes již stačí prohlížeči říct, že jde o HTML a to je vše, prohlížeče stejně nic jiného nezajímá. Níže si můžete porovnat !DOCTYPE pro HTML 4.1, XHTML 1.1 a nové HTML5.

Element není párový.

Ukázka zdrojového kódu:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> // HTML 4.01 Transitional
<!DOCTYP html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> // XHTML 1.1
<!DOCTYPE html> // HTML 5

a

HTML5 nijak zásadně nezasahuje do již tradičního elementu a, pouze rozšiřuje jeho možnosti, nyní už nemusíte odkazovat pouze textem nebo obrázkem, HTML5 umožňuje do hypertextového odkazu zabalit jakékoli, i blokové, elementy. Také je již korektní atribut target, který byl v předchozí verzi korektní pouze v HTML 4.01 Transitional.

Element je párový.

Možné atributy:

href = adresa stránky, na kterou se má odkazovat; hodnotou je URL
target = způsob otevření stránky, na kterou se odkazuje; hodnotami jsou _blank (nový panel), _top (nové onko), _parent (nadřazený rám) nebo _self (aktuální panel)
rel = druh odkazu; hodnotami jsou alternate, stylesheet, start, next, prev, contents, index, glossary, chapter, section, subsection, appendix, help a bookmark, nicméně v praxi většinou nenajdou uplatnění
hreflang = jazyk stránky, na kterou odkaz směřuje; hodnotami jsou národní zkratky

Ukázka zdrojového kódu:

<a href="http://programujte.com" target="_blank" hreflang="cs"> 
    <h2>HTML5 - držte krok s dobou (nové vlastnosti)</h2>
    <p>Článek ukazuje nové vlastnosti jazyka HTML 5..</p>
</a>

Více informací o elementu a naleznete na W3C a W3C schools.

article

Element article reprezentuje část obsahu stránky, který tvoří samostatnou a nezávislou část, například článek nebo komentář. Element může, ale nemusí, obsahovat další prvky jako header, footer nebo jiný article.

Element je párový.

Ukázka zdrojového kódu:

<article>
   <header> 
      <h2>Název článku</h3>
      <time datetime="2010-09-01">01. září 2010</time> 
   </header>
  <p>Obsah, nebo popis článku.</p>
</article>

Více informací o elementu article naleznete na W3C a HTML5 Doctor.

aside

Element aside definuje nějaký obsah, který by měl být spojen s hlavním obsahem stránky, lze jej tedy využít například pro boční panel na stránce. Nesmí být potomek elementu address.

Element je párový.

Více informací o elementu aside naleznete na W3C a HTML5 Doctor.

b

Tomuto elementu je nově v HTML5 přidělen zvláštní sémantický účel, a to odlišení od zbytku textu. Na obsah elementu se neklade žádný zvláštní význam, text je pouze označen tučně, hodí se například pro klíčová slova.

Element je párový.

Více informací o elementu b naleznete na W3C a HTML5 Doctor.

canvas

Element canvas je pouze plátno pro dynamické vykreslování obrázků, grafiky, her, grafů a podobně, element je tedy jen kontejner pro grafiku, pro skutečné vykreslení grafiky je nutné použít skript.

Element je párový.

Možné atributy:

width = šířka plátna; hodnotami jsou délkové míry
height = výška plátna; hodnotami jsou délkové míry

Více informací o elementu canvas naleznete na W3C a HTML5 Doctor.

cite

Přestože element cite byl obsažen již v předchozích verzích HTML, tak v novém HTML5 se upřesňuje jeho využití, a to pro označení titulku díla, ze kterého je citováno.

Element je párový.

Více informací o elementu cite naleznete na W3C a W3C schools.

details

Element details se používá k popisu podrobností o dokumentu nebo části dokumentu, ze kterého může uživatel získat další informace. Element nesmí být potomkem a ani button.

Element je párový.

Možné atributy:

open = obsah bude uživateli viditelný; bez hodnoty

Více informací o elementu details naleznete na W3C a W3C schools.

figcaption a figure

Element figcaption je potomek elementu figure, který umožňuje vložení doplňkového textu například k obrázku nebo zdrojovému kódu, který je právě spolu s prvkem figcaption potomkem figure. Vše by měla nastínit ukázka zdrojového kódu níže.

Elementy jsou párové.

Ukázka zdrojového kódu:

<figure>
  <img src="obrazek.jpg" alt="Alternativní popisek">
  <figcaption>Tento obrázek je naprosto magický a nevyzpytatelný.</figcaption>
</figure>

Více informací o elementu figcaption naleznete na W3C a HTML5 Doctor (figcaption), více informací o elementu figure naleznete na W3C a HTML5 Doctor.

footer

Element footer představuje patičku své sekce nebo patičku celé stránky. Lze jej použít například v článku pro představení autora nebo pro odkazy na související dokumenty, informace o autorských právech a podobně. Prvek nesmí být potomkem elementů header, address a footer. Ukázku najdete níže s elementem header.

Element je párový.

Více informací o elementu footer naleznete na W3C a HTML5 Doctor.

header

Element header představuje hlavičku své sekce nebo hlavičku celé stránky. Lze jej využít například v článku pro vložení nadpisu (elementy h1-h6), spolu s obsahem, jako je například úvodní materiál nebo navigační pomůcky pro článek, v případě celé stránky může obsahovat logo, uživatelské rozhraní a podobně. Prvek nesmí být potomkem elementů header, address a footer.

Element je párový.

Ukázka zdrojového kódu:

<article>
   <header> 
      <h2>Název článku</h3>
      <time datetime="2010-09-01">01. září 2010</time> 
   </header>
   <p>Obsah nebo popis článku.</p>
   <footer> 
      <a href="http://programujte.com">Zdroj článku</a>
   </footer>
</article>

Více informací o elementu header naleznete na W3C a HTML5 Doctor.

hgroup

Element hgroup patří k těm novým v HTML5 a používá se pro seskupení nadpisů. Využití najde tehdy, pokud seskupujete víc nadpisů a podnadpisů. Na rozdíl od header by neměl obsahovat nic než nadpisy h1-h6.

Element je párový.

Ukázka zdrojového kódu:

<article>
  <hgroup>
    <h1>Nadpis první úrovně</h1>
    <h2>Nadpis druhé úrovně</h2>
  </hgroup>
  <p>Obyčejně obyčejný text</p>
</article>

Více informací o elementu hgroup naleznete na W3C a HTML5 Doctor.

hr

Element hr je už asi taky všem známý, ale až v HTML5 dostal zvláštní sémantický účel představující "tematickou přestávku textu". Využít lze pro rozdělení textu na více částí.

Element není párový.

Více informací o elementu hr naleznete na W3C a W3C schools

input

Element input, neboli vstupní pole, se dočkal obsáhlého rozšíření, a to v podobě podporovaných typů obsahu. Ovšem úplně představit tento prvek by bylo nesmírně náročné a možná by si to zasloužilo vlastní článek, proto jen vypíšu jeho nové hodnoty pro atribut type. V závislosti na hodnotě atributu type může element input obsahovat i další nové atributy, ty zde ale uvádět nebudu.

Element není párový.

Možné atributy (bez závislosti na druhu vstupní hodnoty v atributu type):

type = druh vstupní hodnoty; možnosti jsou uvedeny níže
value = hodnota kterou lze předvyplnit; hodnotou je libovolný text
disabled = uživatel uvidí políčko jako šedé a nepůjde s obsahem manipulovat; bez hodnoty
readonly = uživatel nebude moct s obsahem manipulovat; bez hodnoty

Možné hodnoty atributu type:

text = prostý jednořádkový text
password = upravený jednořádkový text, používá se pro zadávání hesla
checkbox = zaškrtávací políčko
radio = přepínací políčko
button = tlačítko s žádnou další sémantikou
submit = tlačítko pro odeslání formuláře
reset = tlačítko pro smazání hodnot z formuláře
file = umožňuje vybrání souboru
hidden = skryté políčko
image = představuje alternativu tlačítka pro odeslání formuláře
datetime = ovládací prvek pro nastavení data a času s ohledem na časové pásmo
datetime-local = ovládací prvek pro nastavení data a času bez ohledu na časové pásmo
date = ovládací prvek pro nastavení data
month = ovládací prvek pro nastavení roku a měsíce
time = ovládací prvek pro nastavení času
week = ovládací prvek pro nastavení roku a týdne
number = jednořádkové pole pro číselnou hodnotu
range = jednořádkové pole pro určitý rozsah číselných hodnot
email = jednořádkové pole pro e-mailové adresy
url = jednořádkové pole pro URL adresy
search = jednořádkové pole pro zadávání jednoho nebo více vyhledávacích termínů
tel = jednořádkové pole pro telefonní čísla
color = ovládací prvek pro vložení barvy

Více informací o elementu input naleznete na W3C a W3C schools.

mark

Element mark představuje zvýraznění nebo označení určitého textu. Lze ho využít například pro zvýraznění vyhledávaných slov ve výsledku hledání. Výchozí nastavení zobrazení je pro text červená barva a žlutá barva pro jeho pozadí.

Element je párový.

Více informací o elementu mark naleznete na W3C a HTML5 Doctor.

nav

Element nav představuje hlavní navigaci, neboli menu stránky (pozor neplést s prvkem menu), element nav lze tedy použít pro navigaci, která bude obsahovat odkazy na hlavní části stránky nebo na stránky s podobným obsahem. Prvek nesmí být potomkem elementů address.

Element je párový.

Ukázka zdrojového kódu:

<nav>
  <ul>
    <li><strong>Navigace webu</strong></li>
    <li><a href="http://programujte.com">Úvodní stránka</a></li>
    <li><a href="http://programujte.com/?akce=diskuze">Diskuzní fórum</a></li>
    <li><strong>Odkazy jinam</strong></li>
    <li><a href="http://google.com" target="_blank">Google.com</a></li>
  </ul>
</nav>

Více informací o elementu nav naleznete na W3C a HTML5 Doctor.

section

Element section je trochu zvláštní (pozor, element section není alternativou k elementu article). Do elementu section byste měli zabalovat ten obsah, který nejde ze stránky vyjmout, aniž byste tím logiku stránky narušili, takže article použijete například pro články, které jsou samostatné a nezávislé na svém okolí, protože když jeden odstraníte nenaruší vám to nijak logiku stránky. Section by se také neměl používat pro vázání kaskádových stylů, měli byste ho nechat tak, jak je.

Element je párový.

Ukázka zdrojového kódu:

<section>
  <h2>Ceník reklamy</h2>
  <p>ceny bannerové i textové reklamy</p>
</section>

Více informací o elementu section naleznete na W3C a HTML5 Doctor.

small

Element small je také znám z předchozích verzí HTML, nyní mu však přibyl nový sémantický význam, a to význam drobné poznámky nebo doplňku k textu, který bude zobrazen malým drobným písmem.

Element je párový.

Více informací o elementu small naleznete na W3C a HTML5 Doctor.

summary

Element summary je pouze titulek, který se používá především pro prvek details.

Element je párový.

Ukázka zdrojového kódu:

<details>
  <summary>Další informace</summary>
  <p>Další informace například zdroj dat k článku. </p>
</details>

Více informací o elementu summary naleznete na W3C a HTML5 Doctor.

time

Element time označuje časové údaje, nabízí nastavení vlastního formátu data a času, použití by měla nastínit ukázka.

Element je párový.

Možné atributy:

datetime = datum, čas nebo datum i čas, které element představuje; hodnotou je časový formát (předvede ukázka)
pubdate = označuje datum publikování například článku, v případě použití tohoto atributu by měl být celý element time potomkem elementu article; bez hodnoty

Ukázka zdrojového kódu:

<time datetime="2009-11-13"> 13.listopadu 2009 </time>
<time datetime="2010-11-13T20:00" pubdate> 13.listopadu 2009 ve 20:00 </time>
<time datetime="2010-11-13T20:00+09:00"> 13.listopadu 2009 ve 20:00 v Tokiu </time>

Více informací o elementu time naleznete na W3C a HTML5 Doctor.

Závěr

Pokud jste dočetli až na konec, asi vám neuniklo, že jsem se zde nezmínil o elementech audio a video. Je tomu tak proto, že si zaslouží mnohem více prostoru, pokusím se je tedy představit v následujícím článku. V dalších článcích bych taky rád skloubil HTML5 a CSS3 a zkusil vytvořit ukázkový layout.

Programátoři po celém světě dnes slaví Den programátorů Celá zprávička