Podstawowa struktura dokumentu HTML 5

09 maja 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Nie tracąc czasu na dyskusje typu „dlaczego język HTML5” jest dostępny już dziś, a nie będzie dopiero w 2022 roku, w artykule tym opisuję stałe elementy struktury dokumentów HTML5, których można używać już teraz.

HTML5 w 5 sekund

Jeśli chcesz, aby Twoja strona była poprawnym dokumentem HTML5, to nie ma nic prostszego — wystarczy, że zmienisz deklarację DOCTYPE na poniższą:

<!DOCTYPE html>

To wszystko! Nie musisz robić już nic więcej.

Firma Google już to zrobiła. Możesz sprawdzić jej stronę główną, której cały kod mieści się w jednym wierszu:


<!doctype html><head><title>HTML5 - Google Search</title><script>...

Co ciekawe strony wyszukiwania i wyników wyszukiwania Google nie są poprawnymi dokumentami HTML5, ponieważ znajdują się na nich niedozwolone elementy, jak np. <font> i zawierają one różne błędy, ale to nic nie szkodzi. Reguły języka HTML5 mogą być nadal stosowane (np. brak atrybutu type w elemencie <script>), ponieważ element DOCTYPE jest zdefiniowany poprawnie.

Minimalny dokument HTML5

Jeśli często bawisz się w tworzenie testowych stron i prototypów, które nie wymagają dużej ilości stylów, może zaciekawi Cię to, jak wygląda minimalny dokument w języku HTML5:


<!DOCTYPE html><title>Mały dokument w HTML5</title><p>Witaj, świecie</p>

To jest w pełni poprawny dokument w języku HTML5

Co ciekawe, po usunięciu elementu <title> pojawiły się pewne kontrowersje związane z poprawnością tego dokumentu. Narzędzie Live DOM Viewer informuje, że wszystko jest w porządku. To samo dotyczy walidatora W3C, ale pod warunkiem, że kod zostanie wpisany ręcznie. Natomiast walidator Henriego Sivonena „mówi”, że bez elementu <title> dokument jest niepoprawny. Walidator W3C poinformuje Cię, że dokument ten jest niepoprawny, jeśli do sprawdzenia podasz adres URL strony. Miejmy nadzieję, że wkrótce wszystko to zostanie wyjaśnione.

Pełna struktura dokumentu HTML5

W tej części przedstawiona jest podstawowa struktura dokumentu HTML5 z określeniem metody kodowania znaków. Gdy kodowanie to nie jest określone, niektóre znaki są wyświetlane niepoprawnie (kiedyś już straciłem mnóstwo czasu na dochodzenie, dlaczego tak jest!).

Dodatkowo skorzystamy też ze specjalnego skryptu o nazwie HTML5 shiv, który pozwoli nam zmusić także przeglądarkę IE do stosowania stylów do nowych elementów. Pamiętaj, że skrypt ten musisz umieścić w elemencie head

Dodamy też kilka arkuszy stylów, aby nowe elementy blokowe bezpośrednio zdefiniować jako blokowe, ponieważ niektóre przeglądarki jeszcze ich nie rozpoznają.

Poniżej znajduje się kod, o którym mowa:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kompletny dokument HTML5</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, details, figcaption, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Witaj, świecie </p>
</body>
</html>

Jeśli chcesz pobawić się trochę językiem HTML5, to może Ci się przydać domyślny szablon JS Bin

Autor: Remy Sharp

Źródło: http://html5doctor.com/html-5-boilerplates/

Tłumaczenie: Łukasz Piwko

Treść tej strony jest dostępna na zasadach licencji CC BY-NC 2.0 UK

2 komentarze

  1. Przydatny artykuł, nie sądziłem że html poszedł tak do przodu. Trzeba będzie wypróbować :) Dobrze też że autor zamieścił szablon,przyda się początkującym lub wracającym do tworzenia.

    Odpowiedz
  2. Ciekawe artykuły odnośnie HTML 5.0, widzę, że ten język poszedł nieco do przodu i trzeba nadrobić zaległości :)

    Odpowiedz

Dyskusja

Twój adres e-mail nie zostanie opublikowany.