Przejdź do treści

HTML5

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.

Zobacz także

Komentarze

Zobacz więcej komentarzy