HTML / HTML5

Nowe elementy HTML5

Jakie nowe elementy (znaczniki) znajdują się w HTML5?

Wstęp

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 <h1, h2, h3, blockquote, section>

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:

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)

Przykład <input color date datetime-local email month number range search tel time url week>

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.
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.

Komentarze

Zobacz więcej komentarzy