HTML5 se mi začíná líbit čím dál tím více. V testovacím režimu ho už zkouším i na svém blogu. Pro mnohé je to ale stále ještě velká neznámá, proto jsem se rozhodl některé novinky trochu přiblížit. Na úvod se budu věnovat novým elementům a novým atributům v porovnání s HTML4 nebo xHTML1. 

Zhruba před třemi lety jste si mohli na mém blogu přečíst článek xHTML 2 versus HTML 5. Mnohé se ale změnilo, a tak dnes přináším další článek o vývoji nové verze značkovacího jazyka.

Kostra dokumentu

Narozdíl od všech předešlých verzí HTML a xHTML je DTD uveden pouze ve zjednodušeném tvaru. Element <html> musí mít definovaný jazyk, element <head> pak dva povinné potomky: definici kódování a titulek. Naopak uvnitř <body> může být cokoli: text už nemusí být obalený odstavcem, pokud ho potřebujeme vložit přímo do těla. Ukončující lomítko u nepárových tagů nehraje žádnou roli: může tam být i nemusí.

<!DOCTYPE html>
<html lang="cs">
<head>
	<meta charset="UTF-8">
	<title>Titulek</title>
</head>
<body>
	Nějaký text.
</body>
</html>

Nové elementy

Verze 5 rozšíří značkovací jazyk spoustu nových elementů. Většina z nich slouží pro lepší sémantiku dokumentu, najdou se zde ale i takové, které přináši naprosto novou funkcionalitu. Vezmu to popořadě.

<section> a <article>

Element <section> reprezentuje samostatný obsahový blok. Jeho využití zatím vidím hlavně v obohacení struktury s jinak monotónními divy. Naproti tomu <article> má naprosto jasnou specifikaci: může reprezentovat jak celý článek, tak perex článku na úrovni například obsahu kategorie.

<header>
	<h1>Kategorie</h1>
	<p>Anotace kategorie.</p>
</header>
<section>
	<article>
		<h2>Nadpis článku</h2>
		<p>Perex článku.</p>
		<footer>
			Napsal: <b>Mike</b>
			<time pubdate datetime="2009-10-09T14:28-08:00"></time>
			Komentářů: 5
		</footer>
	</article>
</section>

<header>, <footer> a <hgroup>

Z názvů elementů se může na první pohled zdát, že půjde o náhradu za často používané <div id="header"> respektive <div id="footer">. Není tomu tak. Elementy <header> a <footer> mají svůj sémantický význam jakožto hlavička a patička jakéhokoli nezávislého bloku textu. Jejich použití jsem již naznačil v předcházející ukázce, nyní ho rozšířím. <hgroup> pak použijeme vždy, když potřebujeme bezprostředně za sebe umístit více nadpisů.

<article>
	<header>
		<h1>Nadpis článku</h1>
		<time pubdate datetime="2009-10-09T14:28-08:00"></time>
	</header>
	<section>
		<p>Text článku.</p>
		<hgroup>
			<h2>Podnadpis</h3>
			<h3>Nadpis například kapitoly</h3>
		</hgroup>
		<p>Text článku pokračuje.</p>
	</section>
	<footer>
		Napsal: <b>Mike</b> | Průměrné hodnocení: 3.5 / 5
	</footer>
</article>

<nav>

Význam elementu <nav> je poměrně jasný: slouží pro vytyčení bloku, jenž obsahuje navigaci. Já ho vidím jako náhradu četně používaného <div class="box"> v postranním sloupci.

<nav>
	<h3>Kategorie</h3>
	<ul>
		<li><a href="html/">HTML</a></li>
		<li><a href="css/">CSS</a></li>
		<li><a href="javascript/">JavaScript</a></li>
	</ul>
</nav>

<datalist>

Našeptávač: naprosto geniální element. Pomocí provázání atributu list u elementu input a ID u datalistu docílíme zobrazení našeptávače po kliku do inputu. Škoda jen, že ho v tuto chvíli podporuje pouze Opera, a tak většina z vás neuvidí živou ukázku. Pokud ale používáte Operu, můžete se přesvědčit elegancí tohoto nového prvku.

Ukázka elementu datalist »

<input list="browsers">
<datalist id="browsers">
	<option value="Opera">
	<option value="Mozilla Firefox">
	<option value="Google Chrome">
	<option value="Internet Explorer">
</datalist>

Nové atributy

Výčet nových tagů by pro začátek stačil, takže přejdeme k atributům.

ping

Další zajímavá novinka: pro elementy <a> a <area> bude fungovat nový atribut ping. Bude obsahovat seznam url adres, které budou pingnuty v případě kliknutí na odkaz. Velice šikovná věc, která nám ušetří všechna ta volání funkcí na onclick či přesměrování přes externí skript.

required

Nový atribut required bude nyní možné přidat prvkům <input> a <textarea>. Jak už říká jeho název, půjde o označení povinných polí. Jeho chování si v tuto chvíli ale nedovedu úplně představit, a tak stejně asi většina z nás zůstane u výčtu ID referujících na povinné prvky formuláře.

charset

Znaková sada dokumentu se bude v HTML5 zapisovat mnohem příjemněji. A věřte nebo nevěřte, funguje to i v Internet Exploreru 6.

<meta charset="UTF-8">

Změna významu některých stávajících prvků

Nakonec článku ještě krátce pohovořím o některých sémantických změnách oproti HTML4. Aby se nám správné použití ještě trochu více zamotalo, nová verze HTML přesně specifikuje, na co které tagy použít. Zde jsou některé z nich.

<i>

Element <i> dále nedefinuje pouze text vyznačený kurzívou, ale větu či slovní spojení řečené jinou barvou hlasu, technický termín či axonomické označení.

<hr>

Horizontální čára bude navíc reprezentovat i tematickou změnu mezi odstavci.

<cite>

V HTML4 se element <cite> používal pro jméno autora citace následovaný zpravidla blockqoutou. V HTML5 bude mít význam zcela nový: jakýkoli titulek: filmu, skladby, básně, knihy, televizního pořadu nebo klidně i obrazu.