Přechod z XHTML na sémantické HTML5

Přechod z XHTML na sémantické HTML5

Sémantika v HTML5 je na úplně jiné úrovni než v XHTML. Kódováním v HTML5 lépe označíte obsah na svém webu, vyhledávače mu tedy lépe rozumí. A i to je jeden z důvodů, proč mnoho nových šablon webů je kódováno již s využitím sémantických elementů HTML5. Že vám HTML5 nezaručí vyšší pozice ve výsledcích vyhledávání? Zatím je to stále pravda, ale HTML5 se stává novým standardem webdesignu a je jen otázka času, než webů v HTML5 bude více než ve starších verzích HTML. A tak jsem se i já rozhodl pro přechod na HTML5.


Výhody HTML5 oproti XHTML

  • Čistší kód - mnoho elementů je možné nahradit vhodnějšími tagy, krátká doctype deklarace
  • Lepší sémantika - HTML5 nabízí mnoho nových tagů, které přesně popisují určité části stránky
  • Konzistentnost - dobře napsanému HTML5 kódu se dá porozumět rychleji
  • Lepší přístupnost
  • Řada zjednodušení a vylepšení pro vývoj webových aplikací a her
  • Moderní technologie

Není mnoho objektivních důvodů, proč HTML5 nezačít používat. I kompatibilita se staršími verzemi Internet Exploreru je jednoduše možná (viz níže), takže? Jdeme na to.

Přechod z XHTML kódu do HTML5

Rozepisovat tu dokumentaci rozdílů nemá cenu, ale jen několik rychlých postřehů.

Doctype deklarace

V XHTML 1.0 transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

V HTML5:

<!DOCTYPE html>

Opravdové zjednodušení, které si zapamatujete i kdybyste nechtěli.

Nepárové samouzavírací značky

V XHTML

<img /> znamená <img></img>

V HTML5

<img/> znamená <img>

V HTML5 samouzavírací značky již neexistují - pokud jste zvyklí je používat, můžete, ale je to zcela zbytečné. Navíc musíte myslet na to, že se taková značka v HTML5 chová jinak, než jste byli doposud zvyklí.

Nové HTML5 elementy, značky, tagy

Je jich celá řada, z těch nejdůležitějších, o kterých se chci zmínit, jsou to hlavně ty blokové:

  • header
  • footer
  • section
  • article
  • aside
  • nav

A jelikož sémantika v HTML5 bude hlavní náplň mé bakalářské práce, tak jsem začal toto téma studovat už o malinko dříve. Všechny vyjmenované tagy jsou blokové, je tedy u nich minimálně vhodné nastavit styl display: block. A pak už nezbývá, než se podívat na strukturu svého webu, zamyslet se nad tím, které tagy by bylo vhodné nahradit kterými, a všechny podle toho upravit.

Hrubé schéma kódu tohoto webu ještě v XHTML

Schéma kódu webu Tomáše Janečka ještě v XHTML

 

Hrubé schéma kódu tohoto webu po přepracování do HTML5

Schéma kódu webu Tomáše Janečka po přepracování do HTML5

Rozdíly jsou jasné na první pohled. Kdo by je přesto neviděl, Firebug / Dragonfly nebo jiný debugger vám ukáže to, co pravá strana následujícího obrázku. Když jsem dělal screenshot, Doctype jsem měl již přepsaný, tam tedy změnu neuvidíte, podle výše napsaného je ale vcelku jasná.

HTML struktura webu Tomáše Janečka před a po předělání do HTML5

 

Pryč s divy? Ne!

Přejít na HTML5 neznamená automaticky všechny značky <div> přepsat na <section>, popř. article/aside nebo i jiné značky. Každý nový HTML5 tag má svůj význam a tedy i podmínky, za kterých by se měl použít - a tedy i podmínky, kdy by se používat rozhodně neměl. Tak daleko tento článek ale nemířím.

Jak si můžete všimnout, rozhodně jsem neodstranil všechny divy. Celý tento web je v <div id="wrapper">, stejně tak je v obalovém divu i sidebar a obsah. A protože tyto obaly slouží pouze k usnadnění stylování, bylo by úplně špatně nahradit je třeba tagem <section>.

HTML5 ve starším Internet Exploreru? Žádný problém.

HTML5 je v IE oficiálně podporováno až od verze 9, ale díky javascriptu html5shiv není problém HTML5 web zobrazit v pořádku už od Internet Exploreru verze 6! Tedy žádné omezení oproti XHTML. To, že staré IE neumí CSS3, je problém jiný...

Závěrem

HTML5 je prima a nevidím důvod na něj nezačít pomalu přecházet. Podle obrázků výše si dokážete udělat představu o tom, co základní přechod na HTML5 obnáší. HTML5 není ani příliš složité, než jej ale používat špatně, lepší zůstat u starého XHTML.

A na závěr ještě přihodím pár hodnotných zdrojů, ze kterých jsem sám čerpal při učení se HTML5. Někoho možná nepotěší, že jsou kompletně v angličtině, ale opravdu stojí za to.

Jdete do HTML5 taky? Napište o tom komentář a podělte se s ostatními!

<< Back to the previous page


Write a comment
 If you cann't see the verification code clearly.
Type the characters into the text field below(*)
 
This website uses cookies for ads, just like any other website. Further information