Úvod do HTML5: nové elementy a atributy

 |  HTML, CSS, JavaScript  |  9 044x
_

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.

Facebook Twitter Google+

Komentáře k článku "Úvod do HTML5: nové elementy a atributy"

Gravatar
Smoula 21. 5 2010, 13:23
1/3 Pátek 21. Května 2010, 13:23  |  Firefox, Windows XP

a HTML5 podporuju vsetky prehladace?

Gravatar
Mike 21. 5 2010, 14:36
2/3 Pátek 21. Května 2010, 14:36  |  Opera, Windows XP

@: U zmíněných nových elementů je tahle otázka bezpředmětná: ty pouze definují sémantiku. Jestli je zobrazují všechny prohlížeče správně blokově jsem ale nezkoumal. Většina nových atributů ale podporu ještě nemá. Pak jsou zde výjimky, jako např. datalist, který jede pouze v Opeře nebo meta charset, který jede všude.

HTML5 je stále ještě v přípravě, navíc jako mnohem důležitější věc bych viděl podporu CSS3.

Gravatar
Max 5. 8 2010, 23:37
3/3 Čtvrtek 5. Srpna 2010, 23:37  |  Opera, Linux

Mě se zdá, že nové elementy akorát zhušťují a znepřehledňují stávající jednoduché HTML4 a nevidím v tom žádný přínos :-/ Ale kdo ví, pokud to HTML5, někdy bude, třeba si na to zvyknu... :-D V Opeře 10.60 nefunguje ten datalist....

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua