Loading ...Nie tracąc czasu na dyskusje typu „dlaczego język HTML 5” jest dostępny już dziś, a nie będzie dopiero w 2022 roku, w artykule tym opisuję stałe elementy struktury dokumentów HTML 5, których można używać już teraz.
HTML 5 w 5 sekund
Jeśli chcesz, aby Twoja strona była poprawnym dokumentem HTML 5, 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>HTML 5 - Google Search</title><script>...
Co ciekawe strony wyszukiwania i wyników wyszukiwania Google nie są poprawnymi dokumentami HTML 5, 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 HTML 5 mogą być nadal stosowane (np. brak atrybutu type w elemencie <script>), ponieważ element DOCTYPE jest zdefiniowany poprawnie.
Minimalny dokument HTML 5
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 HTML 5:
<!DOCTYPE html><title>Mały dokument w HTML 5</title><p>Witaj, świecie</p>
To jest w pełni poprawny dokument w języku HTML 5
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 HTML 5
W tej części przedstawiona jest podstawowa struktura dokumentu HTML 5 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 HTML 5 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 HTML 5</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 HTML 5, to może Ci się przydać domyślny szablon JS Bin
Sharp (@rem na Twitterze) jest założycielem serwisu jQuery for Designers i organizatorem konferencji Full Frontal JavaScript, a poza tym programuje i prowadzi bloga. Ogólnie rzecz biorąc lubi JavaScript, HTML i CSS jak koń owies.
Wysyłam...
Komentarzy: 2
alan
08.25.2012
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.
WebRocko
08.06.2012
Ciekawe artykuły odnośnie HTML 5.0, widzę, że ten język poszedł nieco do przodu i trzeba nadrobić zaległości :)
Nie ma trackbacków do wyświetlenia