Úprava webu pro HTML5
Rozhodl jsem se napsat článek o optimalizaci webové stránky pro HTML 5. Sám na blogu HTML 5 využívám, ale ne na plno. HTML 5 se od starších HTML nebo XHTML liší v hlavičce, kde je změna několika tagů, a ve struktuře stránky, kde přibylo několik nových tagů. Změny jsou vytvořeny pro větší přehlednost zdrojového kódu. Pro vývojáře webových stránek je to lehčí a účinnější.
Hlavička webu
Změnila se specifikace dokumentu, díky které můžete i poznat, že jde o HTML 5 a oproti starším HTML je výrazně kratší. Nyní stačí použít tento krátký tag úplně na začátku zdrojového kódu: <!DOCTYPE html>.
Jazyk dokumentu a kódování se nyní už nepíše jako dlouhý tag. V HTML 5 použijeme jednoduchý řádek: <meta charset='UTF-8'>.
Další věc, která se změnila nejen v hlavičce je "neuzavírání" nepárových tagů. Abych to vysvětlil, doteď jsme všechny nepárové tagy uzavírali např. <hr />, <br />, <link />, <img />. V HTML 5 se tyto tagy neuzavírají, takže to vypadá například takto: <hr>, <br>, <link>, <img>.
Hlavička webu HTML5 by měla vypadat asi nějak takto:
<html>
<head>
<meta charset='UTF-8'>
<title> ... </title>
<link rel='stylesheet' href='styles.css' media='screen'>
</head>
Struktura
V HTML 5 přibylo několik nových tagů pro strukturu webu. Většina stránek používá pro sestrojení vzhledu samé elementy <div>. Nyní v HTML 5 můžete díky novým tagům rozčlenit zdrojový kód tak, aby bylo zřejmé, co je hlavička, článek, navigace nebo patička webu. Tyto tagy jsou zvláště dobré pro vyhledávače (např. aby poznaly navigaci).
<header> je nový HTML 5 tag, který označuje oblast hlavičky webu. V tomto tagu by se mělo vyskytovat logo nebo hlavní nadpis <h1> popřípadě ještě slogan a také věci.
<footer> je další tag, podobný předchozímu, ale značí oblast patičky webu. V tomto tagu by se měl objevit copyright, tvůrce webu nebo kontakt na autora.
<section> znázorňuje oblast sekce, část článku nebo kapitolu. Tento tag je možné používat vícekrát, dokonce i uvnitř již otevřeného tagu <section>.
<article> je důležitý tag i pro SEO. Používáme ho pro označení hlavního textu na stránce, zejména článku a komentářů. Vyhledávače budou pravděpodobně text v tomto tagu brát za nejdůležitější na dané stránce.
<aside> je tag pro určení oblasti postranního panelu stránky. Například já bych v tomto tagu měl všechny části postranního panelu (Vyhledávání, Navigace, Autor blogu, apod.).
<nav> značí navigaci na stránce. Menu, které odkazuje na nejdůležitější stránky webu. Většinou se uvnitř tohoto tagu vyskytuje <ul>.
Struktura webu HTML5 by měla vypadat asi nějak takto:
<header> ... </header>
<nav> ... </nav>
<section>
<article>
...
</article>
</section>
<aside> ... </aside>
<footer> ... </footer>
</body>
</html>
Ukázka HTML5 šablony, kterou chci vypracovat pro můj blog:
Prohlížeče bez podpory HTML5
Starší prohlížeče nepodporují HTML 5. Myslím tím Internet Explorer 8 a méně. Když jsem dělal svůj první projekt HTML 5 pro zákazníka, zapomněl jsem na to a strávil jsem dlouhou dobu nad přemýšlením, proč se mi v IE 8 a méně nezobrazuje hlavička a patička. Pokud se tedy rozhodnete použít HTML 5 nové tagy, měli byste brát ohled i na ty, co používají ještě staré prohlížeče.
Jak tedy ve starších prohlížečích tyto tagy zobrazit? S kámošem jsme došli k řešení. Jediné možné je asi použít podmíněné komentáře pro IE 8 a starší. Do zdrojového kódu dáte podmíněný komentář, který rozhodne, pokud nepoužíváte IE 8 a starší, tak zobrazí normálně HTML 5 tag, ale pokud ho uživatel používá, zobrazí alternativní možnost. To je použití tagu <div> se styly stejnými jako má ten daný HTML 5 tag. Například, pokud řešíme tag <header>, použijeme v CSS tento kód: header, #header { ... } a alternativní <div> bude mít id='header'.
Ukázka zapsání alternativy podmíněným komentářem pro IE:
Teď vás možná napadá otázka, vyplatí se vůbec používat HTML5? Vzhledem k tomu, že to dnes používá hodně známých webů, tak na tom asi něco bude. Mě se HTML5 líbí, na blogu ho používám, ale ne úplně. V mém zdrojovém kódu si můžete všimnout, že nepoužívám HTML5 tagy. Chystám se, že bych je tam přidal, ale ještě nevím. Pravděpodobně to v budoucnosti přidám i s podmíněnými komentáři. A co vy, používáte nebo nepoužíváte na webu HTML 5 a proč?
| Tweet |
Stalky
dne 08. září 2013 16:24
HTML 5 nepoužívám, právě kvůli optimalizaci starších ptohlížečů. Nedávno jsem se na otázku, zda se vyplatí používat HTML5 ptal na fóru devel.cz Odpovědi jsou celkem zajímavé: http://devel.cz/o...vat-html-5
Z čehož mi vyplívá, že se na HTML5 asi velmi brzo soustředím.
Dominik Fryč
dne 08. září 2013 18:06
Díky za odkaz. Diskuzi jsem si přečetl, jsou tam zajímavé odpovědi.
Je vidět, že HTML 5 bychom měli používat.
Občas narazím na lidi, co říkají, že neznají nikoho, kdo by měl starý prohlížeč, který by nepodporoval HTML 5. Ale hned u mého prvního projektu mi zákazník píše, proč se mu to v jeho IE 8 špatně zobrazuje...
Stalky
dne 08. září 2013 19:47
Rozhodně souhlasím, že bychom měli HTML5 začít používat, ale zároveň bychom rozhodně neměli zapomínat na starší prohlížeče.
Já mám taky pár známých, co tvrdí, že na starš prohlížeče totálně prdí, popřípadě jim vypíšou hlášku, že si mají IE aktualizovat, ale s tím rozhodně nesouhlasím. Uživatelů používající starší prohlížeče je stále hodně a my nemůžeme tyto lidi přehlížet.
Tzn. HTML5 používat, ale zároveň brát ohledy na starší prohlížeče.
Dominik Fryč
dne 08. září 2013 20:19
Přesně tak. Vždyť podle statistik je IE vůbec v Česku 2. nejpoužívanější internetový prohlížeč, takže je potřeba nezapomínat na lidi, kteří ho využívají. Z následujícího grafu z statcounter.com je vidět, že právě problémový IE 8 využívá v Česku kolem 9% uživatelů, což není rozhodně málo.
[img]http://dominikfryc.cz/images/articles/browserstatistiky.jpg[/img] is not a valid Image.
Takže jak píšeš, HTML 5 používat s ohledem na starší prohlížeče.