HTML5 - nové vlastnosti
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

HTML5 - nové vlastnostiHTML5 - nové vlastnosti

 

HTML5 - nové vlastnosti

Google       Google       11. 7. 2011       42 911×

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.

Reklama
Reklama

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.

menu

Element menu je sice v HTML 4.01, ale sám nevím, jakou tam plní funkci, v HTML5 byl přepracovaný a nyní slouží jako seznam ovládacích prvků pro formuláře. Prvek nesmí být potomkem elementů a ani button.

Element je párový.

Možné atributy:

  • type = druh nabídky, hodnotami jsou toolbar (panelová nabídka) nebo context (kontextová nabídka)
  • label = popisek v nabídce, hodnotou je libovolný text

Ukázka zdrojového kódu:

<form action="" method="post">
  <strong>Barva:</strong>
  <menu>
    <li><input type="checkbox">Červená</li>
    <li><input type="checkbox">Modrá</li>
  </menu>
</form>

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

meta

Element meta je víceúčelový element, který je již znám z předchozích verzí HTML, nyní byly jeho atributy trochu pozměněny, z nabídky jeho atributů zmizel http-equiv=content-language a přibyl charset, který slouží pro nastavení kódování v HTTP hlavičce dokumentu. Nebudu zde vypisovat všechny atributy elementu meta, pouze ukážu nový zápis kódování a opět ho porovnám s tím starým.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> // HTML 4.01 Transitional
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> // XHTML 1.1
<meta charset="UTF-8"> // HTML 5

Více informací o elementu meta naleznete na W3C a W3C schoolsr.

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.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
38 hlasů
Google
(fotka) Jiří ŠťastnýJsem student střední školy v Liberci, občasný programátor, aktivní sportovec, fanatický fanoušek Google a mé pravé jméno je سعيد جورج.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý