HTML5 wprowadzenie

Html5 jest rozwinięciem html4. Wprowadza między innymi nowe znaczniki, nowe typy oraz nowe atrybuty pól formularzy. Co ciekawsze html5 posiada wiele nowych ciekawych API javascript np. Canvas Context 2d, Geolocation API, Web Workers, Localstorage, Websockets itp. W niniejszym kursie zakładam, że czytelnik ma podstawową wiedzę na temat html4. html5 od podstaw

Szkielet dokumentu html5

Pierwszym wspólnym i obowiązkowym elementem strony jest deklaracja typu dokumentu. W przypadku html5 wpis ten jest bardzo prosty (w porównaniu do deklaracji html4):

<!DOCTYPE html>

Kolejne elementy, które muszą się znaleźć w dokumencie to oczywiście html, head i body.

<html>
	<head>
	</head>
	<body>
	</body>
</html>

Zajmiemy się teraz znacznikami meta. Stronę kodową w dokumencie html5 deklarujemy w następujący sposób (wpis ten umieszczamy w sekcji head)

<meta charset="UTF-8">

Napiszmy teraz nasz dokument wraz z określeniem tytułu (znacznik title), opisu i słów kluczowych strony.

<html>
	<head>
		<meta charset="UTF-8" />
		<title>Tytuł strony</title>
		<meta name="description" content="jakiś opis strony">
		<meta name="keywords" content="słowa kluczowe oddzielone przecinkami">
	</head>
	<body>
	</body>
</html>

W sekcji head możemy dodawać też inne znaczniki meta, załączać style itp.

Nowe znaczniki w html5

Nowe znaczniki nie wpływają bezpośrednio na wygląd zawartych w nich danych, ale pozwalają zgrupować szereg innych elementów i łatwiej nimi zarządzać. Poniżej przedstawiam kilka nowych znaczników. Zachęcam również do zapoznania się z pełną listą.

header — pomiędzy znacznikami powinna być część strony, która ma charakter nagłówka,
nav — pomiędzy znacznikami powinny być zamieszczone elementy odpowiedzialne za główne menu nawigacyjne witryny,
article — pomiędzy znacznikami zamieszczamy zestaw elementów tworzących spójny artykuł,
section — pomiędzy znacznikami zamieszczamy wybraną zawartość części witryny tworzącą spójną sekcję,
aside — pomiędzy znacznikami powinna być zamieszczona ta część strony, która jest elementem uzupełniającym głównej struktury,
footer — pomiędzy znacznikami powinna być zamieszczona stopka strony,
canvas — pomiędzy znacznikami jest płótno po którym możemy rysować za pomocą javascript,
audio i video — dają możliwość odtwarzania na stronie dźwięku oraz klipu video bez użycia dodatkowych wtyczek.

Przykładowy dokument html5 mógłby wyglądać tak:

<html>
	<head>
		<meta charset="UTF-8" />
		<title>Tytuł strony</title>
		<meta name="description" content="jakiś opis strony">
		<meta name="keywords" content="słowa kluczowe oddzielone przecinkami">
	</head>
	<body>
		<header>
			<nav></nav>
		</header>
		<article>
			<hgroup><h3></h3><h4></h4></hgroup>
		</article>
		<aside></aside>
		<footer></footer>
	</body>
</html>

Podsumowanie

Oczywiście nie wszystkie funkcjonalności html5 obsługują wszystkie przeglądarki :) Polecam stronkę caniuse, na której można sprawdzić jaka wersja każdej przeglądarki obsługuje nowe znaczniki oraz nowe API. Pewnie każdy zadaje sobie teraz pytanie co z IE? Nowe znaczniki html5 obsługuje dopiero IE9 i nowsze. Na szczęście istnieje sposób, aby starsze wersje IE rozpoznawały nowe elementy dzięki prostemu JavaScript. Pierwszy o tej technice na swoim blogu pisał John Resig. Technika ta nazywana jest html5 shiv. Jeśli chcemy aby stare wersje IE rozpoznawały nowe znaczniki możemy zastosować skrypt.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->