Původně jsem se na Maxiorlovi základy HTML5 nechtěl zabývat do té míry, že budu opakovat weby, které vytvoření stránek v HTML5 popsaly již mnohokrát. Protože však s HTML5 přicházíme do styku také v článcích věnovaných vývoji aplikací pro Windows 8 a Metro pomocí JavaScriptu, je třeba základy HTML5 znát. A tak myslím, že dnešní článek ničemu neuškodí.
HTML5 zjednodušuje celou řadu stávajících zápisů v HTML struktuře. Ať už se jedná o deklaraci typu dokumentu, nebo o zápisy pro připojování JavaScriptu a kaskádových stylů. Nové značky, které se v HTML5 objevují, vycházejí ve svém pojmenování do jisté míry z toho, co jste určitě zvyklí na webu používat coby identifikátory DIVů. Nepochybně jste někdy použili <div id="header"> nebo <div id="footer">. V HTML5 máme rovnou značky <header> a <footer>. Mimochodem, koukněte na statistiku použití identifikátorů v HTML, kterou si udělal Google.
Řada nových značek vycházejí také z toho, že je třeba dát HTML struktuře nějaký řád k tomu, aby různé automatizované stroje lépe pochopily význam obsahu zabaleného do určitých značek. Proto se nám objevují značky jako <menu> a <nav>, <figure> a <figcaption> a podobně. Na většinu z nich se podíváme.
Deklarace a hlavička dokumentu v HTML5
Webová stránka musí začínat deklarací hlavičky, nastavením jazyka a jako doposud i informacemi o názvu dokumentu, kódování a dalšími. Všimněte si, že HTML5 deklaraci dokumentu výrazně zjednodušuje oproti třeba HTML 4.01 nebo XHTML. Verze HTML se v ní ani neuvádí. Zjednodušen je i zápis pro připojení kaskádových stylů a JavaScriptu - typ připojovaného souboru už není nutné uvádět.
Hlavička stránky v HTML5 <header>
Tělo dokumentu zůstává stále potřebné, takže nesmíme zapomenout na HTML značku <body>. Na začátku zřejmě použijete novou značku pro hlavičku <header>. Do ní můžete umístit další značky, na které jste zvyklí, například nadpis H1.
Články a sekce <article> a <section>
Dvě nové značky v HTML5 slouží k obalení obsahu. Značka <article> by měla sloužit jako kontejner pro hlavní obsahovou část stránky. Není samozřejmě podmínkou, že půjde o opravdový článek, může se jednat i o inzerát, text s nabídkou produktu a podobně. Naproti tomu značka <section> slouží k rozdělení obsahu v <article> na více částí.
Obou značek samozřejmě v jedné stránce využijete více, obalíte do nich tolik článků nebo obsahových elementů, kolik se má na stránce zobrazovat. (pro drupalisty - ideální pro značku <article> je doposud používaný <div id="node">).
Skupina nadpisů <hgroup>
Tato nová HTML značka slouží k obalování nadpisů Hx. V praxi slouží k tomu, abyste z hlediska sémantiky mohli na webu mít více nadpisů první úrovně bez toho, že by pak nebylo zřejmé, který má hlavní slovo.
Boční panel <aside>
Značka <aside> slouží v HTML5 k vytvoření postranního panelu nebo nějakého jiného obsahu určeného na okraj. Můžete jej použít k obalení například reklamy, odkazů na související články a podobně.
Navigace <nav>
Nový prvek <nav> slouží k označení kontejneru s navigační strukturou. Nemusí se jednat o hlavní navigaci na stránce, značku <nav> můžete samozřejmě použít i opakovaně. Použitím tohoto prvku ale jasně specifikujete a odlišíte navigaci od obsahové části.
Různé druhy menu pomocí značky <menu>
Pro vytvoření menu slouží stejnojmenné HTML5 značka <menu>. V podstatě si ji můžete představit coby náhradu za <ul id="menu">. Jejím obsahem jsou totiž rovněž značky <li> s jednotlivými položkami menu. Značka <menu> se používá s atributem type, který může nabývat tří hodnot. Pokud vytvoříte type="context", pak z menu vytvoříte kontextové menu objevující se například po kliknutí pravým tlačítkem myši. Specifikací typu toolbar vytvoříte vodorovné menu a konečně specifikací list vytvoříte klasické menu pro nastylování plně kontrolované vaším CSS.
Obrázek a jeho popisek v HTML5: <figure> a <figcaption>
Poslední dvojice nových značek pro HTML5, které tu chci zmínit, jsou <figure> a <figcaption>. První z nich slouží k vytvoření kontejneru, do kterého umístíte například obrázek, druhá pak vytvoří jeho popisek a používá se uvnitř <figure>. Stejným způsobem můžete obalit třeba tabulku nebo cokoli dalšího, co chcete uvnitř textu nějakým způsobem odlišit a zobrazit s popiskem.
Jednoduchá ukázka stránky v HTML5
Podívejme se nyní, jak by mohla vypadat jednoduchá stránka vytvořená s pomocí některých výše uvedených značek v HTML5.
<!DOCTYPE html>
<html lang="cs-CZ">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Ukázka HTML5</title>
<meta name="keywords" content="html5, css3">
<meta name="description" content="Ukázka struktury webu v HTML5">
<meta name="author" content="Jan Polzer">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Ukázka HTML5 - hlavička</h1>
<nav>
<ul>
<li><a href="#">Odkaz</a></li>
<li><a href="#">Odkaz</a></li>
<li><a href="#">Odkaz</a></li>
<li><a href="#">Odkaz</a></li>
</ul>
</nav>
</header>
<div class="box">
<section class="articles">
<article>
<section class="perex">
Úvodník článku. Společnou o rozmnoženině zhotoví-li řídí zpracováním
prodávajícího jménu udělil nositele a toho získané, parku bodů proti,
účastníci v ně řady počítačový osobou majetková programy, § 104 písmenen.
</section>
<section class="detail">
<p>Ohavný až stůj kdekoliv vrak tě šla on metr. 56 oběh už prohlídku němé
jednou vrátili vyběhnout uf dne he wand zad ovce.
Lidských nehýbat nějakých.</p>
<p>Téměř dokořán látce jet cůpek vesnické. Nad takovým, jí ne pec čopak,
až mapě máry váš ruky. Zničit, diví, niť že levačka, on výkonu tajemné
obou lid cosi třást u žok věří šach!</p>
<figure><img src="dravec.jpg"><figcaption>Dravec na ukázce v Lednici</figcaption></figure>
<p>Ohavný až stůj kdekoliv vrak tě šla on metr. 56 oběh už prohlídku němé
jednou vrátili vyběhnout uf dne he wand zad ovce. Lidských nehýbat nějakých.</p>
<p>Téměř dokořán látce jet cůpek vesnické. Nad takovým, jí ne pec čopak,
až mapě máry váš ruky. Zničit, diví, niť že levačka, on výkonu tajemné
obou lid cosi třást u žok věří šach! </p>
<p>411 té psa to neřádu ruku pletl slunce! Kvas krásy ví pankráci. Řekne
spí pojďme tentokrát ah drobná ó drdůlek brna vy dláto ó sousedé
vzlykající odbudu.</p>
</section>
</article>
<article>
<section class="perex">
Úvodník článku. Společnou o rozmnoženině zhotoví-li řídí zpracováním
prodávajícího jménu udělil nositele a toho získané, parku bodů proti,
účastníci v ně řady počítačový osobou majetková programy, § 104 písmenen.
</section>
<section class="detail">
<p>Ohavný až stůj kdekoliv vrak tě šla on metr. 56 oběh už prohlídku němé
jednou vrátili vyběhnout uf dne he wand zad ovce.
Lidských nehýbat nějakých.</p>
<p>Téměř dokořán látce jet cůpek vesnické. Nad takovým, jí ne pec čopak,
až mapě máry váš ruky. Zničit, diví, niť že levačka, on výkonu tajemné
obou lid cosi třást u žok věří šach!</p>
<figure><img src="dravec.jpg"><figcaption>Dravec na ukázce v Lednici</figcaption></figure>
<p>Ohavný až stůj kdekoliv vrak tě šla on metr. 56 oběh už prohlídku němé
jednou vrátili vyběhnout uf dne he wand zad ovce. Lidských nehýbat nějakých.</p>
<p>Téměř dokořán látce jet cůpek vesnické. Nad takovým, jí ne pec čopak,
až mapě máry váš ruky. Zničit, diví, niť že levačka, on výkonu tajemné
obou lid cosi třást u žok věří šach! </p>
<p>411 té psa to neřádu ruku pletl slunce! Kvas krásy ví pankráci. Řekne
spí pojďme tentokrát ah drobná ó drdůlek brna vy dláto ó sousedé
vzlykající odbudu.</p>
</section>
</article>
</section>
<aside>
<section>
Mořskou satisfakce nervovou srovnaly. Chce vliv hidžry nevrátil vychovatele
o klientela smrky mnohdy zajištěna i do trpět, čaj ten hodí hází úhlednou
tahy asi nimi shodou rodu, zkoušet biblické věder pobřeží v získává ohrožených
jediná co radiology způsobuje, pluli sopečná obklopený není nový rádi.
Na dohromady tu nová budovaly 195, nastala i poloostrova, sám tj.
nějaká mj. však ekonomické smeten i poskytujících svému z věda musel
ptačích, čím s od prarodičů letos k lidové, mlh zimě zajišťují řekl,
u a změn k mne existuje tj. dovolí drsné.
</section>
<section>
Mořskou satisfakce nervovou srovnaly. Chce vliv hidžry nevrátil vychovatele
o klientela smrky mnohdy zajištěna i do trpět, čaj ten hodí hází úhlednou
tahy asi nimi shodou rodu, zkoušet biblické věder pobřeží v získává ohrožených.
</section>
</aside>
</div>
<footer>
Patička webu může obsahovat samozřejmě opět sekce, menu a další prvky.
</footer>
</div>
</body></html>
Na začátku je umístěna nová deklarace, následuje hlavička dokumentu se zjednodušeným připojením kaskádových stylů. Celá stránka je obalena do DIV s identifikátorem wrapper, to proto, abychom jí mohli nastavit pevnou šířku a vše pěkně vycentrovat. Ve stránce je vložena hlavička stránky s použitým elementem pro navigaci.
Mezi hlavičkou a patičkou stránky je umístěn DIV s identifikátorem box, který obsahuje sekci se dvěma články a jeden postranní panel.
Naformátování stránky pomocí flexboxu a CSS3
Když jste potřebovali v HTML vytvořit dvousloupcové rozvržení stránky, použili jste kdysi dávno tabulku, v současné době byste použili relativní pozicování a vlastnost float. CSS3 přichází s několika novými koncepcemi. Tou první, která již v řadě prohlížečů funguje je tzv. flexbox. S jeho pomocí můžete vytvořit třeba dvousloupcové rozvržení stránky, aniž byste používali vlastnost float. Jak na to?
V našem CSS nejprve nastavíme pevnou šířku a vycentrování obalujícího DIVu s id=wrapper. Mírně upravíme hlavičku s menu a budeme se věnovat DIV se třídu box, který obaluje sekci s články a postranní panel. Tomuto DIVu nastavíme zobrazení ve formě boxu. Sekci se články a postrannímu panelu nastavíme ještě vlastnost box-flex určující, že daná položka v boxu má vyplnit celý prostor, který bude mít k dispozici. Po doplnění vlastností display: box; a box-flex spolu s nastavením šířky můžete stránku zkusit načíst, mělo by se již projevit navržené dvousloupcové rozhraní.
Každému článku nastavíme pevnou šířku, spodní části rámečku a odsazení. Všimněte si pseudoselektoru pro poslední článek, ve kterém prohlížeči sdělujeme, že poslednímu článku nemá kreslit spodní čáru.
Zbylá část stylů pracuje se standardními položkami, jako jsou odsazení některých prvků, doplnění rámečků a podbarvení. Za pozornost možná stojí zformátování elementu figure.
{syntaxhighlighter brush: css;fontsize: 100; first-line: 1; } header, nav, section, article, figure, figcaption, aside, footer { display: block; } #wrapper{ width: 960px; margin: 0px auto; } header{ border-bottom: 2px solid black; padding: 10px; margin-bottom: 10px; } nav ul{ margin: 0px; padding: 0px; } nav li{ display: inline; list-style-type: none; } section{ padding: 10px; } .box{ display: box; display: -moz-box; display: -webkit-box; /* display: -ms-grid; -ms-grid-rows: auto 1fr; -ms-grid-columns: 1fr 1fr;*/ } section.articles{ /* -ms-grid-column: 1; -ms-grid-row: 1;*/ } article{ width: 600px; border-bottom: 1px solid gray; margin-bottom: 10px; } article:last-child{ border-bottom: none; } section.perex{ font-weight: bold; } article figure{ float: left; margin: 10px; border: double; padding: 5px; } figcaption{ font-style: italic; } aside{ /* -ms-grid-column: 2; -ms-grid-row: 1;*/ width: 340px; } aside section{ background: #EFEFEF; margin-bottom: 10px; } footer{ border-top: 2px solid black; padding: 10px; } {/syntaxhighlighter}
Výsledná stránka by měla vypadat zhruba takto:
Stránka s layoutem pomocí CSS3
Pokud vás vyvádějí z míry prefixy, čili zápisy -moz, -webkit nebo -ms, pak vězte, že jsou tu proto, jelikož daná vlastnost CSS3 ještě není plně standardizována a každý prohlížeč ji teoreticky může „chápat" jinak. Běžně by se po dokončení standardizace samozřejmě měly všechny vlastnosti používat bez prefixů.
Více viz CSS Flexible Box Layout Module.
Struktura stránky pomocí mřížky
Ve výše uvedených stylech je v komentářích naznačeno rozvržení stránky pomocí jiné techniky z CSS3, a to pomocí mřížky. Bohužel, kromě Internet Exploreru 10 ji zatím žádný prohlížeč nepodporuje, takže mřížku nyní využijete snad jen při tvorbě aplikací pro Metro v testovací verzi Windows 8. I tak je ale dobré vědět, jak funguje.
Obalovacímu elementu musíte nejprve říci, že se bude zobrazovat jako mřížka, tedy display: grid. Následně pomocí grid-rows a grid-columns specifikujete, kolik bude tato mřížka mít řádků a sloupců. V mém příkladu jde u automatický počet stejně velkých řádků a dva stejně široké sloupce. Jednotka fr udává relativní šířku sloupců.
V bočním panelu a v sekci s články pak pomocí vlastností grid-column a grid-row specifikujete, do kterého sloupce či řádku nadřazené mřížky daný prvek patří. Více viz CSS Grid Layout.
V příloze najdete zdrojový kód ukázkové stránky spolu s kaskádovými styly.
| Příloha | Velikost |
|---|---|
| html5stranka.zip | 36.73 KB |
Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.
Podobné články
Komentáře k článku
V čem na to koukáte? Zkusil jsem teď přes validátor W3C a je to v pořádku.
Už je to ok :D
Děkuji moc za konečně srozumitelný popis HTML5 a jeho struktury.
<html lang="cs-CZ">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Nyní je Váš příklad nevalidní. Máte nějakou opravu, která povoluje v HTML5 "description" české znaky aniž by se dostal do konfliktu s ANSII?
Mě to vždy u mého webu hází chybu:
Line 9, Column 50: No explicit character encoding declaration has been seen yet (assumed windows-1250) but the document contains non-ASCII.
…e="description" content="Tvorba mobilní verze webu. Adaptabilní design webu pr…