Przegląd możliwości języka HTML 5
W skrócie:
Internet jest stale rozwijany, każdego dnia widzimy tworzone nowe i coraz lepsze strony WWW, wykorzystujące możliwości HTML-a do granic możliwości. Język HTML 4 istnieje już niespełna dekadę i programiści poszukujący co raz to nowszych rozwiązań rozwoju Sieci, są blokowani przez ograniczenia języka oraz przeglądarek.
Aby dać twórcom stron większe pole manewru i możliwości, oraz uaktywnić bardziej interaktywne i pasjonujące strony internetowe oraz aplikacje – HTML 5 wprowadza i zwiększa tym samym możliwości pisania WWW.
Pracę nad piątą wersją HTML-a rozpoczęto w 2004 r. i na dzień dzisiejszy obecnie jest realizowany wspólnie przez W3C HTML WG oraz WHATWG. Wiele bardzo ważnych firm uczestniczy projektach w W3C (włączając w to przedstawicieli czterech głównych producentów przeglądarek: Microsoft, Mozillę, Operę i Apple) oraz wiele różnych organizacji i firm o różnym profilu działania.
Zauważyć jednak należy, że specyfikacja jest wciąż opracowywana i jeszcze długa droga przed do przebycia, aby ją ukończyć. Być może omówione za chwilę możliwości w tym artykule – będą mogły zostać zmienione. Artykuł ten stanowi krótkie wprowadzenie do istniejących głównych możliwości – takimi jakimi one są w bieżącym szkicu specyfikacji.
Struktura
HTML 5 wprowadza cały zestaw nowych elementów, które robią strukturę strony o wiele prostszą. Wiele stron w HTML 4 zawierają pospolitą strukturę (m.in. nagłówki, stopki i kolumny). Na dzień dzisiejszy zawieramy je w znacznik/elementy div wraz z nadanymi identyfikatorami (id) lub klasami (class).
Diagram ilustrujący typowy dwu kolumnowy układ strony przy użyciu znaczników div wraz z atrybutami id i class. Zawiera nagłówek, stopkę, poziomy pasek menu poniżej nagłówka. Głowna zawartość zawiera artykuł i pasek boczny po prawej stronie.
Użycie elementów div jest tak duże, ponieważ w bieżącej wersji HTML 4 jest brak niezbędnej i dokładnej semantyki dla opisu tych części. W języku HTML 5 zajęto się tym poprzez wprowadzenie nowych elementów, które reprezentują różne sekcje strony.
Elementy div zostały zastąpione poprzez nowe elementy: header, nav, section, article, aside i footer.
Znaczniki strony powinny wyglądać podobnie jak w przykładzie poniżej:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>Jest wiele korzyści z używania tych elementów. Kiedy używamy w połączeniu z elementami nagłówka (h1 do h6), wszystkie dostarczone w ten sposób znaczniki są zagnieżdżone na odpowiednim poziomie nagłówka, wyłączając sześć poziomów możliwych z poprzedniej wersji języka HTML. Specyfikacja zawiera szczegółowy algorytm do generowania zarysu, który uwzględnia strukturę tych elementów i nadal pozostaje kompatybilny wstecz z poprzednimi wersjami. Użyte może być poprzez autorskie narzędzia lub przeglądarki do generowania zawartości, aby pomóc użytkownikowi poruszać się po dokumencie.
Na przykład, następujący znacznik struktury wraz z zagnieżdżonymi elementami section i h1:
<section>
<h1>Poziom 1</h1>
<section>
<h1>Poziom 2</h1>
<section>
<h1>Poziom 3</h1>
</section>
</section>
</section>Zwróćcie uwagę, że dla lepszej kompatybilności z bieżącymi przeglądarkami, jest także możliwe zrobienie użytku z innych elementów nagłówka (h2 do h6) stosując odpowiednio w miejsce elementów h1.
Poprzez identyfikację celu danej sekcji na stronie, przy zastosowaniu określonych elementów podziału strony, technologia wspierająca może być pomocna użytkownikowi do łatwego przechodzenia po stronie. Na przykład, w prosty sposób można przeskoczyć nad sekcją menu lub szybko przeskoczyć z jednego artykułu do drugiego bez potrzeby wprowadzania przez autora odpowiedniego odnośnika. Autorzy również korzystają ponieważ zastępując wiele elementów div w dokumencie z jednym z kilku oddzielnych elementów, może pomóc w robieniu kodu źródłowego czystszym łatwiejszym dla autora.
Element header przedstawia nagłówek sekcji. Nagłówki mogą zawierać więcej, niż tylko sekcje przykładu dla nagłówka, to rozsądnie byłoby header obejmować pod nagłówkami.
<header>
<h1>Podgląd HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>
<header>
<h1>Przykładowy blog</h1>
<h2>Wstaw znaczniki liniowe.</h2>
</header>Element footer reprezentuje stopkę dla sekcji, to stosującej. Stopka zwykle zawiera informacje o swojej sekcji, takie jak kto napisał stronę, odnośniki do powiązanych dokumentów, prawo autorskie, i podobne.
<footer>© 2007 Przykład Inc.</footer>Element nav reprezentuje sekcję odnośników nawigacji/menu. Jest on odpowiedni dla każdej nawigacji strony lub zawartości tabeli.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>Element aside, który jest zawartością styczną do zawartości strony i jest zazwyczaj wykorzystywany do oznaczenia pasków bocznych.
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>Element section przedstawia ogólny fragment dokumentu albo aplikacji, taki jak rozdział, na przykład:
<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
...</p>
</section>Element article przedstawia niezależny fragment dokumentu, strony albo miejsca. Jest to odpowiednie dla zawartości takich jak wiadomości albo artykuły na blogu, postu na forum albo indywidualnych komentarzy.
<article id="comment-2">
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="http://example.com/">Jack O'Niell</a></h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
</header>
<p>Kolejny wspaniały artykuł!</p>
</article>Audio i wideo
W ostatnich latach, wideo i audio w Internecie stały się coraz bardziej widoczne i witryny jak YouTube, Viddler, Revver, MySpace oraz tuzin innych – czynią je łatwymi dla każdego, kto chce opublikować swoje wideo i audio. Jednakże, od bieżącego języka HTML nie otrzymujemy koniecznego sposobu, aby z powodzeniem zagnieździć i kontrolować multimedia, funkcjonalność wielu takich witryn opiera się na technologii Flash. Pomimo, że można wbudować multimedia używając różnych wtyczek (takich jak QuickTime, Windows Media, itd.), Flash jest obecnie tylko powszechnie rozpowszechnioną stosowaną wtyczką, która dostarcza kompatybilne rozwiązanie z odpowiednim API dla programistów.
Jak świadczony przez różnych opartych o Flash odtwarzaczach medialnych, autorzy interesują się dostarczaniem własnych zaprojektowanych interfejsów użytkownika, które ogólnie pozwalają użytkownikom na odtwarzanie, przerywanie, zatrzymywanie oraz na regulację głosu. Planowane jest dostarczenie podobnej funkcjonalności w przeglądarkach poprzez dodanie natywnej obsługi dla zagnieżdżonych audio i video oraz dostarczeniu API DOM skryptom do kontroli nagrania.
Nowe elementy video i audio czynią to prostymi. Zarówno Opera i WebKit posiadają swe finalne wersję wraz z częściową obsługą elementu video.
Najprostszy sposób, aby zagnieździć video jest zastosowanie elementu video i pozwolić przeglądarce dostarczyć domyślny interfejs użytkownika. Atrybut controls jest typem logicznym, który określa gdzie chcielibyśmy lub nie chcielibyśmy włączyć lub wyłączyć domyślny UI.
<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Pobierz film</a>
</video>Opcjonalny atrybut poster służy do określenia obrazka, który będzie wyświetlony w miejsce video przed tym jak zacznie być odtwarzane. Jest więcej formatów, które obsługują własną ramkę zdjęcia, takie jak MPEG-4, który to dostarcza alternatywnego rozwiązanie, które może pracować indywidualnie z formatu video.
To jest właśnie proste osadzić audio do strony używającej element audio. Większość z atrybutów jest wspólna między elementami video, a audio, pomimo że z oczywistych względów, elementowi audio brakuje width, height i atrybutów poster.
<audio src="music.oga" controls>
<a href="music.oga">Pobierz piosenkę</a>
</audio>HTML 5 dostarcza element source dla określenia alternatywnego pliku audio lub video, które ma wybrać przeglądarka opierając się na jego typie lub obsłudze kodeka. Atrybut media możemy użyć do określenia wartości atrybutu, który może opierać się na jakiś ograniczeniach urządzenia oraz atrybucie type dla określenia typu. Zwróć uwagę, że kiedyś używasz elementu source, atrybut src musi zostać pominięty w ich elemencie rodzica video lub audio lub alternatywne elementy source zostaną zignorowane.
<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp"
media="handheld">
<source src="video.ogv" type="video/ogg;
codecs=theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>Dla twórców, którzy chcą odrobinę więcej kontroli nad interfejsem użytkownika, tak że oni mogą sprawiać, że to pasuje do ogólnego projektu strony internetowej, rozległe API dostarcza kilku metod oraz zdarzeń pozwalającym skryptów kontrolować odgrywane media. Najprostsze metody do wykorzystania są to play(), pause() i ustawiając currentTime, aby przewinąć do początku. Następujący przykład ilustruje wykorzystanie tego.
<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;">
<< Rewind</button>Dłuższy opis atrybutów znajduje się w aktualnej wersji specyfikacji.
Dokument
To co zapewne wszystkich ciekawi najbardziej to możliwości jakie da nam nowy język HTML 5, który posiada składnię kompatybilną z językiem HTML 4 i dokumentami XHTML1 opublikowanymi w Sieci. Dokumenty stosujące wspomnianą składnie muszą być podawane przeglądarce jako text/html.
HTML 5 szczegółowo definiuje reguły parsowania składni (wraz z obsługą błędów), które są bardziej kompatybilne z popularnymi implementacjami. User Agent będzie postępował według tych reguł z zasobami, które posiadają Typ MIME text/html.
Przykład dokumentu podporządkowującego się składni HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Przykładowy dokument</title>
</head>
<body>
<p>Przykładowy paragraf</p>
</body>
</html>XML jest inną składnią jaka może być stosowana dla języka HTML 5. Składnia ta jest kompatybilna z dokumentami XHTML1. Dokumenty stosujące tą składnię powinny być/wymagają podawane przeglądarce wraz z typem MIME XML oraz wymagają umieszczenia w przestrzeni nazw http://www.w3.org/1999/xhtml.
Poniżej mamy przykład dokumentu HTML 5 podporządkowującego się składni XML. Zwracamy szczególną uwagę, że dokumenty XML muszą posiadać typ MIME XML, czyli takie jak: application/xhtml+xml lub application/xml.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Przykładowy dokument</title>
</head>
<body>
<p>Przykładowy paragraf</p>
</body>
</html>Wpis powstał w oparciu o artykuł "A Preview of HTML 5" ze strony A List Apart. We wpisie wykorzystałem dwie zawarte grafiki, które pomagają opisać nowe elementy HTML 5
