HTML / HTML5
Nowe elementy HTML5
Jakie nowe elementy (znaczniki) znajdują się w HTML5?
- Wstęp
- Sekcje
- Znaczniki grupujące
- Semantyka tekstu
- Elementy osadzone
- Formularze
- Elementy interaktywne
- Skrypty
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:
- Sekcja 1
(zawiera akapit "Akapit sekcji 1")- Podsekcja 1.1
(zawiera blok cytowany i akapit "Akapit podsekcji 1.1") - Podsekcja 1.2
(nie ma żadnej zawartości oprócz nagłówka) - Podsekcja 1.3
(nie ma żadnej zawartości oprócz nagłówka)
- Podsekcja 1.1
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)
- 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:
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.