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>
(function(tags) {
	for (var i = 0; i < tags.length; i++) {
		document.createElement(tags[i]);
	}
})(['article', 'aside', 'audio', 'bdi', 'canvas', 'data', 'datalist', 'details', 'dialog', 'embed', 'figcaption', 'figure', 'footer', 'header', 'hgroup', 'keygen', 'main', 'mark', 'meter', 'nav', 'output', 'picture', 'progress', 'rp', 'rt', 'ruby', 'section', 'source', 'summary', 'template', 'time', 'track', 'wbr', '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, hgroup, 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.

HGROUP

Nagłówek sekcji.

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, H1, H2, H3, H4, H5, H6, ADDRESS.

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, MENU, LI, DL, DT, DD, DIV.

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.

DATA

Dowolna treść z dodatkową informacją zapisaną w formie czytelnej dla komputera (atrybut value="...").

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.

Elementy osadzone

Osadzają w dokumencie treści multimedialne.

PICTURE, SOURCE

Pozwala podać wiele alternatywnych plików graficznych, z których przeglądarka będzie mogła wyświetlić ten, który w danym kontekście będzie najbardziej odpowiedni - w zależności np. od rozmiaru okna czy obsługiwanych formatów graficznych.

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.

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

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 (Firefox 57, Opera, Chrome)

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 (Firefox 57, Opera, Chrome)

url

Adres URL (Internet Explorer 10, Firefox, Opera, Chrome)

week

Tydzień w roku (Opera, Chrome)

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.

DIALOG

Część aplikacji w postaci okna dialogowego.

Skrypty

Skrypty pozwalają dodać pewną interaktywność do dokumentów HTML.

TEMPLATE

Oznacza fragmentu kodu HTML, który może być kopiowany i wstawiany przez skrypt w innym miejscu dokumentu.

SLOT

Tworzy tzw. slot używany przy tworzeniu własnych elementów.

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 skryptowych zaliczamy również: SCRIPT, NOSCRIPT.