HTML5

W tym rozdziale dowiesz się...

Wstęp

Język HTML 4 stał się oficjalną rekomendacją W3C w 1997 roku. Pierwsza wersja specyfikacji XHTML 1 została ogłoszona w roku 2000. Celem XHTML 1.0 ani 1.1 nie było wprowadzanie nowych znaczników ani atrybutów, ale zbliżenie składni języka HTML do XML. Miało to umożliwić twórcom oraz administratorom serwisów internetowych korzystanie z narzędzi i bibliotek dostępnych dla języka XML oraz pozwolić na większą rozszerzalność HTML - poprzez możliwość osadzania w dokumencie XHTML fragmentów pochodzących z innych specyfikacji XML (SVG, MathML, RDF). Jednak brak nowych możliwości języka, w ciągle rozwijającej się sieci, zaczął mocno doskwierać twórcom oraz producentom przeglądarek. Z tego powodu konsorcjum W3C rozpoczęło prace nad specyfikacją XHTML 2.0, która miała całkowicie zerwać z historycznymi zaszłościami języka HTML 4. Krok ten nie spodobał się producentom popularnych przeglądarek internetowych, którzy przez lata tworzyli swoje produkty tak, aby były zgodne z językiem HTML. Nie ma co ukrywać, że wprowadzenie XHTML 2.0 mogłoby być również sporym problemem dla zwykłych użytkowników, którzy nie mając zainstalowanej najnowszej wersji przeglądarki zapewne nie mogliby w ogóle wyświetlić stron zgodnych z nowym standardem. Z tych powodów prace nad XHTML 2.0 zostały ostatecznie przerwane i specyfikacja ta zapewne nigdy nie zostanie ukończona.

Problem jednak nadal pozostał. Dzisiaj Internet nie taki sam, jak w 1997 roku, kiedy dominowały statyczne dokumenty tekstowe, a multimedialność polegała na wstawieniu do artykułu kilku ilustracji. Dlatego producenci popularnych przeglądarek postanowili rozpocząć prace nad nową wersję znanego wszystkim języka znaczników - HTML tym razem już w odsłonie nr 5. Potem dla ostatecznego opracowania nowej specyfikacji powołano grupę roboczą W3C. Głównymi celami HTML5 są:

  • Wprowadzenie nowych elementów dla zwiększenia interaktywności i multimedialności stron internetowych.
  • Wprowadzenie nowych znaczników semantycznych, aby uczynić sieć bardziej dostępną dla wszystkich.
  • Oficjalne załączenie do specyfikacji rozszerzeń, dodanych w przeszłości na własną rękę przez producentów przeglądarek, które i tak stały się już wcześniej standardem de facto.
  • Bardziej szczegółowe określenie sposobu obsługi błędów, tak aby dokumenty napisane przez niedouczonych webmasterów wyświetlały się tak samo w każdej przeglądarce.
  • Zachowanie kompatybilności wstecz, tak by użytkownicy starszych przeglądarek również mogli korzystać ze stron napisanych w nowym języku.

Czy XHTML umarł?

Uważny czytelnik w tym momencie może poczuć się nieco zdezorientowany - "Najpierw uczyłem się HTML 4, potem dowiedziałem się, że lepszy od niego może być XHTML, a teraz jeszcze muszę się uczyć HTML5?". W wielu zastosowaniach język HTML jest zupełnie wystarczający. Nie każdy webmaster musi znać język XML, a zatem tym bardziej nie będzie miał potrzeby korzystania z jego narzędzi. Jednak pisanie dokumentów HTML w taki sposób, aby składniowo były zgodne z językiem XHTML 1 (a więc również XML), tak naprawdę raczej niewiele kosztuje. Być może kiedyś zajdzie potrzeba wykorzystania dodatkowych możliwości XHTML, a wtedy dokumenty będą już do tego praktycznie przygotowane.

Mimo swojej nieco mylącej nazwy, specyfikacja HTML5 tak naprawdę definiuje dwa języki: HTML5 oraz XHTML5. Ten drugi jest tym samym, czym był XHTML 1 dla HTML 4, czyli korzysta dokładnie z tych samych znaczników i atrybutów, a jedynie określa nieco inny sposób zapisu oraz klika dodatkowych ograniczeń w celu uzyskania zgodności z ogólnym językiem XML. Nie ma zatem obawy - XHTML nie umarł i na dodatek ma się całkiem dobrze :-) Jeżeli jednak czytelnik woli korzystać z uproszczonej składni HTML i nie sądzi, że własności XML kiedykolwiek będą mu potrzebne, nie ma żadnych przeszkód, aby używać zapisu właściwego tylko dla języka HTML. Tworząc specyfikację HTML5 organizacja W3C dała jasno do zrozumienia (pod delikatnym naciskiem producentów przeglądarek), że język HTML nie zostanie porzucony na rzecz XHTML, ale że będą się rozwijać jednocześnie.

Składnia (X)HTML5

Przykładowy dokument HTML5

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>...</title>
	</head>
	<body>
		...
	</body>
</html>

W pierwszej linijce widzimy skróconą deklarację typu dokumentu (co ważne, nie przełącza ona przeglądarki w tryb Quirks). Powiedzmy sobie szczerze - raczej nikt nie był w stanie zapamiętać rozwlekłej formy DTD dla języka HTML 4 ani XHTML 1. Przeglądarki również nie robiły użytku z adresów URL w nich zawartych. Dlatego zdecydowano się ją skrócić. W nowej wersji nie ma znaczenia wielkość liter w zawartości DTD - poprawny będzie także zapis:

<!DOCTYPE html>

Specyfikacja pozwala również na stosowanie specjalnej deklaracji, która ma na celu uzyskanie kompatybilności z bardzo starymi przeglądarkami:

<!DOCTYPE html SYSTEM "about:legacy-compat">

Wydaje się jednak, że nie ma takiej potrzeby i standardowa skrócona deklaracja jest w zupełności wystarczająca.

Przykładowy dokument XHTML5

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>...</title>
	</head>
	<body>
		...
	</body>
</html>

Tutaj niewiele się zmieniło. W poprawnym dokumencie XHTML stronę kodową określa się w prologu XML. Nie powinno się wtedy stosować odpowiadającego jej znacznika META.

MathML i SVG

MathML (ang. Mathematical Markup Language) jest językiem znaczników, wywodzącym się z XML, służącym do przedstawiania skomplikowanych wzorów i symboli matematycznych.

SVG (ang. Scalable Vector Graphics) jest językiem znaczników, wywodzącym się z XML, służącym do zapisu grafiki wektorowej (w tym animacji).

Oba te formaty można osadzać wprost w dokumentach HTML5.

<!doctype html>
<title>MathML i SVG w HTML 5</title>
<p>
	Twierdzenie Pitagorasa:
	<math> <mrow><msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup></mrow> </math>
</p>
<p>
	Zielony okrąg:
	<svg> <circle r="50" cx="50" cy="50" fill="green"> </svg>
</p>

Nowe elementy HTML5

UWAGA!
Przeglądarka Internet Explorer do wersji 8.0 (włącznie) nie pozwala formatować nowych znaczników HTML5 za pomocą stylów CSS.

Na szczęście znalazła się na to bardzo prosta rada :-) Wystarczy wstawić gdzieś w nagłówku dokumentu następujący kod:

<script>
document.createElement('article');
document.createElement('aside');
document.createElement('audio');
document.createElement('bdi');
document.createElement('canvas');
document.createElement('command');
document.createElement('datalist');
document.createElement('details');
document.createElement('dialog');
document.createElement('embed');
document.createElement('figcaption');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('keygen');
document.createElement('main');
document.createElement('mark');
document.createElement('meter');
document.createElement('nav');
document.createElement('output');
document.createElement('progress');
document.createElement('rp');
document.createElement('rt');
document.createElement('ruby');
document.createElement('section');
document.createElement('source');
document.createElement('summary');
document.createElement('time');
document.createElement('track');
document.createElement('wbr');
document.createElement('video');
</script>

Jeszcze lepiej usunąć z powyższego kodu pierwszą i ostatnią linijkę, a następnie zapisać tak przygotowany tekst w osobnym pliku pod nazwą np. "html5.js". Wtedy w nagłówkach dokumentów serwisu zamiast powyższego dość obszernego kodu, wystarczy wstawić:

<script src="html5.js"></script>

Ważne: plik "html5.js" musi się znajdować w tym samym katalogu, co dokumenty *.html, w których został osadzony. W przeciwnym razie należy zastosować odpowiednią ścieżkę dostępu (np. src="../html5.js").

Ponadto przeglądarki które nie obsługują nowych znaczników, zwykle próbują wyświetlać je w linii. Nie jest to zgodne z domyślnym sposobem prezentacji części z tych elementów, określonym w specyfikacji. Aby ujednolicić sposób wyświetlania elementów HTML5 w starszych przeglądarkach, powinniśmy dodatkowo wstawić do dokumentu specjalny arkusz stylów:

article, aside, details, dialog, figcaption, figure, footer, header, main, nav, section {
	display: block;
}

audio, canvas, embed, keygen, meter, progress, video {
	display: inline-block;
}

[hidden] {
	display: none;
}

Jeżeli nie korzystasz z możliwości CSS, nie musisz używać żadnej z wyżej przedstawionych sztuczek... ale może w takim razie to już najwyższy czas, aby poznać Kaskadowe Arkusze Stylów ;-)

Sekcje

Sekcje to odrębne tematycznie fragmenty treści na stronie. Można je porównać do rozdziałów w książce. Każda sekcja może mieć nagłówek (tytuł rozdziału) i stopkę (zawierającą informacje o autorze, prawach autorskich itp.).

W ramach znaczników przydatnych przy wstawianiu sekcji, wyróżnić możemy elementy, które fizycznie te sekcje tworzą (ang. sectioning elements) - są to: ARTICLE, ASIDE, NAV, SECTION. Definiują one w dokumencie zakres dla nagłówków (H1, H2, H3, H4, H5, H6) i stopek (FOOTER).

SECTION
Ogólna sekcja dokumentu lub aplikacji. Może być użyta w połączeniu z elementami: H1, H2, H3, H4, H5, H6 - dla wskazania struktury dokumentu.
ARTICLE
Niezależny kawałek treści dokumentu, jak np. wpis na blogu albo artykuł w gazecie.
ASIDE
Kawałek treści, który tylko nieznacznie jest powiązany z resztą strony.
HEADER
Grupa wprowadzająca albo ułatwienia nawigacyjne.
FOOTER
Stopka sekcji. Może zawierać informacje na temat autora, praw autorskich itp.
NAV
Sekcja dokumentu przeznaczona na nawigację.

Oprócz wymienionych tutaj znaczników, do elementów używanych przy wstawianiu sekcji zaliczamy również BODY.

Nagłówki sekcji

Jeżeli z kodu źródłowego strony usuniemy całą treść oprócz nagłówków wszystkich sekcji i podsekcji, powinniśmy otrzymać zagnieżdżoną listę w formie spisu treści dokumentu (ang. document outline). Nawet jeśli jawnie nie umieścimy spisu treści na stronie, taki domniemany spis nagłówków może być niezwykle przydatny dla czytelników serwisu. Osoby niewidome, korzystające z przeglądarki automatycznie tworzącej spisy z nagłówków, będą mogły przeskakiwać od razu do interesujących je sekcji dokumentu. Pozostali użytkownicy również na tym skorzystają, gdyż otrzymają dokument poukładany w logiczne części (w obszernym niepodzielonym na rozdziały tekście, trudno jest się połapać). Prawidłowo oznaczone nagłówki sekcji mają również pozytywny efekt, jeżeli chodzi o pozycję tak zbudowanej strony w wynikach wyszukiwarek internetowych. Dlatego warto o to szczególnie zadbać.

Do nagłówków sekcji zaliczamy: H1, H2, H3, H4, H5, H6. Każda sekcja dokumentu ma co najwyżej jeden nagłówek, a sekcje nieposiadające znaczników nagłówków, otrzymują nagłówki niejawne - np. "Niezatytułowana sekcja". Oznacza to, że wstawienie nagłówka - nawet bez elementu fizycznie oznaczającego sekcję (ARTICLE, ASIDE, NAV, SECTION) - tworzy nową sekcję w sposób niejawny (jeśli poziom nagłówka jest przynajmniej tak samo ważny jak poprzedni) lub podsekcję (gdy nagłówek ma mniej ważny poziom). Poziom nagłówka, w obrębie elementów fizycznie tworzących sekcje, nie ma znaczenia. Jeżeli do dokumentu wstawimy dwa następujące po sobie elementy SECTION, z który pierwszy będzie miał np. nagłówek H2, a drugi H3, to w spisie treści dokumentu obie te sekcje i będą równorzędne.

Oprócz elementów tworzących sekcje, wyróżniamy również tzw. korzenie sekcji. Nie tworzą one nowych sekcji w dokumencie, a cała ich zawartość (ewentualne podsekcje) nie wchodzą w skład głównego spisu treści. Każdy taki element może mieć jednak swój własny, odrębny spis treści. Korzeniami sekcji są: BLOCKQUOTE, BODY, DETAILS, FIELDSET, FIGURE, TD.

Przykład:

Tak podzielony dokument:

<h1>Sekcja 1</h1>
<h2>Podsekcja 1.1</h2>
<blockquote>
	<h3>Osobna sekcja</h3>
</blockquote>
<p>Akapit podsekcji 1.1</p>
<h2>Podsekcja 1.2</h2>
<section>
	<h3>Podsekcja 1.3</h3>
</section>
<p>Akapit sekcji 1</p>

...utworzy następujący spis treści:

  1. Sekcja 1
    (zawiera akapit "Akapit sekcji 1")
    1. Podsekcja 1.1
      (zawiera blok cytowany i akapit "Akapit podsekcji 1.1")
    2. Podsekcja 1.2
      (nie ma żadnej zawartości oprócz nagłówka)
    3. Podsekcja 1.3
      (nie ma żadnej zawartości oprócz nagłówka)

Jest to równoważne następującej strukturze ze wszystkimi sekcja jawnymi:

<section>
	<h1>Sekcja 1</h1>
	<section>
		<h2>Podsekcja 1.1</h2>
		<blockquote>
			<section>
				<h3>Osobna sekcja</h3>
			</section>
		</blockquote>
		<p>Akapit podsekcji 1.1</p>
	</section>
	<section>
		<h2>Podsekcja 1.2</h2>
	</section>
	<section>
		<h3>Podsekcja 1.3</h3>
	</section>
	<p>Akapit sekcji 1</p>
</section>

HTML5 nie nakłada wymogu, aby numeracja nagłówków sekcji rozpoczynała się od H1. Choć może to wyglądać mało czytelnie, tak podzielony dokument:

<body>
	<h4>Jabłka</h4>
	<p>Jabłka są owocami.</p>
	<section>
		<h2>Smak</h2>
		<p>Smakują wyśmienicie.</p>
		<h6>Słodkość</h6>
		<p>Czerwone jabłka są bardziej słodkie niż zielone.</p>
		<h1>Kolor</h1>
		<p>Jabłka mają różne kolory.</p>
	</section>
</body>

...jeżeli chodzi o spis treści, jest równoważny następującemu:

<body>
	<h1>Jabłka</h1>
	<p>Jabłka są owocami.</p>
	<section>
		<h2>Smak</h2>
		<p>Smakują wyśmienicie.</p>
		<section>
			<h3>Słodkość</h3>
			<p>Czerwone jabłka są bardziej słodkie niż zielone.</p>
		</section>
	</section>
	<section>
		<h2>Kolor</h2>
		<p>Jabłka mają różne kolory.</p>
	</section>
</body>

Można nawet używać wyłącznie nagłówków pierwszego poziomu:

<body>
	<h1>Jabłka</h1>
	<p>Jabłka są owocami.</p>
	<section>
		<h1>Smak</h1>
		<p>Smakują wyśmienicie.</p>
		<section>
			<h1>Słodkość</h1>
			<p>Czerwone jabłka są bardziej słodkie niż zielone.</p>
		</section>
	</section>
	<section>
		<h1>Kolor</h1>
		<p>Jabłka mają różne kolory.</p>
	</section>
</body>

Ze względu na kompatybilność z przeglądarkami, które nie obsługują w pełni HTML5, najbezpieczniejszą formą numerowania nagłówków sekcji jest przedostatni przykład. Jeżeli usuniemy w nim znaczniki sekcji, dokument nadal będzie tak samo podzielony.

Znaczniki grupujące

Służą do grupowania innych elementów.

FIGURE, FIGCAPTION
Niezależny kawałek w treści oraz jego [opcjonalny] podpis. Zwykle odwołania do niego występują w głównej części dokumentu.
MAIN
Główna zawartość dokumentu.

Oprócz wymienionych tutaj znaczników, do elementów grupujących zaliczamy również: P, HR, PRE, BLOCKQUOTE, OL, UL, LI, DL, DT, DD, DIV.

Elementy osadzone

Osadzają w dokumencie treści multimedialne.

VIDEO, AUDIO, SOURCE
Treść multimedialna. Udostępniają API, dzięki któremu możliwe jest oprogramowanie własnego interfejsu, jednak możliwe jest również skorzystanie z domyślnego, który zapewnia przeglądarka. Element SOURCE jest używany w połączeniu z tymi znacznikami, jeżeli ten sam materiał multimedialny jest dostępny w wielu formatach.
TRACK
Dostarcza ścieżki tekstowe dla elementu VIDEO.
EMBED
Treść generowana przez wtyczki przeglądarki.
CANVAS
Używane do renderowania dynamicznej grafiki rastrowej w czasie wyświetlania strony - takiej jak wykresy lub gry.

Oprócz wymienionych tutaj znaczników, do elementów osadzonych zaliczamy również: IMG, IFRAME, OBJECT, PARAM, MAP, AREA, MATH, SVG.

Semantyka tekstu

Wprowadzają znaczenie (semantykę) do objętego nimi fragmentu tekstu.

MARK
Zaznacza lub uwydatnia tekst w jednym dokumencie, w celu odwołania się do niego w innym kontekście.
TIME
Data i/lub czas.
RUBY, RT, RP
Przypisy ruby - specjalne krótkie wstawki obok bazowego tekstu, używane zwykle w dokumentach wschodnioazjatyckich do wskazania wymowy lub wstawienia krótkiej adnotacji. W języku japońskim ta forma przypisów jest również nazywana furigana.
BDI
Obejmuje tekst, odizolowany od otaczającej go zawartości dla celów dwukierunkowego formatowania tekstu.
WBR
Możliwość przełamania linii tekstu.

Oprócz wymienionych tutaj znaczników, do elementów semantyki tekstu zaliczamy również: A, EM, STRONG, SMALL, S, CITE, Q, DFN, ABBR, CODE, VAR, SAMP, KBD, SUB, SUP, I, B, U, BDO, SPAN, BR.

Formularze

Umożliwiają wstawienie na stronie interaktywnych formularzy, które po wypełnieniu przez użytkownika mogą zostać wysłane na serwer, poprzez e-mail lub obsłużone przez skrypty działające w przeglądarce.

DATALIST
Tworzy listę rozwijaną (kombi) dla elementu INPUT.
KEYGEN
Kontrolka do generowana pary kluczy kryptograficznych.
OUTPUT
Pewien rodzaj danych wyjściowych, np. wynik obliczeń ze skryptu.
PROGRESS
Stopień ukończenia zadania - np. pobierania albo w czasie wykonywania czasochłonnych operacji.
METER
Wynik pomiaru - np. zapełnienie dysku.

Oprócz wymienionych tutaj znaczników, do elementów formularzy zaliczamy również: FORM, FIELDSET, LEGEND, LABEL, INPUT, BUTTON, SELECT, OPTGROUP, OPTION, TEXTAREA.

Pole INPUT

Znany ze specyfikacji HTML 4.01 element INPUT, tworzy większość rodzajów kontrolek formularzy. O tym, jaki typ elementu zostanie wyświetlony na ekranie, decyduje wartość atrybutu type="...". W języku HTML5 wprowadzono wiele dodatkowych typów kontrolek dla znacznika INPUT. W przypadku kiedy przeglądarka nie będzie obsługiwać nowych typów kontrolek, na ekranie zostanie wyświetlone zwykłe pole tekstowe (<input type="text">). Co prawda wtedy efekt końcowy nie będzie zgody z oczekiwaniami, ale przynajmniej nie ma obawy, że użytkownik w ogóle nie będzie w stanie prawidłowo wypełnić takiego formularza. Zrobi to, wpisując odpowiednią wartość ręcznie.

Lista nowych typów elementu INPUT (wartości atrybutu type="..."):

color
Kolor (Firefox 29, Opera, Chrome)
date
Data (Opera, Chrome)
datetime
Data i czas (Opera 12-)
datetime-local
Data i czas lokalny (Opera, Chrome)
email
Adres poczty e-mail (Internet Explorer 10, Firefox, Opera, Chrome)
month
Miesiąc (Opera, Chrome)
number
Liczba (Firefox 29, Opera, Chrome)
range
Przedział liczbowy (Internet Explorer 10, Firefox, Opera, Chrome)
search
Pole wyszukiwania (interpretuje: Internet Explorer 10 Opera 15, Chrome)
tel
Numer telefonu
time
Czas (Opera, Chrome)
url
Adres URL (Internet Explorer 10, Firefox, Opera, Chrome)
week
Tydzień w roku (Opera, Chrome)

Przykład:

Zobacz przykład: INPUT

Elementy interaktywne

Pozwalają wprowadzić na stronie interaktywność z użytkownikiem.

DETAILS, SUMMARY
Dodatkowe informacje albo kontrolki, które użytkownik może zobaczyć. Element SUMMARY dostarcza ich streszczenie, legendę lub podpis.
COMMAND
Komenda, którą może wywołać użytkownik.
DIALOG
Część aplikacji w postaci okna dialogowego.

Oprócz wymienionych tutaj znaczników, do elementów interaktywnych zaliczamy również MENU.

Nowe atrybuty HTML5

async

Na stronach internetowych można załączać dynamiczne skrypty, napisane w języku JavaScript. Zwykle zapisuje się je w osobnych plikach z rozszerzeniem *.js i osadza na stronie przy użyciu znacznika SCRIPT - podając do nich odnośnik w atrybucie src="...". W trybie domyślnym wczytywanie dokumentu zostaje zatrzymane po napotkaniu tak osadzonego skryptu i kontynuowane dalej, dopiero kiedy w całości się on załaduje. Często tylko niepotrzebnie wydłuża to czas, po którym użytkownik może już przeglądać pozostałą treść strony.

Korzystniej by było od razu wyświetlić podstawową treść tekstową strony, tak aby czytelnik mógł już się zacząć z nią zaznajamiać, a w tym czasie w tle doładować wszystkie potrzebne pliki dynamicznych skryptów. W języku HTML 4.01 służył do tego atrybut logiczny defer. Oznaczony nim skrypt ładuje się dopiero po wczytaniu wszystkich znaczników z dokumentu, tzn. po osiągnięciu </html>. HTML5 wprowadza dodatkowy atrybut logiczny - async - dzięki któremu pliki skryptów zostaną załadowane tak szybko, jak to będzie możliwe (być może jeszcze przed wczytaniem wszystkich znaczników dokumentu).

Zastosowanie: SCRIPT.

autocomplete

Przeglądarki często posiadają wbudowaną funkcję automatycznego uzupełniania formularzy. Najczęściej odbywa się to w formie rozwijanej listy poniżej pól tekstowych, na którą użytkownik może przejść wciskając klawisz kursora w dół i zaakceptować wybór klawiszem Enter. Na liście wyświetlają się podpowiedzi, które użytkownik wcześniej wpisywał do tego pola. Nie zawsze jednak jest to korzystne. Jeżeli użytkownik na publicznie dostępnym komputerze (np. w bibliotece) wypełni formularz zawierający jego numer telefonu, następna osoba korzystająca z tego samego komputera i wypełniająca ten sam formularz, zobaczy wszystkie numery telefonów, wcześniej tutaj wpisywane. Może taką wiedzę np. nielegalnie sprzedać firmie zajmującej się telemarketingiem. Analogiczna sytuacja występuje przy wypełnianiu w formularzu dowolnych danych osobowych: imienia i nazwiska w połączeniu np. z adresem pocztowym lub e-mail. Aby zapobiec takiej nieprzyjemnej sytuacji, powinniśmy wyłączyć funkcję automatycznego uzupełniania (autocomplete="off") we wszystkich polach formularzy, które zawierają dane osobowe.

Nie powinno się raczej wyłączać automatycznego uzupełniania w formularzach logowania, ponieważ uniemożliwia to działanie menedżerów haseł, powodując irytację użytkowników.

Zastosowanie: INPUT.

autofocus

(interpretuje: Internet Explorer 11, Firefox, Opera, Chrome)

Atrybut logiczny (wstawiany bez wartości), dzięki któremu po załadowaniu strony, kursor tekstowy zostanie automatycznie umieszczony w tak zaznaczonym polu formularza.

Zastosowanie: INPUT (z wyjątkiem type="hidden"), SELECT, TEXTAREA, BUTTON.

Przykład:

<form action="?" method="post">
	<fieldset>
		<legend>Zaloguj się</legend>
		<input type="text" name="login" autofocus>
		<input type="password" name="password">
		<input type="submit" value="OK">
	</fieldset>
</form>

charset

Znacznik META uzyskał możliwość określania deklaracji strony kodowej w formie skróconego zapisu.

Styl HTML 4.01:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Styl HTML5:

<meta charset="utf-8">

Co ciekawe, taką formę zapisu obsługują nawet stare wersje przeglądarki Internet Explorer. Dzieje się tak dlatego, że program ten w sposób uproszczony próbował wykryć deklarację strony kodowej, szukając w nagłówku dokumentu po prostu tekstu zaczynającego się od: charset=.

Zastosowanie: META.

contenteditable

Podanie wartości contenteditable="true" umożliwia dynamiczną edycję zawartości tak oznaczonego elementu strony. Użytkownik może wpisać np. bezpośrednio w treści akapitu swój własny tekst. Treść taka jednak nie będzie widoczna dla innych użytkowników, odwiedzających tę samą stronę. Nie będzie również możliwości jej zapisania - po odświeżeniu strony wyświetli się ponownie domyślna zawartość dokumentu.

Aby efekty edycji były trwałe, konieczne jest zainstalowanie na serwerze dowolnego Systemu Zarządzania Zawartością - CMS.

data-*

HTML5 pozwala webmasterom nadawać dowolnemu znacznikowi na stronie swoje własne atrybuty, pod warunkiem że ich nazwa rozpoczyna się od: data- (np. data-mojatrybut="..."). Nie mają one żadnego wpływu na sposób wyświetlania strony ani na semantykę tekstu. Ich wartości wykorzystuje się w dynamicznych skryptach JavaScript - wstawianych do dokumentu za pomocą znaczników SCRIPT. Jeżeli nie korzystasz z takich skryptów, nie używaj tych atrybutów.

dirname

Pozwala wysłać z formularzem dodatkową informację o kierunku tekstu, w którym wybrane pole było wpisywane. W językach łacińskich tekst wpisuje się od lewej do prawej (dir="ltr"), ale w arabskim lub hebrajskim - od prawej do lewej (dir="rtl"). Jeżeli na naszą stronę wejdzie osoba z domyślnie ustawionym przeciwnym kierunkiem tekstu niż się spodziewaliśmy, treść wysłana w formularzu może być potem dla nas trudna do odczytania.

Zastosowanie: INPUT, TEXTAREA.

Przykład:

<form action="?">
	<input type="text" name="nazwa" dirname="nazwa.dir">
</form>

Tak przygotowany formularz może zostać wysłany w następujący sposób:

?nazwa=Witaj&nazwa.dir=ltr

Dzięki temu wiemy, że tekst przekazany w polu o nazwie "nazwa" został wpisany w kierunku od lewej do prawej ("ltr").

disabled, name

(interpretuje: Internet Explorer 11, Firefox, Opera, Chrome)

Znacznik FIELDSET może mieć przypisany atrybut logiczny (wstawiany bez wartości) disabled. Spowoduje on zablokowanie wszystkich pól formularza objętych tym znacznikiem.

Temu samemu znacznikowi możemy również przypisać atrybut name="...", co może być przydatne w połączeniu z dynamicznymi skryptami, działającymi w przeglądarce (JavaScript).

Zastosowanie: FIELDSET.

Przykład:

Wszystkie poniższe pola formularza powinny zostać zablokowane:

<fieldset disabled>
	<legend>Formularz</legend>
	<input type="text" name="pole">
	<input type="radio" name="opcja" value="1">
	<input type="radio" name="opcja" value="2">
</fieldset>

Zobacz przykład: disabled

download

(interpretuje: Firefox, Opera 15, Chrome)

Wskazuje, że hiperłącze służy do pobierania pliku ze strony. Dzięki temu można np. wymusić pobranie wskazanego dokumentu *.html na dysk lokalny użytkownika - w przeciwnym razie po kliknięciu odnośnika nastąpiłoby wyświetlenie wskazywanego dokumentu bezpośrednio w przeglądarce, a nie rozpoczęcie jego pobierania.

Jeżeli podano wartość tego atrybutu, określa ona domyślną nazwę, jaką powinien przyjąć plik, po zapisaniu go na dysku lokalnym użytkownika (w Firefox).

Zastosowanie: A, AREA.

draggable, dropzone, ondragstart, ondrag, ondragenter, ondragexit, ondragleave, ondragover, ondrop, ondragend

Pozwalają sterować mechanizmem przeciągnij-i-upuść (ang. drag-and-drop). Zwykle polega on na wskazaniu przeciąganego elementu myszką, wciśnięciu i przytrzymaniu przycisku myszki, przeniesieniu elementu w inne miejsce i zwolnieniu przycisku myszki.

Atrybut draggable="..." określa, czy oznaczony nim element da się przeciągnąć. Może przyjąć jedną z dwóch wartości:

true
Element można przeciągnąć myszką.
false
Element nie może zostać przeciągnięty.

Atrybut dropzone="..." określa element, na którym da się upuścić przeciąganą zawartość. Może przyjąć jedną lub więcej z podanych poniżej wartości rozdzielonych spacjami (wielkość liter nie ma znaczenia):

copy
Upuszczenie tutaj przeciąganego elementu spowoduje skopiowanie jego zawartości.
move
Przeciągany element zostanie tutaj przeniesiony ze swojej pierwotnej pozycji.
link
Upuszczenie elementu wstawi do niego odnośnik.
string:*
Przykładowo podanie wartości "string:text/plain" pozwala przenieść treść tekstową przeciąganego elementu.
file:*
Przykładowo podanie wartości "file:image/png" pozwala przenosić obrazki w formacie PNG.

Oprócz tego do sterowania mechanizmem przeciągnij-i-upuść służą zdarzenia:

ondragstart
Zapoczątkowanie operacji przeciągania
ondrag
Kontynuacja operacji przeciągania
ondragenter
Przeciągnięcie obiektu ponad element, gdzie może zostać on upuszczony
ondragexit, ondragleave
Przeciągnięcie obiektu z elementu, gdzie mógł on być upuszczony
ondragover
Przeciąganie elementu ponad obiektem, gdzie może on zostać upuszczony
ondrop, ondragend
Zwolnienie przycisku myszki podczas operacji przeciągania

Do realizacji mechanizmu przeciągnij-i-upuść na stronie WWW konieczna jest znajomość języków skryptowych - takich jak JavaScript - co wykracza poza zakres tego poradnika.

form

W HTML 4.01 wszystkie kontrolki formularza musiały się znajdować wewnątrz znacznika FORM. W przeciwnym razie nie były wysyłane z formularzem. HTML5 pozwala umieścić kontrolki gdziekolwiek na stronie i skojarzyć je z wybranym formularzem za pomocą atrybutu form="...". Jako wartość atrybutu należy podać identyfikator nadany formularzowi (atrybutem id="...").

Zastosowanie: INPUT, OUTPUT, SELECT, TEXTAREA, BUTTON, LABEL, OBJECT, FIELDSET.

Przykład:

<form action="?" id="formularz"></form>
<input type="text" name="pole" form="formularz">

formaction, formenctype, formmethod, formnovalidate, formtarget

Czasami zachodzi potrzeba, aby ten sam formularz mógł być wysłany na różne adresy URL, w zależności od przycisku, który użytkownik kliknie. Dotychczas nie było to możliwe bez zastosowania dynamicznych skryptów JavaScript, ponieważ formularz był wysyłany zawsze na adres, określony wartością atrybutu action="..." znacznika FORM. HTML5 wprowadza możliwość określenia oddzielnego adresu dla każdego przycisku wysłania formularza (<input type="submit">, <input type="image">, <button type="submit">). Wystarczy przypisać do przycisku atrybut formaction="..." i kiedy użytkownik w niego kliknie, formularz zostanie wysłany właśnie na ten adres URL.

Analogicznie można postąpić z pozostałymi atrybutami: formenctype="..." dla przycisków odpowiada enctype="..." całego formularza, formmethod="..." - method="...", formnovalidate - novalidate, formtarget="..." - target="...". [Zobacz specyfikację znacznika FORM].

Zastosowanie: INPUT, BUTTON.

Przykład:

<form action="form.php" method="post">
	<input type="submit" value="Wyślij na adres 1, w nowym oknie, pomiń walidację danych" formaction="button1.php" formmethod="get" formenctype="text/plain" formnovalidate formtarget="_blank">
	<input type="submit" value="Wyślij na adres 2" formaction="button2.php">
	<input type="submit" value="Wyślij na adres domyślny">
</form>

hidden

Atrybut logiczny (wstawiany bez wartości), który można nadać dowolnemu znacznikowi na stronie. Wskazuje on, że element nie jest jeszcze (albo już dłużej nie jest) istotny, z punktu widzenia pozostałej zawartości dokumentu. Przeglądarka nie powinna wyświetlać takich znaczników na ekranie.

hreflang, type, rel

Dla otrzymania spójności z elementami A oraz LINK, znacznik AREA uzyskał możliwość określania właściwości strony, do której kieruje odnośnik.

Zastosowanie: AREA.

list

(interpretuje: Internet Explorer 10, Firefox, Opera, Chrome)

Pozwala skojarzyć z polem tekstowym listę predefiniowanych wartości, z których użytkownik może wybierać.

Zastosowanie: INPUT.

Przykład:

<input type="text" name="kolor" list="kolory">
<datalist id="kolory">
	<option value="czerwony">
	<option value="zielony">
	<option value="niebieski">
</datalist>

Zobacz przykład: list="..."

manifest

Pozwala w sposób zaawansowany sterować pamięcią podręczną przeglądarki, umożliwiając tworzenie aplikacji dziających w trybie offline, tzn. po odcięciu dostępu do sieci.

Zastosowanie: HTML.

maxlength

W języku HTML 4.01 tylko zwykłe pole tekstowe formularza mogło mieć ograniczoną liczbę znaków, które użytkownik może do niego wpisać. HTML5 pozwala zrobić to również dla obszaru tekstowego.

Zastosowanie: TEXTAREA.

media

Dla otrzymania spójności z elementem LINK, znaczniki A oraz AREA uzyskały możliwość określania medium docelowego.

Zastosowanie: A, AREA.

min, max, step

(interpretuje: Opera, Chrome)

Określa minimalny lub/i maksymalny zakres wartości, które można wypełnić w polu formularza oraz oczekiwany skok wartości (step).

Zastosowanie: INPUT.

Przykład:

<input type="date" name="urodziny" max="2012-12-21">
<input type="number" name="wzrost" min="30" max="300" step="0.1">

Zobacz przykład: min="...", max="...", step="..."

multiple

Atrybut logiczny (wstawiany bez wartości), określający, że w danym polu tekstowym można wpisać kilka wartości.

Zastosowanie: INPUT.

Przykład:

<input type="email" name="adresaci" multiple>

Zobacz przykład: multiple

novalidate

Atrybut logiczny (wstawiany bez wartości), który pozwala wyłączyć wszelką weryfikację pól formularza. Oznacza to, że użytkownik będzie mógł wysłać formularza, nawet jeżeli nie wypełni wszystkich obowiązkowych pól albo poda nieprawidłowe wartości (np. wpisze adres e-mail w niepoprawnym formacie).

Zastosowanie: FORM.

Przykład:

Mimo oznaczenia pola jako obowiązkowe, użytkownik będzie mógł wysłać formularz, nawet jeżeli go nie wypełni:

<form action="?" novalidate>
	<input type="text" value="nazwa" required>
</form>

pattern

(interpretuje: Internet Explorer 10, Firefox, Opera, Chrome)

Pozwala określić wyrażenie regularne, które musi być spełnione podczas wpisywania tekstu w polu formularza przez użytkownika. Jest to pewien rodzaj filtru, który uniemożliwia nieprawidłowe wypełnienie formularza.

Zastosowanie: INPUT.

Przykład:

Kod pocztowy musi się rozpoczynać dwiema cyframi, następnie zawierać myślnik i na końcu trzy cyfry (np. 12-345):

<input type="kod_pocztowy" pattern="^[0-9]{2}-[0-9]{3}$">

Zobacz przykład: pattern="..."

placeholder

(interpretuje: Internet Explorer 10, Firefox, Opera, Chrome)

Podpowiedź dla użytkownika, co powinien wpisać w danym polu formularza. Przez przeglądarki atrybut ten może być obsługiwany w ten sposób, że jego wartość będzie na początku wpisana w pole, a zniknie po umieszczeniu w nim kursora tekstowego przez użytkownika.

Zastosowanie: INPUT, TEXTAREA.

Przykład:

<input type="search" name="q" placeholder="Szukaj w serwisie...">

Zobacz przykład: placeholder="..."

required

(interpretuje: Internet Explorer 10, Firefox, Opera, Chrome)

Atrybut logiczny (wstawiany bez wartości), który zaznacza pole formularza jako obowiązkowe. Jeśli użytkownik go nie wypełni, nie będzie mógł w ogóle wysłać formularza.

Zastosowanie: INPUT (z wyjątkiem type="hidden", type="image", type="button", type="submit", type="reset") SELECT, TEXTAREA.

Przykład:

<ul>
<li><label>Imię i nazwisko: <input type="text" name="imie_nazwisko" required> *</label></li>
<li><label> Płeć: <select name="plec" required>
	<option value="">Wybierz...
	<option value="kobieta">Kobieta
	<option value="mezczyzna">Mężczyzna
</select> *</li>
</ul>
<p>* Pola obowiązkowe</p>

Zobacz przykład: required

reversed

Atrybut logiczny (wstawiany bez wartości), który ustala odwrotną kolejność numeracji (...3, 2, 1) punktów listy uporządkowanej.

Zastosowanie: OL.

sandbox

(interpretuje: Internet Explorer 10, Firefox, Opera 15, Chrome)

Pozwala nałożyć dodatkowe ograniczenia na treść, wyświetlaną w ramce lokalnej: blokuje formularze, skrypty, API, atrybuty target="...", wtyczki oraz nawigację w innych ramkach i oknach. Możemy poluźnić te ograniczenia, przypisując odpowiednią wartość atrybutowi sandbox="..." - w postaci jednej lub więcej poniższych wartości rozdzielonych spacjami (wielkość liter nie ma znaczenia):

allow-forms
Pozwala wysyłać formularze.
allow-pointer-lock
Zezwala na używanie API blokującego wskaźnik myszki.
allow-popups
Pozwala na otwieranie wyskakujących okien oraz używanie atrybutu target="...".
allow-same-origin
Zezwala odczytywać ciasteczka przeglądarki oraz dane użytkownika z innych podobnych mechanizmów.
allow-scripts
Zezwala na uruchamiania skryptów JavaScript.
allow-top-navigation
Pozwala na używanie atrybutu target="_top" dla odnośników.

Podanie wartości sandbox="allow-scripts allow-same-origin" sprawi, że strona w ramce lokalnej będzie mogła samodzielnie usunąć atrybut sandbox i w ten sposób pozbyć się wszystkich nałożonych na nią ograniczeń.

Nakładanie ograniczeń na stronę pozwala wyświetlić w ramce lokalnej treść, która potencjalnie mogłaby być niebezpieczna dla czytelnika naszego serwisu. Oczywiście sami raczej nie zaatakujemy użytkownika serią wyskakujących okienek ani świadomie nie zainstalujemy mu konia trojańskiego czy wirusa. Nie zawsze jednak mamy pełną kontrolę nad wyświetlaną u nas treścią. Możemy chcieć osadzić na stronie jakiś widżet, pochodzący z innego serwisu. Będzie on bardzo przydatny, ale nie da się wykluczyć złych zamiarów jego twórcy lub przejęcia kontroli nad jego stroną przez osoby o takich zamiarach. W takim przypadku możemy zminimalizować ryzyko, osadzając widżet w następujący sposób:

<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://example.com/widget.html"></iframe>

Zastosowanie: IFRAME.

scoped

Ograniczenie możliwości wstawienia wewnętrznego arkusza stylów tylko do nagłówka dokumentu, mogło czasem stanowić problem. HTML5 znosi tę niedogodność, pozwalając wstawiać arkusz bezpośrednio wewnątrz elementów dokumentu - z przypisanym atrybutem logicznym scoped. Formatowanie określone w takim arkuszu uzyska element, w którym się on zawiera oraz wszystkie jego elementy potomne. Aby w takim arkuszu ustalić formatowanie dla całego dokumentu, należy się posłużyć regułą @global.

Zawężony wewnętrzny arkusz stylów (z przypisanym atrybutem scoped) musi być umieszczony jako pierwsze dziecko elementu, do którego ma się odnosić.

Zastosowanie: STYLE.

<!doctype html>
<html>
	<head>
		<title>...</title>
	</head>
	<body>
		<div>
			<style scoped>
			/* Ten arkusz nadaje formatowanie tylko znacznikowi DIV,
			w którym się zawiera oraz jego elementom potomnym: P, EM. */
			div { color: red }
			/* Aby ustalić style globalne dla całej strony,
			należy wykorzystać specjalną składnię: */
			@global {
				body { color: green }
			}
			</style>
			<p>Tekst tego <em>akapitu</em> powinien być czerwony ("red").</p>
		</div>
		<p>Tekst tego akapitu powinien być zielony ("green").</p>
	</body>
</html>

seamless, srcdoc

Atrybut logiczny (wstawiany bez wartości) seamless pozwala wyświetlić ramkę lokalną na stronie, tak jakby była integralną częścią dokumentu, tzn. bez suwaków ani obramowania, o wymiarach automatycznie dopasowanych do jej zawartości.

Dzięki atrybutowi srcdoc="..." do ramki lokalnej nie musimy wczytywać osobnego pliku HTML, ale możemy wprost podać kod HTML, który się w niej wyświetli.

Zastosowanie: IFRAME.

Przykład:

<iframe seamless srcdoc="<a href=&quot;index.html&quot;>Strona główna</a>"></iframe>

sizes

Podpowiada przeglądarce wymiary ikony strony, tak aby mogła zostać pobrana najbardziej odpowiednia do wyświetlenia w interfejsie użytkownika.

Zastosowanie: LINK.

<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
<link rel="icon" href="icon.png" type="image/png" sizes="32x32">

translate, spellcheck

W sieci pojawiły się specjalne programy, służące do automatycznego tłumaczenia stron obcojęzycznych na język rodzimy użytkownika. Jednak nie każdy fragment tekstu powinien być tłumaczony. Na przykład kod programu, zawierający instrukcję w języku angielskim, powinien zostać nietknięty przez aplikację tłumaczącą. Aby zabronić tłumaczenia tekstu, należy do elementu, który go obejmuje, przypisać atrybut translate="false".

Podobnie popularne przeglądarki mają wbudowaną funkcję automatycznego sprawdzania pisowni tekstu, wpisywanego przez użytkownika w obszarze tekstowym. Aby zablokować tę funkcję, należy do elementu przypisać atrybut spellcheck="false".

type, label, contextmenu

Atrybut type="..." pozwala przekształcić menu w element interfejsu użytkownika:

context
Menu kontekstowe - może być otwierane np. prawym przyciskiem myszy
toolbar
Pasek narzędzi

Atrybut label="..." nadaje etykietę, która może być przydatna, kiedy menu główne zawiera w sobie podmenu.

Zastosowanie: MENU.

Aby przypisać menu kontekstowe do dowolnego elementu na stronie, należy nadać mu atrybut contextmenu="..." o wartości identycznej, jak identyfikator wybranego menu (podany atrybutem id="...").

Przykład:

Pasek narzędzi:

<menu type="toolbar">
	<li>
		<menu label="Plik">
			<button type="button" onclick="fnew()">Nowy...</button>
			<button type="button" onclick="fopen()">Otwórz...</button>
			<button type="button" onclick="fsave()">Zapisz</button>
			<button type="button" onclick="fsaveas()">Zapisz jako...</button>
		</menu>
	</li>
	<li>
		<menu label="Edycja">
			<button type="button" onclick="ecopy()">Kopiuj</button>
			<button type="button" onclick="ecut()">Wytnij</button>
			<button type="button" onclick="epaste()">Wklej</button>
		</menu>
	</li>
	<li>
		<menu label="Pomoc">
			<li><a href="help.html">Pomoc</a></li>
			<li><a href="about.html">O programie</a></li>
		</menu>
	</li>
</menu>

Poniższy formularz zawiera pole tekstowe, w którym użytkownik powinien wpisać nazwę dowolnego owocu. Może jednak kliknąć na polu prawym przyciskiem myszy - albo wywołać menu kontekstowe we właściwy dla swojego systemu operacyjnego sposób - i wybrać jedną z proponowanych opcji.

<form action="?" name="formularz">
	<label>Podaj owoc: <input type="text" name="owoc" contextmenu="owoce"></label>
	<menu type="context" id="owoce">
		<command label="jabłko" onclick="document.forms.formularz.elements.owoc.value = 'jabłko'">
		<command label="gruszka" onclick="document.forms.formularz.elements.owoc.value = 'gruszka'">
		<command label="banan" onclick="document.forms.formularz.elements.owoc.value = 'banan'">
	</menu>
</form>

typemustmatch

Atrybut logiczny, który wskazuje, że typ zawartości zasobu podanego w atrybucie data="..." musi być taki sam, jak wartość określona atrybutem type="...". Pozwala to zabezpieczyć się przed błędami lub próbami ataków przy wczytywaniu zasobów z zewnętrznych serwerów.

Zastosowanie: OBJECT.

width, height

Ustala odpowiednio: szerokość i wysokość obrazkowego przycisku wysyłania formularza <input type="image">.

Zastosowanie: INPUT.

wrap

Określa sposób zawijania tekstu wpisywanego w obszarze tekstowym formularza:

soft
Tekst nie zostanie zawinięty w chwili wysyłania formularza, choć może być w taki sposób wyświetlony na ekranie (domyślnie).
hard
W momencie wysłania formularza, przeglądarka automatycznie zawinie tekst wpisany w polu, tzn. doda do niego znaki nowej linii, tak aby wyglądał jak na ekranie przed wysłaniem.

Zastosowanie: TEXTAREA.

Zmienione elementy i atrybuty HTML5

Zmienione elementy

A
Jeżeli sam nie zawiera się w elemencie wyświetlanym w linii, może obejmować sobą również elementy blokowe z wyjątkiem interaktywnych: A, BUTTON, DETAILS, EMBED, IFRAME, KEYGEN, LABEL, SELECT, TEXTAREA, AUDIO (z atrybutem controls), IMG (z atrybutem usemap="..."), INPUT (z atrybutem type="..." innym niż "hidden"), MENU (z atrybutem type="toolbar"), OBJECT (z atrybutem usemap="..."), VIDEO (z atrybutem controls).
Szczególnego podkreślenia wymaga, że jest to niezwykle pomocna zmiana. Dzięki niej, mając np. listę artykułów z tytułami, skróconymi wprowadzeniami i zdjęciem, nie trzeba już wstawiać trzy razy tego samego linku przy każdym artykule, aby osobno objąć zawartość każdego z tych elementów. HTML5 pozwala objąć jednym znacznikiem odnośnika wszystkie te elementy jednocześnie - nawet jeśli część z nich jest wyświetlana w bloku.
ADDRESS
Odnosi się do najbliższego elementu ARTICLE lub BODY, w którym został wstawiony.
Może zawierać również elementy blokowe z wyjątkiem: nagłówków (H1, H2, H3, H4, H5, H6), sekcji (ARTICLE, ASIDE, NAV, SECTION), HEADER, FOOTER, ADDRESS.
B
Tekst na który należy zwrócić uwagę z powodów czysto użytkowych. Nie nadaje dodatkowej ważności treści ani nie stawia akcentu wypowiedzi. Przydatne przy oznaczaniu słów kluczowych w tekście albo wprowadzenia na początku artykułu.
CAPTION
Może zawierać również elementy blokowe z wyjątkiem TABLE.
CITE
Oznacza wyłącznie tytuły prac (książek, opracowań, wierszy, piosenek, filmów, gier, obrazów itp.), a nie ich autorów.
DL
Lista opisowa (ang. description list). Nie nadaje się teraz do oznaczania dialogów.
FIELDSET
Nie musi zawierać elementu LEGEND.
HR
Oddziela bloki tematyczne sekcji artykułu na poziomie akapitów.
I
Oznacza np. termin techniczny, idiom z innego języka albo fragment wtrąconego tekstu.
LABEL
Kliknięcie na etykietę nie musi już oznaczać automatycznego przeniesienia kursora tekstowego do skojarzonego z nią pola formularza, chyba że takie jest standardowe zachowanie systemu operacyjnego użytkownika.
MENU
Służy do budowy użytecznych pasków narzędzi oraz menu kontekstowych.
NOSCRIPT
Zostanie wyświetlony wyłącznie, jeśli przeglądarka w ogóle nie obsługuje dynamicznych skryptów, a nie kiedy nie potrafi zinterpretować języka skryptowego, określonego w poprzedzającym go znaczniku SCRIPT.
S
Oznacza treść, która nie jest dłużej trafna lub istotna, z punktu widzenia pozostałej zawartości dokumentu.
SCRIPT
Istnieje możliwość określenia dodatkowych wartości atrybutu type="..." - np.: "text/plain", "text/xml", "application/octet-stream", "application/xml". W tak oznaczonym elemencie można zapisać surowe dane dla dynamicznych skryptów używanych na stronie.
SMALL
Reprezentuje przypisy (wyjaśnienia, zastrzeżenia, ograniczenia prawne, prawa autorskie).
STRONG
Oznacza wysoką ważność, a nie mocne wyróżnienie tekstu.
TH
Może zawierać również elementy blokowe z wyjątkiem: HEADER, FOOTER, sekcji (ARTICLE, ASIDE, NAV, SECTION), nagłówków (H1, H2, H3, H4, H5, H6).
U
Nieartykułowany tekst albo oznaczenie błędu ortograficznego.
TABLE, THEAD, TBODY, TFOOT, TR, OL, UL, DL
Mogą być puste (nie zawierać żadnych elementów potomnych).

Zmienione atrybuty

accept
Dla elementów INPUT pozwala użyć ogólnych wartości: "audio/*" (dowolny plik w formacie dźwiękowym), "video/*" (dowolny plik w formacie wideo), "image/*" (dowolny plik graficzny).
accesskey
Możliwość użycia listy klawiszy rozdzielonych spacjami, z których przeglądarka może wybrać najbardziej dla niej odpowiedni.
action
Nie może zawierać pustej wartości.
border
Dla znacznika TABLE może zawierać tylko pustą wartość lub cyfrę "1".
colspan
Dla elementów TD i TH musi zawierać wartość większą od zera.
coords
Dla znacznika AREA nie może zawierać wartości procentowej, gdy shape="circle".
defer
Jasno określono, że wywoła załadowanie pliku skryptu osadzonego przy pomocy SCRIPT, kiedy kod strony zostanie w całości wczytany przez przeglądarkę.
dir
Dodano nową wartość - "auto".
enctype
Dla znacznika FORM dodano obsługę "text/plain".
href
Dla elementu LINK nie może zawierać pustej wartości.
Dla elementu BASE musi zawierać adres bezwzględny.
Dla elementu A może zawierać IRI (od zwykłego adresu URL różni się tym, że może składać się z liter spoza alfabetu łacińskiego). Wymagane jest jednak przy tym, aby dokument był zapisany przy użyciu strony kodowej UTF-8 lub UTF-16.
http-equiv
Dla elementu META nie oznacza już nagłówków HTTP serwera, ale dyrektywy przeglądarki.
id
Może zawierać dowolnie długą wartość, pod warunkiem że nie powtarza się drugi raz w tym samym dokumencie, nie jest pusta ani nie zawiera spacji.
lang
Może zawierać pustą wartość.
media
Dla znacznika LINK akceptuje zapytania mediów, a domyślnie posiada wartość "all".
onclick...
Atrybuty obsługi zdarzeń interfejsu użytkownika mogą zawierać wyłącznie kod skryptu, napisany w języku JavaScript.
start, type
Dla elementu OL nie są już zdeprecjonowane.
style
Może zawierać wyłącznie kod CSS - jako języka formatowania.
tabindex
Przyjmuje również wartości ujemne, co oznacza, że element może zostać aktywowany, ale nie za pomocą klawisza tabulatora.
target
Dla znaczników A i AREA nie jest już zdeprecjonowany. Może być przydatny w połączeniu z IFRAME.
type
Nie jest już konieczny dla elementów SCRIPT ani STYLE, o ile językiem skryptowym jest JavaScript, a językiem formatowania - odpowiednio CSS.
usemap
Dla znacznika IMG nie może już zawierać adresu URL, ale odniesienie do identyfikatora, rozpoczynające się znakiem krzyżyka ("#").
value
Dla elementu LI nie jest już zdeprecjonowany.
width, height
Dla znaczników IMG, IFRAME, OBJECT nie mogą zawierać wartości procentowych. Nie mogą również zostać użyte do spłaszczenia ani rozciągnięcia elementów niezgodnie z ich oryginalnymi proporcjami.

Odradzane atrybuty

border
Jeśli jest podany dla znacznika IMG, musi zawierać wartość "0" (zero). W zamian lepiej używać CSS.
language
Jeśli jest podany dla znacznika SCRIPT, musi zawierać wartość "JavaScript" (wielkość liter w zapisie nie ma znaczenia). Nie może kolidować z wartością type="...". Najlepiej w ogóle pominąć atrybut language="...", ponieważ nie ma on żadnej użytecznej funkcji.
name
Zamiast niego dla elementu A lepiej używać atrybutu id="...".

Przestarzałe elementy i atrybuty HTML5

Choć formalnie przestarzałe elementy ani atrybuty nie wchodzą w skład specyfikacji HTML5, to przeglądarki nadal powinny je obsługiwać. Jednak nie należy ich już używać w tworzonych nowych dokumentach.

Przestarzałe elementy

Znaczniki formatujące

Ich funkcję przejęły style CSS.

Znaczniki pogarszające dostępność

Znaczniki rzadko używane

Rodziły niejasności co do ich pierwotnego przeznaczenia. Ich funkcje z powodzeniem mogą przejąć inne elementy.

  • abbr - dla oznaczania wszystkich skrótów powinien być używany znacznik ABBR
  • APPLET - w zamian należy używać znacznika OBJECT
  • ISINDEX - może zostać zastąpiony przez kontrolki formularzy
  • DIR - w zamian należy używać znacznika UL

Przestarzałe znaczniki XHTML5

  • NOSCRIPT - nie może być używany w języku XHTML5 w przypadku serwowania dokumentu z typem MIME "application/xhtml+xml"; element został wycofany w składni XML, ponieważ parser HTML odczytuje go jako czysty tekst (inaczej do dokumentu załadowałyby się np. objęte nim arkusze CSS, nawet jeżeli przeglądarka obsługuje skrypty), co nie jest możliwe w języku XML

Przestarzałe atrybuty

przestarzałe atrybutydla elementów
rev, charsetLINK, A
shape, coordsA
longdescIMG, IFRAME
targetLINK
nohrefAREA
profileHEAD
versionHTML
nameIMG
schemeMETA
archive, classid, codebase, codetype, declare, standbyOBJECT
valuetype, typePARAM
axis, abbrTD, TH
scopeTD
summaryTABLE
Atrybuty formatujące
przestarzałe atrybutydla elementów
alignCAPTION, IFRAME, IMG, INPUT, OBJECT, LEGEND, TABLE, HR, DIV, H1, H2, H3, H4, H5, H6, P, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
alink, link, text, vlinkBODY
backgroundBODY
bgcolorTABLE, TR, TD, TH, BODY
borderOBJECT
cellpadding, cellspacingTABLE
char, charoffCOL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
clearBR
compactDL, MENU, OL, UL
frameTABLE
frameborderTABLE
heightTD, TH
hspace, vspaceIMG, OBJECT
marginheight, marginwidthIFRAME
noshadeHR
nowrapTD, TH
rulesTABLE
scrollingIFRAME
sizeHR
typeLI, UL
valignCOL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
widthHR, TABLE, TD, TH, COL, COLGROUP, PRE

SECTION

<section>...</section>

Sekcja dokumentu lub aplikacji to tematyczna grupa treści, zwykle zawierająca nagłówek. Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. Treść sekcji może być dodatkowo podzielona na podsekcje - poprzez umieszczenie w elementach głównych sekcji dodatkowych znaczników SECTION. W takim przypadku mamy do czynienia z podrozdziałami. Nie ma żadnego ograniczenia co do liczby możliwych zagnieżdżeń podsekcji (w HTML 4.01 takim ograniczeniem był maksymalny poziom nagłówków tytułowych - H6).

Podział treści na sekcje jest niezwykle przydatny czytelnikowi. Akapity w obszernym tekście ułatwiają odbiór treści. Łatwiej jest oderwać na chwilę wzrok, po przeczytaniu całego akapitu, a potem szybko odnaleźć miejsce, gdzie skończyliśmy czytać. Przede wszystkim jednak każdy akapit zawiera tekst o nieco innej tematyce niż poprzedni. Natomiast sekcje składają się zwykle z akapitów, ale zawierają treść, której tematyka różni się dużo bardziej od poprzedniej sekcji niż tekst w kolejnych akapitach. Dodatkowo sekcje umożliwiają hierarchiczny podział treści w postaci rozdziałów, podrozdziałów itd. Koniec rozdziału (sekcji) książki jest dobrym miejsce na zakończenie czytania na dziś i powrócenie do niego następnego dnia.

Dobrym wyznacznikiem, gdzie powinno się wstawić znacznik sekcji, jest zadanie sobie pytania, czy do tego fragmentu strony potencjalnie ktoś chciałby wstawić odsyłacz do etykiety. Dlatego takie sekcje dobrze jest dodatkowo opatrzyć identyfikatorem, do którego będzie się można potem odnosić:

<section id="moja-sekcja">
	<h1>Moja sekcja</h1>
	...
</section>

(...)

Przejdź do: <a href="#moja-sekcja">Moja sekcja</a>

Sekcja nie powinna być używana jako ogólny pojemnik na elementy. Jeżeli istnieje potrzeba, aby zmienić wygląd kilku następujących po sobie elementów, należy do tego użyć znacznika DIV, który w odróżnieniu od SECTION, nie niesie ze sobą żadnego znaczenia semantycznego. W takim przypadku nadużywanie sekcji nie jest poprawne, gdyż zaburza strukturę automatycznego spisu treści dokumentu (zobacz: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). Ponadto znacznik SECTION został przeznaczony do tworzenia ogólnych sekcji dokumentu. Lepiej jest używać znaczników, które jak najbardziej szczegółowo opisują znaczenie treści. Dlatego jeżeli to tylko możliwe, zamiast SECTION należy używać znacznika ARTICLE.

Przykład:

Poniższy przykład może być częścią większego artykułu, opisującego komputery:

<section>
	<h2>Komputer stacjonarny</h2>
	<p>Najlepszy wybór dla osób, które korzystają z komputera w jednym miejscu. Wymaga stabilnego biurka i wolnej przestrzeni. W zamian oferuje bardzo dobre osiągi sprzętowe i ergonomiczną pracę.</p>
</section>
<section>
	<h2>Laptop</h2>
	<p>Zwany również notebookiem. Przydatny dla osób, które komputera używają głównie do pisania, a przy tym czasami pracują w różnych miejscach albo nie mają zbyt dużo wolnego miejsca w pomieszczeniu. Zapewnia przyzwoite osiągi sprzętowe.</p>
</section>

Tak przedstawione bloki tekstu są raczej zbyt obszerne, aby wstawić je w formie listy opisowej. Opisują nie tylko definicję terminów, ale również typowe sposoby użytkowania oraz główne zalety.
Z drugiej strony opisy są raczej za mało kompletne, aby zamiast znaczników SECTION użyć ARTICLE. Tak wyrwane z kontekstu sekcje, samodzielnie nie stanowiłyby raczej zbyt wartościowej treści.
Widzimy jednak, że bez wątpienia przykład ten grupuje tematycznie odmienne bloki tekstu, które przy tym zawierają nawet jawne nagłówki. Dlatego użycie tutaj znacznika DIV nie byłoby prawidłowe.

ARTICLE

<article>...</article>

Artykuł reprezentuje samodzielną część dokumentu lub aplikacji, która potencjalnie mogłaby być opublikowana niezależnie od pozostałej treści na stronie (np. w kanale RSS). Może to być np.: wiadomość wysłana na forum dyskusyjnym, wpis na blogu, komentarz użytkownika pod artykułem, interaktywny widget. W pojedynczym dokumencie może być więcej niż jeden element ARTICLE. Znaczniki te można również zagnieżdżać (umieszczać jeden w drugim). W takim przypadku oznacza to, że tematyka treści elementów podrzędnych (wewnętrznych) jest w istotny sposób powiązana z treścią, którą obejmuje znacznik nadrzędny (zewnętrzny). Na przykład nadrzędnym artykułem może być wpis na blogu, a podrzędnymi - komentarze użytkowników.

Artykuł może również zawierać wewnętrzne sekcje i tak jak one powinien mieć na początku określony nagłówek (zobacz również: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). Jeśli nie jesteśmy pewni, czy na stronie powinniśmy wstawić znacznik ARTICLE czy SECTION, trzeba sobie odpowiedzieć na pytanie, czy ta część treści nie utraci swojego pierwotnego sensu, jeśli wyrwiemy ją z kontekstu pozostałego tekstu na stronie oraz czy samodzielnie byłaby wystarczająco wartościowa dla czytelnika. Jeżeli tak, to raczej powinniśmy wykorzystać znacznik ARTICLE. Na użycie tego elementu może wskazywać również sytuacja, kiedy objętą nim część dokumentu moglibyśmy swobodnie opublikować w swoim kanale RSS (nawet jeśli formalnie tego nie robimy).

Element ARTICLE nie nadaje się do oznaczania informacji o autorstwie artykułu. Takie dane powinny być objęte znacznikiem ADDRESS (o ile zawierają informacje kontaktowe) i najczęściej wstawione w stopce artykułu (element FOOTER).

Przykład:

Najlepszym sposobem oznaczenia w HTML5 wpisu na blogu wraz z komentarzami użytkowników, mogłoby być:

<article>
	<h1>Mój pierwszy wpis na blogu</h1>
	<p>Stało się. Postanowiłem założyć własnego bloga. Nie wiem, czy będę miał czas, aby regularnie go aktualizować, ale zrobię co w mojej mocy.</p>
	<section>
		<h2>Komentarze</h2>
		<article>
			<p>Życzę powodzenia.</p>
		</article>
		<article>
			<p>Nareszcie. Bardzo się cieszę.</p>
		</article>
	</section>
</article>

Wpis na blogu jak najbardziej mógłby być opublikowany w kanale RSS serwisu. Dlatego został oznaczony elementem ARTICLE. Również każdy pojedynczy komentarz użytkowników, dodany pod tym postem, nadaje się do kanału RSS (być może innego niż sam artykuł).
Natomiast cała lista komentarzy nie pasuje do ewentualnego kanału RSS, ponieważ taki kanał sam stanowi już listę. Z drugiej strony widzimy, że grupuje ona na stronie ewidentnie powiązane ze sobą tematycznie elementy - komentarze do tego samego wpisu na blogu. Dlatego właśnie została ona oznaczona znacznikiem SECTION, a nie ARTICLE ani tym bardziej DIV.

ASIDE

<aside>...</aside>

Wstawka reprezentuje sekcję na stronie, która jest tylko nieznacznie powiązana tematycznie z treścią elementu, w którym się znajduje. Jednocześnie gdybyśmy usunęli taką sekcję z dokumentu, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Typowe przeznaczenie: cytaty umieszczone w treści artykułu w postaci osobno wyróżnionych bloków, bannery reklamowe, grupy linków nawigacyjnych.

Element ten nie nadaje się do oznaczania uwag na marginesie. Co prawda bez nich sam artykuł nie utraci swojego sensu, ale uwagi takie tracą sens, gdy zostaną wyrwane z kontekstu.

Przykład:

W artykule na temat komputerów możemy umieścić wstawkę dotyczącą np. laptopów. Bez tego dodatku kompletność artykułu nie ucierpi, a jednocześnie sama wstawka może być rozpatrywana zupełnie oddzielnie - w szczególności wstawiona do innego artykułu.

<article>
	<h1>Komputery</h1>
	<p>W dzisiejszych czasach komputery towarzyszą człowiekowi na każdym kroku. Używamy ich w codziennej pracy, jak również szukając odprężenia po trudnym dniu. Sterują zarówno naszymi samochodami, jak i statkami kosmicznymi.</p>
	<aside>
		<h1>Laptop</h1>
		<p>Ten przenośny rodzaj komputera, ze względu na liczne zalety, szybko przyjął się wśród użytkowników.</p>
	</aside>
<article>

Należy tutaj podkreślić, że powyższy artykuł nie opisuje rodzajów komputerów, a jedynie podaje informacje ogólnie o tym urządzeniu elektronicznym. Dlatego wstawka o laptopach jest tutaj jak najbardziej uprawniona. W przeciwnym razie zamiast znacznika ASIDE prawdopodobnie lepszym pomysłem byłoby użycie SECTION.

Przykład dodania do artykułu wstawki z dodatkowym cytatem:

<article>
	<h1>Szczególna teoria względności</h1>
	<p>Ta teoria fizyczna, stworzona w 1905 roku, zrewolucjonizowała sposób pojmowania otaczającej nas rzeczywistości. Zgodnie z nią czas nie musi płynąć liniowo, ale zależy od względnej prędkości obserwatora. Twórcą teorii względności jest Albert Einstein.</p>
	<aside>
		<q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota, chociaż co do pierwszego nie mam pewności.</q>
	</aside>
	<p>Albert Einstein był jednym z najwybitniejszych fizyków-teoretyków. Laureat nagrody Nobla.</p>
</article>

Warto zwrócić uwagę, że gdyby treść artykułu była sformułowana w inny sposób, usunięcie z niej cytatu mogłoby nie być możliwe bez utraty wewnętrznej kompletności tekstu. W takim przypadku użycie znacznika ASIDE nie byłoby właściwe:

<article>
	<h1>Szczególna teoria względności</h1>
	<p>Ta teoria fizyczna, stworzona w 1905 roku, zrewolucjonizowała sposób pojmowania otaczającej nas rzeczywistości. Zgodnie z nią czas nie musi płynąć liniowo, ale zależy od względnej prędkości obserwatora. Twórcą teorii względności jest Albert Einstein. Jedna z jego słynnych wypowiedzi brzmi:
		<q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota, chociaż co do pierwszego nie mam pewności.</q>
	</p>
	<p>Albert Einstein był jednym z najwybitniejszych fizyków-teoretyków. Laureat nagrody Nobla.</p>
</article>
<header>...</header>

Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji (H1, H2, H3, H4, H5, H6) ale nie jest to absolutnie konieczne. Może zawierać również: spis treści, formularz wyszukiwania, logo.

Sam element HEADER nie stanowi nagłówka sekcji. Może to być nieco mylące, ponieważ z kolei element FOOTER stanowi stopkę sekcji. Elementami definiującymi nagłówek sekcji są: H1, H2, H3, H4, H5, H6. W szczególności znacznik HEADER nie tworzy nowej, niejawnej sekcji w dokumencie (zobacz: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5").

Przykład:

<header>
	<p>Witam na stronie...</p>
	<h1>Kurs języka HTML</h1>
</header>

Skoro znacznik HEADER nie tworzy nowej sekcji, to dla tak przedstawionego dokumentu:

<header>
	<h1>Sekcja 1</h1>
	<p>Akapit sekcji 1</p>
	<h2>Podsekcja 1.1</h2>
</header>
<p>Akapit podsekcji 1.1</p>
<h2>Podsekcja 1.2</h2>
<p>Akapit podsekcji 1.2</p>

...automatyczny spis treści będzie wyglądał następująco:

  1. Sekcja 1
    (zawiera akapit "Akapit sekcji 1")
    1. Podsekcja 1.1
      (zawiera akapit: "Akapit podsekcji 1.1")
    2. Podsekcja 1.2
      (zawiera akapit: "Akapit podsekcji 1.2")
<footer>...</footer>

Stanowi stopkę dla zawierającego ją elementu sekcji (ARTICLE, ASIDE NAV, SECTION). Stopka przechowuje zwykle informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp.

Mimo z pozoru analogicznej znaczeniowo nazwy, element FOOTER inaczej niż HEADER stanowi stopkę sekcji, podczas gdy ten drugi nie oznacza nagłówka sekcji. Jednak znacznik FOOTER sam nie tworzy nowej, niejawnej sekcji w dokumencie.

Przykład:

<article>
	<h1>Mój artykuł</h1>
	<p>To jest mój artykuł...</p>
	<footer>
		Autor: <address>Jan Kowalski (jan.kowalski@example.com)</address>
		<p>wszelkie prawa zastrzeżone</p>
	</footer>
</article>

Warto przy okazji zauważyć, że gdyby w informacjach o autorze nie podano danych kontaktowych (tutaj adresu e-mail), nie należy używać znacznika ADDRESS.

<nav>...</nav>

Reprezentuje sekcję strony, która zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem NAV, zwykle bardziej właściwy do tego będzie element FOOTER. Raczej niewłaściwym miejscem na element NAV będą linki umieszczone w środku treści tekstowej artykułu.

Znacznik NAV może być niezwykle przydatny dla syntezatorów mowy, używanych przez osoby niewidome. Syntezator może udostępnić możliwość pominięcia linków nawigacyjnych, gdy użytkownik chce się zapoznać tylko z główną treścią dokumentu. Może też od razu udostępnić użytkownikowi główne menu nawigacyjne, bez niepotrzebnego przedzierania się przez mniej istotne treści, które w kodzie źródłowym dokumentu znajdują się przed nim.

Przykład:

Poniżej przedstawiony przykład zawiera dwie sekcje nawigacyjne: pierwsza dla całego serwisu, a druga w obrębie artykułu na stronie.

<nav>
	<ul>
	<li><a href="index.html">Strona główna</a></li>
	<li><a href="contents.html">Spis treści</a></li>
	</ul>
</nav>
<article>
	<h1>Mój artykuł</h1>
	<nav>
		<ul>
		<li><a href="#sec1">Rozdział 1</a></li>
		<li><a href="#sec2">Rozdział 2</a></li>
		</ul>
	</nav>
	<h2 id="sec1">Rozdział 1</h2>
	<p>Treść rozdział 1...</p>
	<h2 id="sec2">Rozdział 2</h2>
	<p>Treść rozdział 2...</p>
</article>

Szablon strony w HTML5

Mając do dyspozycji język HTML 4.01, jedyną możliwością zbudowania prawidłowego szkieletu strony, było wykorzystanie bloków DIV. Sekcje szkieletu zwykle były potem formatowane przy pomocy CSS, a więc takie użycie znaczników mogło być prawidłowe. Bardzo dawno temu, gdy nie było innej możliwości, używało się do tego tabel, ale takie podejście jest dziś uznawane za bardzo poważny błąd semantyczny.

W HTML5 zostały jednak wprowadzone zupełnie nowe znaczniki, dzięki którym możemy zbudować szablon strony w sposób jeszcze bardziej semantyczny. Spróbujmy to wykonać, przekształcając kod podany w rozdziale: Szablon strony na DIV-ach. W tym celu przypomnijmy sobie, że element BODY jest korzeniem sekcji (zobacz: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). Wynika z tego, że wszystkie sekcje w nim umieszczone odnoszą się tak naprawdę nie do konkretnego artykułu zamieszczonego w pojedynczym dokumencie, ale do witryny jako całości.

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>...</title>
	</head>
	<body>
		<div id="top">
			<header id="NAGLOWEK">Nagłówek szablonu</header>
			<nav id="MENU">Menu nawigacyjne</nav>
			<aside id="INFORMACJE">Dodatkowe informacje</aside>
			<article id="TRESC">Treść strony</article>
			<footer id="STOPKA">Stopka serwisu</footer>
		</div>
	</body>
</html>

Znaczenie wyróżnionych fragmentów kodu zostało objaśnione w rozdziale: Szablon strony na DIV-ach. Tam również znajdziesz praktyczne przykłady sposobów układania poszczególnych sekcji szkieletu na stronie.

Objęcie całego szkieletu elementem DIV, jest poprawne, ponieważ w tym miejscu ma on na celu przygotowanie pojemnika, koniecznego do zmiany wyglądu całej strony (przy pomocy CSS). Właśnie do tego został przeznaczony ten element. Zwykle objęcie całej zawartości ciała dokumentu znacznikiem ARTICLE, nie jest najlepszym rozwiązaniem. Został on przewidziany po to, aby zaznaczyć, że objęta nim treść może być opublikowana oddzielnie. Ale przecież tutaj nie mielibyśmy do czynienia z fragmentem dokumentu, lecz jego całością. Podobnie wstawienie w tym miejscu znacznika SECTION raczej wydaje się bezcelowe, skoro element BODY jest już korzeniem sekcji.

FIGURE

<figure>...</figure>

Załącznik definiuje samodzielną część dokumentu, do której następują odwołania z głównej treści jako do pojedynczej jednostki. Może służyć do oznaczania: ilustracji, diagramów, zdjęć, wycinków kodu źródłowego itp. W obszernych opracowaniach naukowych zwykle podaje się spis wszystkich ilustracji bądź diagramów, występujących w całej pracy.

O tym, czy dany element nadaje się do oznaczenia go jako załącznik, najlepiej zdecydować, zadając sobie pytanie: czy moglibyśmy go przenieść na inną podstronę serwisu bez utraty spójności głównego tekstu dokumentu? Bardzo podobne przeznaczenie ma element ASIDE, jednak w odróżnieniu od FIGURE, jego zawartość jest tylko nieznacznie powiązana tematycznie z główną treścią. Na dobrą sprawę taką wstawkę (ASIDE) moglibyśmy zupełnie usunąć z witryny, podczas gdy załącznik (FIGURE) możemy co najwyżej przenieść na inną podstronę, bo inaczej dokument utraciłby spójność.

Przykład:

<p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu. Na <a href="#listing1">przykładzie 1</a> możemy się przekonać, jak to zrobić.</p>
<figure id="listing1">
	<pre><code>
		&lt;meta charset="UTF-8"&gt;
	</code></pre>
</figure>
<p>Krótszą formę ma również deklaracja typu dokumentu.</p>

Warto zwrócić uwagę, że gdyby tekst akapitu był sformułowany w inny sposób, użycie znacznika FIGURE mogłoby być raczej niewłaściwe:

<p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu. Aby to zrobić, wystarczy posłużyć się następującym kodem źródłowym:</p>
<pre><code>
	&lt;meta charset="UTF-8"&gt;
</code></pre>
<p>Krótszą formę ma również deklaracja typu dokumentu.</p>

Gdybyśmy w tym przypadku usunęli fragment przykładowego kodu źródłowego, tekst utraciłby spójność.

FIGCAPTION

<figure>
	<figcaption>...</figcaption>
</figure>

Dodaje podpis do załącznika. Może on być umieszczony na początku albo na końcu zawartości. Tego typu podpisy są powszechne np. w różnego rodzaju opracowaniach naukowych, gdzie każda ilustracja bądź wykres są zatytułowane i zwykle oznaczone kolejnym numerem. W takiej pracy można często znaleźć spis wszystkich tego typu załączników. Znajdują się w nim właśnie załączone wcześniej podpisy.

Przykład:

<figure>
	<img src="42.jpg" alt="Liczba 42">
	<figcaption>Sens życia, wszechświata i w ogóle ;-)</figcaption>
</figure>
<figure id="listing1">
	<figcaption>Przykład 1. Deklaracja strony kodowej w HTML5</figcaption>
	<pre><code>
		&lt;meta charset="UTF-8"&gt;
	</code></pre>
</figure>

MAIN

<main>...</main>

Strony internetowe nie są zwyczajnymi dokumentami elektronicznymi. Z racji na naturę hipertekstu w każdym serwisie WWW możemy wyznaczyć menu nawigacyjne, nagłówek witryny zwykle z osadzonym logo, stopkę zawierającą np. informacje o prawach autorskich. Wszystkie te elementy niezwykle ułatwiają przeglądanie witryny. Jednak użytkownicy odwiedzają stronę przede wszystkim nie po to, żeby oglądać menu czy logo. Głównym celem jest dotarcie do treści, która jest zawarta w serwisie. Taka treść może ginąć w natłoku wszystkich elementów pomocniczych witryny. Zwłaszcza wyszukiwarki i czytniki ekranowe mogą mieć problemy z prawidłowym wyznaczeniem tej części dokumentu HTML, która zawiera główną treść, ze względu na którą użytkownik zdecydował się odwiedzić serwis.

Właśnie w tym celu został stworzony element MAIN. Powinniśmy nim oznaczyć główną treść każdego dokumentu. Zwykle można ją rozpoznać po tym, że jest bezpośrednio związana z tytułem strony. Znacznikiem MAIN nie należy obejmować żadnych stałych elementów, które powtarzają się w całym serwisie: menu nawigacyjnego, informacji o prawach autorskich, logo serwisu, bannerów, formularzy wyszukiwania itp. Znacznik ten może jednak obejmować linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach.

W pojedynczym dokumencie nie można umieścić więcej niż jednego elementu MAIN. Element ten nie może być również umieszczony wewnątrz: ARTICLE, ASIDE, FOOTER, HEADER ani NAV.

Przykład:

<!doctype html>
<html lang="pl">
	<head>
		<meta charset="utf-8">
		<title>Matrix - Serwis kinomaniaków</title>
	<head>
	<body>
		<header>
			Serwis kinomaniaków
			<nav>
				<ul>
					<li><a>Matrix</a></li>
					<li><a href="incepcja.html">Incepcja</a></li>
					<li><a href="trzynaste-pietro.html">Trzynaste piętro</a></li>
				</ul>
			</nav>
		</header>

		<main>
			<h1>Matrix</h1>

			<nav>
				<ul>
					<li><a href="#czym-jest-matrix">Czym jest Matrix?</a></li>
					<li><a href="#matrix-reaktywacja">Matrix: Reaktywacja</a></li>
					<li><a href="#matrix-rewolucje">Matrix: Rewolucje</a></li>
				</ul>
			</nav>

			<h2 id="czym-jest-matrix">Czym jest Matrix?</h2>
			<p>Pierwsza część trylogii science fiction.</p>

			<h2 id="matrix-reaktywacja">Matrix: Reaktywacja</h2>
			<p>Ciąg dalszy zmagań Neo, Trinity i Morfeusza z inteligentnymi maszynami, zagrażającymi całej ludzkości.</p>

			<h2 id="matrix-rewolucje">Matrix: Rewolucje</h2>
			<p>Neo kontra Agent Smith. Syjon - ostatnia enklawa ludzkiej cywilizacji - zagrożony zniszczeniem.</p>
		</main>

		<footer>Wszystkie prawa zastrzeżone</footer>
	</body>
</html>

MARK

<mark>...</mark>

Zaznacza lub uwydatnia tekst w jednym dokumencie, w celu odwołania się do niego w innym kontekście.

Uwydatnienia możemy użyć w przytaczanym cytacie. W ten sposób wskazujemy, że chcemy zwrócić szczególną uwagę czytelnika na oznaczony w ten sposób fragment i właśnie po to przytaczamy cały cytat. Mogą to być np. fragmenty cytatu, z którymi się nie zgadzamy i dalej w artykule przedstawiamy nasze własne argumenty. Może to być również fragment, który jest dla nas szczególnie wartościowy lub naszym zdaniem zawiera główne przesłanie całego cytatu.

Uwydatniając tekst na stronie, który nie jest cytatem, możemy przekazać użytkownikowi, że taki fragment może być dla niego szczególnie przydatny, biorąc pod uwagę czynności, które właśnie podjął. Na przykład jeżeli użytkownik właśnie użył wyszukiwarki w serwisie, w wynikach wyszukiwania możemy uwydatnić słowa, których szukał.

Należy wyraźnie odróżnić znaczenie uwydatnienia realizowanego przez znacznik MARK od EM i STRONG. Element MARK uwydatnia tekst tylko w określonym kontekście (w innym może już nie być zaznaczony). Natomiast znacznik EM (podkreślenie akcentu) oraz STRONG (wysoka ważność) oznaczają tekst tak samo w każdym kontekście.

Przykład:

<blockquote>
	<p><mark>Litwo</mark>! Ojczyzno moja! ty jesteś jak zdrowie.<br>
	Ile cię trzeba cenić, ten tylko się dowie,<br>
	Kto cię stracił. Dziś piękność twą w całej ozdobie<br>
	Widzę i opisuję, bo tęsknię po tobie.</p>
</blockquote>
<p>Adam Mickiewicz, choć pisze o Litwie, tak naprawdę ma na myśli Polskę. W ten sposób chciał ominąć ówcześnie działającą cenzurę.</p>

Tak mogłyby wyglądać wyniki wyszukiwania słowa HTML:

<article>
	<h1>Kurs <mark>HTML</mark> - strona WWW za darmo</h1>
	<p>Kurs <mark>HTML</mark>, kurs XHTML i kurs CSS dla zupełnie początkujących i dla zaawansowanych. Napisz własną stronę WWW nawet w ciągu jednego dnia i wprowadź ją do Internetu za darmo.</p>
</article>

TIME

<time>data/czas</time>
<time datetime="data/czas">...</time>
"data/czas" są zapisane w formacie zdefiniowanym standardem ISO8601.

Na stronach internetowych bardzo często spotyka się różnorodne daty czy oznaczenia czasu: publikacja artykułu, wysłanie komentarza, zaplanowane wydarzenia i ich godzinowy rozkład dnia. Takie dane mogłyby zostać wykorzystane np. do automatycznego tworzenia kalendarzy. Problem w tym, że zwykle są one podane w postaci czytelnej dla użytkowników, a nie dla maszyn. Trudno się spodziewać, że automat będzie w stanie poprawnie zinterpretować tekstową nazwę miesiąca w każdym języku mówionym świata. Poza tym w różnych krajach istnieją odmienne konwencje zapisu kolejności poszczególnych części daty (może to być najpierw dzień, a na końcu rok lub na odwrót), a także separatorów poszczególnych członów daty.

Aby przekazać wszelkim automatom, że wybrany tekst na stronie jest datą lub/i czasem, wystarczy oznaczyć go za pomocą znacznika TIME. Trzeba jednak pamiętać, że w przypadku prostego oznaczenia <time>...</time> zawartość znacznika musi być zapisana w standardowym formacie, bo inaczej nie będzie mogła być poprawnie zinterpretowana. Natomiast jeżeli chcemy użytkownikom prezentować datę w przyjazny dla nich sposób (np. z tekstową nazwą miesiąca), to tę samą datę ale już w formacie ustandaryzowanym należy podać w atrybucie datetime="...".

Przykład:

<time datetime="1980-01-01 09:00">1 stycznia 1980, godz. 9.00</time>

Format daty i czasu

miesiąc
2011-11
data
2011-11-12
11-12 (każdy 12 listopada)
czas
14:54
14:54:39
14:54:39.92922
data i czas lokalny
2011-11-12T14:54
2011-11-12T14:54:39
2011-11-12T14:54:39.92922
2011-11-12 14:54
2011-11-12 14:54:39
2011-11-12 14:54:39.92922
strefa czasowa
Z, +0000, +00:00 (czas UTC)
+0100, +01:00 (czas zimowy w Polsce)
+0200, +02:00 (czas letni w Polsce)
-0800, -08:00
data i czas ze strefą czasową
2011-11-12T14:54Z
2011-11-12T14:54:39Z
2011-11-12T14:54:39.92922Z
2011-11-12T14:54+0000
2011-11-12T14:54:39+0000
2011-11-12T14:54:39.92922+0000
2011-11-12T14:54+00:00
2011-11-12T14:54:39+00:00
2011-11-12T14:54:39.92922+00:00
2011-11-12T06:54-0800
2011-11-12T06:54:39-0800
2011-11-12T06:54:39.92922-0800
2011-11-12T06:54-08:00
2011-11-12T06:54:39-08:00
2011-11-12T06:54:39.92922-08:00
2011-11-12 14:54Z
2011-11-12 14:54:39Z
2011-11-12 14:54:39.92922Z
2011-11-12 14:54+0000
2011-11-12 14:54:39+0000
2011-11-12 14:54:39.92922+0000
2011-11-12 14:54+00:00
2011-11-12 14:54:39+00:00
2011-11-12 14:54:39.92922+00:00
2011-11-12 06:54-0800
2011-11-12 06:54:39-0800
2011-11-12 06:54:39.92922-0800
2011-11-12 06:54-08:00
2011-11-12 06:54:39-08:00
2011-11-12 06:54:39.92922-08:00
tydzień
2011-W46 (46-ty tydzień 2011 roku)
rok
2011
czas trwania
PT4H18M3S (4 godziny 18 minut 3 sekundy)
4h 18m 3s

WBR

<wbr>

Normalnie przeglądarki zawijają długie linijki tekstu, jeśli nie mieszczą się w szerokości okna. Jednak w niektórych warunkach przełamanie tekstu może nie być możliwe. Wtedy najczęściej pojawi się poziomy suwak do przewijania strony. Z takim przypadkiem możemy mieć do czynienia wewnątrz znacznika PRE, gdy zablokujemy zawijanie tekstu przy pomocy CSS albo gdy w długiej linijce nie umieścimy żadnego białego znaku (np. spacji) ani innego, po którym normalnie może nastąpić przełamanie wiersza. Znacznik WBR daje przeglądarce możliwość przełamania wiersza w tym miejscu, jeśli tekst nie zmieści się w założonej szerokość. Od znacznika BR różni się tym, że nie wymusza przełamania wiersza, jeśli nie ma takiej potrzeby.

Po co zatem w ogóle blokować zawijanie linijek, żeby potem to odblokowywać za pomocą elementu WBR? W tradycyjnym akapicie tekstu nie mamy żadnej kontroli, w jaki sposób przeglądarka zawinie tekst na ekranie. Najczęściej taki algorytm w zupełności nam odpowiada. Czasem jednak, w przypadku bardzo specyficznych tekstów (np. fragmentów kodu źródłowego), to my chcemy zdecydować, w jaki sposób zostanie zawinięty tekst. Moglibyśmy oczywiście zamiast WBR użyć BR, ale wtedy znowu być może przełamiemy linię za wcześnie - np. gdy użytkownik posiada monitor panoramiczny, na którym zmieściłoby się znacznie więcej treści w poziomie. W takich przypadkach korzystne może być użycie znacznika PRE w połączeniu z elementami WBR.

Przykład:

<pre>
	&lt;!doctype html&gt;
	&lt;html&gt;
	&lt;head&gt;<wbr>&lt;title&gt;...&lt;/title&gt;<wbr>&lt;/head&gt;
	&lt;body&gt;<wbr>...<wbr>&lt;/body&gt;
	&lt;/html&gt;	
</pre>
<p>Popsuła<wbr>mi<wbr>się<wbr>spacja</p>

DATALIST

(interpretuje: Internet Explorer 10, Firefox, Opera, Chrome)

<input list="identyfikator">
<datalist id="identyfikator">
	<option value="wartość1">
	<option value="wartość2">
	...
</datalist>

Większość przeglądarek posiada funkcję tzw. autouzupełniania elementów formularzy. Jeżeli użytkownik wpisze coś w formularzu, a potem go wyśle, to kiedy będzie następnym razem wypełniał ten sam formularz, przeglądarka wyświetli mu podpowiedzi w postaci wartości, które wcześniej wpisywał w wybranych polach. Taki mechanizm jest bardzo wygodny, ponieważ pozwala zaoszczędzić użytkownikowi sporo czasu na wprowadzaniu wciąż tych samych danych. Twórcy stron WWW również mogą wykorzystać ten system, dodając do automatycznych sugestii własne wartości. W ten sposób nawet jeżeli użytkownik dopiero pierwszy raz wypełnia formularz, od razu zobaczy właściwe podpowiedzi wartości, które może wpisać w określonych polach.

Listę dodatkowych podpowiedzi umieszcza się w postaci opcji (OPTION), zawartych w znaczniku DATALIST, któremu nadaje się odpowiedni identyfikator. Aby podpiąć takie sugestie do wybranego pola INPUT w formularzu, wystarczy przypisać mu atrybut list="..." o wartości takiej samej, jak identyfikator wybranej listy z opcjami podpowiedzi.

Jeżeli tekst automatycznych podpowiedzi jest dość długi, możemy wyświetlić użytkownikowi jego formę skróconą, po wybraniu której do pola zostanie wstawiona oryginalna, długa wartość:

<input list="identyfikator">
<datalist id="identyfikator">
	<option value="wartość1" label="skrót1">
	<option value="wartość2" label="skrót2">
</datalist>

Element DATALIST nie wyświetla się na ekranie, dlatego nie powinien sprawiać kłopotów w przeglądarkach, które nie obsługują HTML5. Wtedy użytkownik będzie zmuszony co prawda ręcznie wpisać pełną wartość w polu, ale przynajmniej w formularzu nie pojawią się żadne nieoczekiwane elementy. Czasami jednak może nam zależeć, aby opcje podpowiedzi zostały wyświetlone w starszych przeglądarkach. Z taką sytuacją możemy mieć do czynienia, gdy w wybranym polu należy wpisać w zasadzie jedną z podanych wartości, a nie dowolny tekst. Taki efekt powinniśmy uzyskać, wstawiając dodatkowy znacznik SELECT - nowsze przeglądarki po prostu go pominą, stosując mechanizm autouzupełniania, a starsze wyświetlą standardową listę rozwijalną:

<input name="nazwa" list="identyfikator">
<datalist id="identyfikator">
	<select name="nazwa">
		<option value="wartość1" label="skrót1">
		<option value="wartość2" label="skrót2">
	</select>
</datalist>

Przykład:

Zobacz przykład: DATALIST

PROGRESS

(interpretuje: Internet Explorer 10, Firefox, Opera, Chrome)

  • Nieokreślony stopień ukończenia:
    <progress>alternatywa</progress>
  • Pasek postępu:
    <progress value="współczynnik">alternatywa</progress>
    <progress value="wartość" max="maksimum">alternatywa</progress>
alternatywa
Alternatywna zawartość, wyświetlana w przeglądarkach, które nie obsługują HTML5. Powinno się tam umieścić np. tekst "Proszę czekać..." albo "Ukończono: 50%".
współczynnik
Wartość z przedziału od 0.0 (stopień postępu 0%) do 1.0 (100%).
wartość
Liczba z przedziału od 0 (zero) do maksimum.
maksimum
Maksymalna wartość, po osiągnięciu której zadanie uważa się za ukończone (100%).

Pozwala wstawić na stronie standardowy pasek postępu, który przedstawia stopień ukończenia jakiegoś zadania. Umożliwia również wskazanie nieokreślonego stopienia postępu - gdy bardziej czasochłonne zadanie jest w trakcie wykonywania, lecz nie wiadomo, kiedy zostanie ukończone. W takim przypadku przeglądarki mogą wyświetlić na ekranie specjalny animowany pasek postępu, którego pozycja będzie np. przechodzić w kółko z jego lewej na prawą stronę.

Przykład:

Zobacz przykład: PROGRESS

METER

(interpretuje: Firefox, Opera, Chrome)

  • Pasek wyniku:
    <meter value="współczynnik">alternatywa</meter>
  • Minimum i maksimum:
    <meter value="wartość" min="minimum" max="maksimum">alternatywa</meter>
  • Przedziały wartości:
    <meter value="współczynnik" low="niski" high="wysoki">alternatywa</meter>
    <meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka">alternatywa</meter>
  • Wartość optymalna:
    <meter value="współczynnik" low="niski" high="wysoki" optimum="optymalny">alternatywa</meter>
    <meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka" optimum="optymalna">alternatywa</meter>
alternatywa
Alternatywna zawartość, wyświetlana w przeglądarkach, które nie obsługują HTML5. Powinno się tam umieścić np. zapisaną tekstowo wartość, którą przedstawia pasek wyniku.
współczynnik
Wartość z przedziału od 0.0 (0%) do 1.0 (100%).
wartość
Liczba z przedziału od minimum do maskimum.
minimum, maksimum
Przedział dopuszczalnych wartości jakie może osiągnąć wynik.
niski, wysoki, optymalny
Liczby z przedziału od 0.0 do 1.0 (niskiwysoki), które określają, jaka wartość współczynnika jest uznawana odpowiednio za: niską, wysoką, optymalną.
niska, wysoka, optymalna
Liczby z przedziału od minimum do maksimum (niskawysoka), które określają, jaka wartość jest uznawana odpowiednio za: niską, wysoką, optymalną.

Wygląd paska wyniku jest podobny do paska postępu (PROGRESS). Jednak w odróżnieniu od niego przedstawia określoną wartość (np. stopień zapełniania dysku albo liczbę głosów oddanych na określoną opcję w ankiecie), podczas gdy pasek postępu jest przeznaczony wyłącznie do określania stopnia ukończenia jakiegoś zadania.

Jeżeli podana wartość wyniku będzie mniejsza od wartości atrybutu low="..." albo większa niż high="...", przeglądarki mogą oznaczyć taki pasek wyniku w specjalny sposób, sygnalizując w ten sposób, że prezentowany wynik nie jest optymalny. Na przykład pasek z optymalnym wynikiem może mieć kolor zielony, a z wynikiem niskim lub wysokim - żółty.

Przykład:

Zobacz przykład: METER

DETAILS, SUMMARY

(interpretuje: Opera 15, Chrome)

  • Panel domyślnie zamknięty:
    <details>
    	<summary>nagłówek</summary>
    	...
    </details>
  • Panel domyślnie otwarty:
    <details open>
    	<summary>nagłówek</summary>
    	...
    </details>

Na stronach internetowych bardzo często spotykamy interaktywne elementy w postaci paneli, które otwierają się po kliknięciu w ich nagłówek myszką. Tego typu rozwiązanie jest szczególnie przydatne na stronach, zawierających dużo informacji. Aby nie przytłoczyć użytkownika, czasami lepiej jest na początku wyświetlić mu tylko podstawowe dane, a do szczegółów dać dostęp dopiero, kiedy zyskamy jego zainteresowanie konkretnym elementem strony.

Do tej pory jedynym sposobem wstawienia takiego otwieranego panelu było użycie dynamicznych skryptów JavaScript. HTML5 pozwala to wykonać bez ich potrzeby. W stanie zamkniętym, przeglądarka zamiast treści wpisanej w znaczniku, wyświetla tylko nagłówek panelu z napisem podanym przez nas za pomocą elementu SUMMARY. Co ciekawe, możliwe jest nawet użycie CSS, tak aby otwarty panel prezentował się wizualnie inaczej niż zamknięty - np. można dodać do niego czerwoną ramkę:

details[open] {
	border: 1px solid red;
}

Przykład:

Zobacz przykład: DETAILS, SUMMARY

VIDEO, AUDIO, SOURCE

Przed pojawieniem się języka HTML5, istniały już różne sposoby osadzania treści multimedialnych audio/wideo na stronach internetowych:

Niestety miały one spore wady:

  • Większość z nich nie została wcześniej oficjalnie ustandaryzowana, dlatego były interpretowane odmienne lub w ogóle nieobsługiwane w niektórych przeglądarkach.
  • Nie istniało standardowe API, dzięki któremu można by w prosty sposób wstawić na stronie odtwarzacz z własną skórką, realizować dynamiczne listy odtwarzania itp.
  • Wymagały do działania zainstalowanych wtyczek (np. Adobe Flash Player), przez co czasem nadmiernie obciążały procesor, a przy tym nie były w ogóle obsługiwane przez wiele urządzeń mobilnych (smartfony, tablety). Dodatkowo wymagały od webmastera znajomości środowiska Adobe Flash (i zakup komercyjnej licencji) albo konieczności korzystania jedynie z ogólnodostępnych odtwarzaczy Flash, bez możliwości dopasowania ich do własnych potrzeb.
  • Często działały tylko w systemie operacyjnym Microsoft Windows, uniemożliwiając obejrzenie filmów czy posłuchania muzyki użytkownikom Maców i Linuksa.
  • Zdarzały się poważne trudności z ustawieniem warstw (otwierane menu, okna dialogowe) ponad oknem wyświetlanym przez wtyczkę. Często okno odtwarzania wtyczki po prostu zawsze przebijało przez taką warstwę.
  • Brakowało możliwości zmiany wyglądu przy pomocy CSS.
  • Nie było możliwe dołączenie do filmów własnych napisów.

Nic dziwnego, że w HTML5 postanowiono zmienić tę sytuację. Najpierw zdecydowano się wprowadzić do specyfikacji element EMBED, który do tej pory i tak był powszechnie używany, choć oficjalnie nie istniał. Nadal jednak nie zaleca się jego stosowania do materiałów audio/wideo:

  • Wymaga zainstalowanej na komputerze wtyczki. Nie każda przeglądarka obsługuje wszystkie rodzaje wtyczek. Nie każda wtyczka jest dostępna dla wszystkich rodzajów systemów operacyjnych. Nie każdy użytkownik wie, jak samodzielnie zainstalować wtyczkę.
  • Webmaster nadal nie dostaje standardowego API, dzięki któremu mógłby dynamicznie manipulować odtwarzanym materiałem multimedialnym.
  • Element EMBED nie posiada znacznika zamykającego, a element NOEMBED nadal nie został wprowadzony do specyfikacji. Zatem nie można zastosować żadnej automatycznej alternatywy, jeżeli przeglądarka użytkownika nie obsługuje żądanej wtyczki.
  • Tylko podstawowe atrybuty znacznika EMBED zostały opisane w specyfikacji. Pozostałe zależą od możliwości użytej wtyczki.
  • Element ten nie jest w żaden sposób zoptymalizowany do odtwarzania filmów ani muzyki.

Aby pozbyć się wszystkich wymienionych powyżej wad, HTML5 wprowadza zupełnie nowe elementy, przeznaczone specjalnie do obsługi odtwarzaczy audio/wideo.

(interpretuje: Internet Explorer 9, Firefox, Opera, Chrome)

  1. Podstawowy odtwarzacz wideo (niezalecane!):
    <video src="lokalizacja pliku">Treść alternatywna</video>
  2. Podstawowy odtwarzacz audio (niezalecane!):
    <audio src="lokalizacja pliku">Treść alternatywna</audio>
  3. Odtwarzacz wielu formatów wideo:
    <video>
    	<source src="lokalizacja pliku w formacie 1" type='format 1'>
    	<source src="lokalizacja pliku w formacie 2" type='format 2'>
    	(...)
    	Treść alternatywna
    </video>
  4. Odtwarzacz wielu formatów audio:
    <audio>
    	<source src="lokalizacja pliku w formacie 1" type='format 1'>
    	<source src="lokalizacja pliku w formacie 2" type='format 2'>
    	(...)
    	Treść alternatywna
    </audio>
gdzie:
lokalizacja pliku
Lokalizacja pliku multimedialnego na dysku lub adres URL do pliku w Internecie.
Treść alternatywna
Zawartość, która zostanie wyświetlona, jeżeli przeglądarka nie obsługuje tego znacznika. Może to być np. bezpośredni link do pobrania pliku multimedialnego na swój dysk lokalny albo zbiór znaczników realizujący uniwersalny sposób odtwarzania plików w HTML 4. Należy zwrócić uwagę, że treść alternatywna nie zostanie wyświetlona, jeżeli przeglądarka obsługuje znacznik AUDIO/VIDEO, a jedynie nie rozpoznaje podanego formatu pliku audio/wideo.
lokalizacja pliku w formacie 1, lokalizacja pliku w formacie 2...
Lokalizacja tego samego filmu bądź muzyki, zapisanych przy użyciu różnych formatów. Zostanie odtworzony tylko jeden z podanych plików - pierwszy w kolejności którego format jest obsługiwany przez przeglądarkę. Sposób ten nie służy do tworzenia list odtwarzania.
format 1, format 2...
Nazwa formatu (typ MIME), w którym został zapisany plik. Szczególnie dla formatów wideo powinno się dodatkowo podać nazwę kodeków, za pomocą których został skonwertowany obraz i dźwięk.

Różnica pomiędzy odtwarzaczem wideo a audio jest tylko taka, że ten drugi nie udostępnia okna do wyświetlania obrazu. W odtwarzaczu wideo swobodnie można odgrywać również samą muzykę. Może to być przydatne np. aby wraz z dźwiękiem wyświetlić dodatkowe napisy zsynchronizowane z dźwiękiem albo statyczny obraz. Natomiast ładując film do odtwarzacza audio, możemy pominąć zapisaną w nim ścieżkę wideo - kiedy interesuje nas tylko ścieżka dźwiękowa. Jednak gdy to tylko możliwe, należy unikać tego sposobu, ponieważ mimo iż użytkownik nie widzi obrazu wideo, to jest on nadal zapisany w pliku i transmitowany przez sieć.

Pliki multimedialne często są pokaźnych rozmiarów. Przeglądarka zwykle nie potrafi odtworzyć wszystkich możliwych formatów filmów i muzyki. Dlatego właśnie mocno zalecane jest, aby korzystać tylko z dwóch ostatnich sposobów osadzania plików wideo/audio, nawet jeżeli posiadamy materiał tylko w jednym formacie. Podając typ (format) pliku w kodzie strony, przeglądarka nie będzie musiała pobierać plików, aby sprawdzić, czy potrafi je odtworzyć. Jest to szczególnie ważne na stronach, które zawierając wiele osadzonych odtwarzaczy.

Przykład:

Zobacz przykład: VIDEO, AUDIO

Atrybuty odtwarzacza

autoplay

Atrybut logiczny (podawany bez wartości), który wywołuje automatyczne rozpoczęcie odtwarzania. Używaj go z rozsądkiem. Nie ma nic gorszego niż samodzielnie włączająca się o północy muzyka na stronie i grająca na cały regulator ;-)

controls

Atrybut logiczny, który powoduje wyświetlenie domyślnych kontrolek, służących od odtwarzania materiału. Najczęściej zawierają one przycisk "odtwarzaj", "zatrzymaj", "wycisz", suwak postępu odtwarzania i głośności.

Standardowe kontrolki odtwarzania zwykle wyglądają nieco inaczej w każdej przeglądarce. Jednak użytkownik jest przyzwyczajony do ich wyglądu właśnie ze swojej przeglądarki, więc nie powinno to dla niego stanowić problemu, a raczej ułatwienie. Jeżeli jednak nie możemy się z tym pogodzić, HTML5 daje możliwość stworzenia swoich własnych kontrolek odtwarzania. Służy do tego API JavaScript, a więc bez choćby podstawowych umiejętności programistycznych raczej się przy tym nie obejdzie.

Przykład:

Zobacz przykład: własne kontrolki odtwarzania

loop

Atrybut logiczny, który włącza tryb odtwarzania w kółko.

muted

Atrybut logiczny, który całkowicie wycisza dźwięk w odtwarzaczu.

poster

W przypadku odtwarzacza VIDEO możliwe jest ustawienie statycznego obrazka, który wyświetli się w oknie odtwarzania, zanim użytkownik włączy w nim odgrywanie właściwego filmu. Można w ten sposób umieścić np. pierwszą znaczącą klatkę z filmu. Jako wartość tego atrybutu należy podać lokalizację pliku graficznego.

preload

Określa, które części pliku multimedialnego powinny zostać pobrane przez przeglądarkę, nawet jeśli użytkownik nigdy nie włączy odtwarzania:

none
Żadna część pliku nie zostanie załadowana, zanim nie rozpocznie się jego odtwarzanie. Opcja przydatna, jeżeli odtwarzacz jest na stronie elementem pobocznym i użytkownik może nigdy go nie użyć albo ewentualnie kiedy zależy nam na zminimalizowaniu transferu.
metadata
Pobiera tylko tzw. metadane zapisane w pliku (wymiary, lista ścieżek, czas trwania itp.) oraz możliwe, że kilka pierwszych klatek filmu.
auto
Przeglądarka może dowolnie pobierać plik - w szczególności załadować go w całości do pamięci, nawet jeśli nigdy nie zostanie odtworzony.

width, height

Zanim plik wideo albo jego metadane zostaną załadowane, przeglądarka nie zna właściwych wymiarów filmu. Dlatego najpierw może przyjąć jakieś standardowe rozmiary, by potem zmienić je na właściwe. Może to wywołać efekt "skakania" elementów strony. Dlatego zawsze powinno się od razu określać, jaką szerokość (width="...") i wysokość (height="...") ma film, który będzie załadowany do odtwarzacza VIDEO.

Formaty audio/wideo

Wprowadzając w HTML5 nowe znaczniki AUDIO i VIDEO początkowo starano się również rozwiązać problemy z różnorodnością formatów plików muzycznych i filmowych. W samej wielości formatów nie byłoby nic złego, gdyby wszystkie przeglądarki potrafiły je obsłużyć. Niestety tak nie jest. Do tego dochodzą kwestie związane z patentami i licencjonowaniem.

W praktyce aby mieć pewność, że muzyka bądź film zostaną poprawnie wyświetlone w większości popularnych przeglądarek i systemów operacyjnych, konieczne jest konwertowanie plików jednocześnie do wszystkich z niżej wymienionych formatów. Poszczególne skonwertowane pliki w różnych formatach należy wymieć za pomocą kolejnych znaczników SOURCE.

Konwersję posiadanego pliku audio/wideo do wymaganych formatów można wykonać np. za pomocą darmowego programu Miro Video Converter.

Przykład:

Typowa kombinacja formatów plików wideo:

<video>
	<source src="plik.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	<source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'>
	Pobierz plik w formacie: <a href="plik.mp4">MP4</a>, <a href="plik.ogv">OGV</a>
</video>

Typowa kombinacja formatów plików audio:

<audio>
	<source src="plik.mp3" type='audio/mpeg'>
	<source src="plik.ogg" type='audio/ogg'>
	Pobierz plik w formacie: <a href="plik.mp3">MP3</a>, <a href="plik.ogg">OGG</a>
</audio>

MP3/MP4

Znane od dawna, komercyjne formaty audio (MP3) i wideo (MP4). Objęte płatnymi licencjami. Na ich upowszechnieniu zależy zwłaszcza posiadaczom patentów do nich - Microsoft i Apple.

Z uwagi na możliwe błędy w mobilnej wersji przeglądarki Safari, format MP4 - jeśli jest dostępny - powinien znajdować się na początku listy znacznika VIDEO. Inaczej odtworzenie wideo może być niemożliwe.

OGG/OGV

Konsorcjum W3C najpierw próbowało forsować jeden uniwersalny i darmowy format - OGG (audio) i OGV (wideo). Nie spodobało się to jednak twórcom komercyjnego formatu MP3/MP4. Poza tym argumentowano, że otwarty format OGG/OGV choć udostępniany za darmo, może w sposób niezamierzony korzystać z jakichś patentów, co przyniosłoby problemy w przyszłości, gdyby się nagle okazało, że jednak trzeba za jego użytkowanie płacić.

Kodeki

Plik audio/wideo można w uproszczeniu traktować jak archiwa ZIP lub RAR. Zawierają one w sobie spakowane wiele zwykłych plików. Sposób wykonywania kompresji w formacie ZIP różni się od RAR, ale nie wpływa na typ plików, które są spakowane w archiwum. Jedno archiwum może zawierać np. obrazy w formacie GIF, JPG lub PNG, a także muzykę MP3, WMA itp.

Każdy plik muzyczny musi zawierać tzw. ścieżkę dźwiękową. Pliki filmowe zawierają natomiast ścieżkę wideo oraz zwykle również ścieżkę dźwiękową. Ścieżki te są jakby odpowiednikiem plików spakowanych w archiwum ZIP lub RAR. Istnieją różne sposoby zapisu dźwięku i obrazu w plikach audio/wideo. Różnią się stopniem kompresji (wielkością wynikowego pliku), jakością, obciążeniem procesora przy odtwarzaniu itp. Za konwersję ścieżki audio/wideo do określonego formatu odpowiadają kodeki.

Podając typ (format) pliku audio/wideo, powinniśmy określić również kodeki, przy użyciu których przeglądarka może odtworzyć wybrany materiał. Dzięki temu w przypadku nieposiadania odpowiedniego kodeku, nie będzie konieczne pobieranie pliku, którego i tak nie da się odtworzyć.

Kodeki MP4

H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
<source src="video.mp4" type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
<source src="video.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src="video.mp4" type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src="video.mp4" type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
<source src="video.3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'>

Kodeki OGG/OGV

Vorbis audio alone in Ogg container
<source src="audio.ogg" type='audio/ogg; codecs=vorbis'>
Speex audio alone in Ogg container
<source src="audio.spx" type='audio/ogg; codecs=speex'>
FLAC audio alone in Ogg container
<source src="audio.oga" type='audio/ogg; codecs=flac'>
Dirac video and Vorbis audio in Ogg container
<source src="video.ogv" type='video/ogg; codecs="dirac, vorbis"'>
Theora video and Vorbis audio in Ogg container
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
Theora video and Speex audio in Ogg container
<source src="video.ogv" type='video/ogg; codecs="theora, speex"'>

TRACK

(interpretuje: Firefox 31, Opera, Chrome)

<video>
	<source src="lokalizacja pliku w formacie 1" type='format 1'>
	<source src="lokalizacja pliku w formacie 2" type='format 2'>
	(...)
	<track src="napisy.vtt" default>
	(...)
	Treść alternatywna
</video>
gdzie:
napisy.vtt
Lokalizacja pliku tekstowego z napisami (*.vtt) - na dysku lub adres URL do pliku w Internecie. Dodanie atrybutu default jest konieczne. Inaczej napisy mogą nie zostać wyświetlone!
lokalizacja pliku w formacie 1, lokalizacja pliku w formacie 2..., format 1, format 2..., Treść alternatywna
Opisane w rozdziale: VIDEO, AUDIO, SOURCE.

Napisy wyświetlane zwykle na dole ekranu są - obok głosu lektora i dubbingu - jednym ze sposobów na przekład filmu na inny język niż ten, w którym pierwotnie został on nakręcony. Tekst tłumaczenia teoretycznie można zapisać bezpośrednio w ścieżce wideo. Wtedy jednak każde tłumaczenie filmu byłoby fizycznie osobnym plikiem wideo. Na dodatek użytkownik np. słabowidzący albo posiadający niewielki monitor, nie mógłby sterować wielkością tekstu napisów. Dlatego dużo lepiej jest przygotować osobny, względnie niewielkich rozmiarów plik tekstowy z napisami. Jeżeli ktoś z innego kraju będzie chciał obejrzeć film, wystarczy że pobierze dokładnie ten sam plik wideo i dodatkowo poszuka sobie pliku napisów dla swojego języka. Taki osobny plik testowy z napisami nazywamy ścieżką tekstową.

Plik napisów tworzy się w dowolnym prostym edytorze tekstu. Możesz do tego celu użyć edytora, w którym normalnie tworzysz strony WWW. Możesz nawet skorzystać ze zwykłego windowsowskiego Notatnika (Notepad) lub dowolnego innego prostego edytora tekstu, wbudowanego w Twój system operacyjny. Zwróć przy tym uwagę tylko na dwie bardzo ważne kwestie:

  • Nazwa pliku musi mieć rozszerzenie *.vtt, a nie *.vtt.txt.
    Aby to zrobić w Notatniku, w oknie zapisywania pliku wybierz opcję: "Zapisz jako typ: Wszystkie pliki", a następnie wpisz pełną nazwę (np. napisy.vtt).
  • Plik napisów musi być zapisany przy użyciu kodowania znaków UTF-8 - nie ważne przy użyciu jakiej strony kodowej został utworzony dokument HTML, w którym jest wstawiony odtwarzacz wideo z dołączonymi tymi napisami.
    Aby to zrobić w Notatniku, w oknie zapisywania pliku wybierz opcję: "Kodowanie: UTF-8". Jeżeli używasz innego edytora możesz posiadać dodatkowo opcję zapisu pliku bez tzw. znaku BOM (znacznik kolejności bajtów) - dla plików *.vtt może on zarówno zostać dodany, jak i pominięty. W tym przypadku raczej korzystniej będzie go dodać (Notatnik robi to automatycznie).

Przykład:

Zobacz przykład: TRACK

WebVTT

Sama zawartość pliku napisów musi być zapisana zgodnie z ustalonym standardem WebVTT (ang. Web Video Text Tracks). W pierwszej linijce pliku należy obowiązkowo umieścić tekst: WEBVTT i zostawić po nim jedną linijkę przerwy. Mówi on, że plik został utworzony zgodnie ze standardem WebVTT. Dalej dodawane są już bloki kolejnych napisów. Każdy blok zawiera przedział czasu, w którym ma się wyświetlać na ekranie oraz sam tekst napisu. Kolejne bloki napisów są od siebie oddzielone pustą linijką. Choć być może brzmi to nieco skomplikowanie, tak naprawdę jest bardzo intuicyjne. Najprostszy plik napisów mógłby wyglądać następująco:

WEBVTT

00:00:01.000 --> 00:00:05.000
Ten napis wyświetli się między pierwszą a piątą sekundą filmu.

00:00:05.000 --> 00:00:10.000
Ten napis wyświetli się między piątą a dziesiątą sekundą filmu.

00:00:20.000 --> 00:00:30.000
Ten napis wyświetli się między dwudziestą a trzydziestą sekundą filmu.

Czasy wyświetlania napisów mogą na siebie również zachodzić, tzn. w jednej klatce filmu można wyświetlić kilka bloków napisów.

Ustawienia napisu

Każdy z bloków napisów może dodatkowo zawierać specjalne ustawienia, sterujące sposobem jego wyświetlania. Ustawienia umieszcza się na końcu linijki podającej przedział czasu - np.:

WEBVTT

00:00:01.000 --> 00:00:05.000 align:start vertical:rl
Ten napis zostanie wyrównany do początku i ustawiony w pionie przy lewej krawędzi.

Obsługiwane ustawienia:

  • align - ustawienie w poziomie
    • start - wyrównanie tekstu do lewej strony
    • end - wyrównanie tekstu do prawej strony
  • vertical - ustawienie w pionie (interpretuje: Chrome)
    • rl - napis przy lewej krawędzi
    • lr - napis przy prawej krawędzi

Dialogi

W celu oznaczenia dialogu/cytatu, odpowiednią linijkę w napisach należy poprzedzić specjalnym znacznikiem, w którym podaje się osobę, która ją wypowiada:

WEBVTT

00:00:05.000 --> 00:00:10.000
<v nauczyciel>- Ile to jest 2x2?
<v uczeń>- Poproszę o inny zestaw pytań.

Formatowanie tekstu

Do tekstu napisów można wprowadzać nawet podstawowe formatowanie tekstu. Obsługiwane są następujące znaczniki HTML: B, I, U. Aby wstawić do napisu znak mniejszości, większości lub ampersand ("&"), należy się posłużyć znanymi z języka HTML encjami: &lt;, &gt;, &amp;.

Stylizacja napisów

(interpretuje: Opera, Chrome)

To jeszcze nie koniec. Można nawet zmienić wygląd napisów przy pomocy stylów CSS. Obsługiwane powinny być następujące własności: color, opacity, visibility, text-decoration, text-outline, text-shadow, background, outline, font, white-space.

Aby zmienić stylizację wszystkich napisów, trzeba posłużyć się specjalnym pseudoelementem:

::cue {
	color: white;
	background: black;
}

Aby zmienić wygląd tekstu, który w napisach został objęty znacznikami B, I, U, należy wpisać:

::cue(b) {
	color: red;
}
::cue(i) {
	color: lime;
}
::cue(u) {
	color: aqua;
}

Aby zmienić wygląd wypowiedzi konkretnych osób w dialogu:

::cue(v[voice="nauczyciel"]) {
	font-style: italic;
}

W pliku *.vtt bezpośrednio przed wybranym blokiem napisów możesz podać identyfikator:

WEBVTT

identyfikator
00:00:01.000 --> 00:00:05.000
Ten napis posiada przypisany identyfikator.

Można się nim potem posłużyć, aby zmienić wygląd całego takiego bloku:

::cue(#identyfikator) {
	color: red;
}