Nowe elementy HTML5

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

Wstęp

Standard HTML5 nie jest już taki nowy, ale nadal mogą być do niego wprowadzane nowe znaczniki. Przeglądarki które ich jeszcze nie odsługują, 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, search, section {
	display: block;
}

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

[hidden] {
	display: none;
}

Jeżeli nie korzystasz z możliwości CSS, nie musisz używać tej sztuczki... 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 stopek sekcji (element 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 następujące elementy: H1, H2, H3, H4, H5, H6. Ważne jest utrzymanie odpowiedniej kolejności numeracji poziomów nagłówków sekcji. Każdy kolejny nagłówek sekcji wstawiony w dokumencie może mieć numer poziomu:

mniejszy niż poprzedni nagłówek:

<h3>Nagłówek poziomu 3</h3>
<h1>Nagłówek poziomu 1</h1>

taki sam jak poprzedni nagłówek:

<h2>Nagłówek poziomu 2</h2>
<h2>Nagłówek poziomu 2</h2>

większy o jeden od poprzedniego nagłówka:

<h1>Nagłówek poziomu 1</h1>
<h2>Nagłówek poziomu 2</h2>

Warto wiedzieć, że w tym samym dokumencie może być więcej niż jeden znacznik H1. Ponadto język HTML5 nie nakłada obowiązku, aby taki element w ogóle się w nim znajdował. Choć nie jest to zalecane, można rozpocząć numerację nagłówków sekcji np. od elementu H2.

Każda sekcja dokumentu (elementy: ARTICLE, ASIDE, NAV, SECTION) może mieć nagłówek. Sam element sekcji w żaden sposób nie wpływa jednak na poziom nagłówka sekcji w automatycznym spisie treści dokumentu.

Przykład <h1, h2, h3, section>

Tak podzielony dokument:

<h1>Sekcja 1</h1>
<h2>Podsekcja 1.1</h2>
<p>Akapit podsekcji 1.1</p>
<h2>Podsekcja 1.2</h2>
<section>
	<h3>Podsekcja 1.2.1</h3>
</section>

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

Sekcja 1
1. Podsekcja 1.1
  (zawiera akapit "Akapit podsekcji 1.1")
2. Podsekcja 1.2
  (nie ma żadnej zawartości oprócz nagłówka)
  1. Podsekcja 1.2.1
    (nie ma żadnej zawartości oprócz nagłówka)

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

<section>
	<h1>Sekcja 1</h1>
	<section>
		<h2>Podsekcja 1.1</h2>
		<p>Akapit podsekcji 1.1</p>
	</section>
	<section>
		<h2>Podsekcja 1.2</h2>
		<section>
			<h3>Podsekcja 1.2.1</h3>
		</section>
	</section>
</section>

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.
SEARCH: Formularz wyszukiwania.

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

Znacznik INPUT służy do definiowania większości pól (kontrolek) interaktywnych formularzy. Nie jest on nowym elementem, gdyż istniał już w specyfikacji HTML 4.01. Jednak język HTML5 wprowadza wiele dodatkowych typów tego elementu, które ułatwiają wprowadzanie do formularza wartości o różnorodnym charakterze. Aby dowiedzieć się więcej, zobacz rozdział: Pola formularza.

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