#9 HTML5

Odkryj HTML5: uproszczona składnia, nowe elementy semantyczne (section, article), ulepszone formularze (nowe typy input, walidacja) i natywne multimedia (video, audio). Zoptymalizuj wydajność (preload, async) i bezpieczeństwo (sandbox, popover).

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Ewolucja i podstawowa składnia HTML5

HTML5 jest piątą, najnowszą wersją specyfikacji języka HTML. Jest to język komputerowy, którego skrót oznacza Hipertekstowy Język Oznaczania (Hypertext Markup Language), służący do tworzenia stron internetowych. Głównymi celami HTML5 było wprowadzenie nowych elementów w celu zwiększenia interaktywności, multimedialności i semantyczności dokumentów.

Ważne cechy ewolucji języka obejmują:

Zachowanie kompatybilności wstecz, tak aby użytkownicy starszych przeglądarek mogli korzystać ze stron napisanych w nowym języku.
Bardziej szczegółowe określenie sposobu obsługi błędów.
Wprowadzenie nowych znaczników semantycznych, aby uczynić sieć bardziej dostępną.

Uproszczona deklaracja typu dokumentu to <!doctype html>, która nie przełącza przeglądarki w tryb Quirks. Uproszczono również deklarację strony kodowej do <meta charset="utf-8">.

Nowe elementy semantyczne i strukturalne

W języku HTML5 wprowadzono nowe elementy, które tworzą sekcje lub grupują zawartość, w tym:

Sekcje: <article>, <aside>, <nav>, <section>.
Znaczniki grupujące: <figure>, <figcaption>, <main>, <search>.
Semantyka tekstu: <mark>, <time>, <wbr>.

Kluczowe znaczniki sekcji:

<section>: reprezentuje ogólną tematyczną grupę treści, często z nagłówkiem, porównywalną do rozdziału w książce. Jeśli chcemy przekazać dodatkowe znaczenie semantyczne, należy używać tego elementu zamiast <div>.
<article>: samodzielna część dokumentu lub aplikacji, która potencjalnie mogłaby być opublikowana niezależnie od reszty treści, np. wpis na blogu lub komentarz.
<aside>: kawałek treści, który jest tylko nieznacznie powiązany tematycznie z resztą strony (np. bannery reklamowe lub wtrącone cytaty), a jego usunięcie nie spowodowałoby utraty spójności reszty dokumentu.
<header>: reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zazwyczaj zawiera nagłówek sekcji, ale sam w sobie nie tworzy nowej sekcji.
<footer>: stanowi stopkę sekcji lub całej strony, przechowując informacje, takie jak autor lub prawa autorskie. Również nie tworzy nowej sekcji w dokumencie.
<main>: wskazuje główną zawartość strony WWW, z którą bezpośrednio związany jest tytuł strony. Służy jedynie do grupowania - nie tworzy nowej sekcji.
<nav>: sekcja strony zawierająca odnośniki nawigacyjne (np. menu główne).

Inne ważne elementy semantyki:

<figure> i <figcaption>: służą do oznaczania załączników (ilustracji, diagramów, kodu źródłowego) i dodawania do nich podpisów.
<mark>: służy do zaznaczenia lub uwydatnienia tekstu w określonym kontekście, np. w wynikach wyszukiwania.
<time>: poprawnie oznacza datę i/lub czas, często używany z atrybutem datetime="..." w formacie ustandaryzowanym, nawet jeśli treść znacznika jest podana w formacie czytelnym dla użytkownika.
<hgroup>: używany do grupowania nagłówka z podtytułem, tytułem alternatywnym lub sloganem.
<wbr>: umożliwia przeglądarce przełamanie długiej linii tekstu do następnego wiersza, jeśli linia nie mieści się w szerokości okna, ale nie wymusza przełamania wiersza, jeśli nie ma takiej potrzeby.

Elementy formularzy i interaktywność

HTML5 wprowadza nowe elementy i atrybuty do obsługi formularzy i interakcji:

Nowe typy pól <input>: wprowadzono nowe typy dla elementu <input>, które ułatwiają wprowadzanie danych, takie jak: color, date, datetime-local, email, month, number, range, search, tel, time, url, week.
<datalist>: tworzy listę rozwijaną z podpowiedziami dla elementu <input>, dodając autouzupełnianie pól formularza.
<progress>: wstawia pasek postępu, przedstawiający stopień ukończenia zadania. Może wskazywać określony stopień (value, max) lub nieokreślony.
<meter>: wstawia pasek wyniku, przedstawiający określoną wartość (np. zapełnienie dysku lub głosy w ankiecie). Może zawierać atrybuty min, max, low, high i optimum.
<details> i <summary>: pozwalają na wstawienie otwieralnego panelu. Element <summary> dostarcza nagłówek panelu, który po kliknięciu otwiera lub zamyka szczegóły.
popover: nowy atrybut, który pozwala na stworzenie wyskakującego okienka na warstwie ponad zawartością strony bez użycia JavaScriptu. Wymaga identyfikatora id="..." oraz przycisków z atrybutami popovertarget i popovertargetaction do sterowania.
required: atrybut logiczny wymuszający wypełnienie obowiązkowego pola formularza (<input>, <select>, <textarea>).
pattern: atrybut umożliwiający walidację pól formularza na podstawie wyrażenia regularnego, używany do wpisywania tekstu w niestandardowym formacie, np. kodu pocztowego.
novalidate: atrybut logiczny w elemencie <form>, który pomija walidację wszystkich pól formularza przy jego wysyłaniu.
placeholder: wyświetla tymczasową podpowiedź w polu formularza (<input>, <textarea>) w postaci szarego tekstu, który znika po rozpoczęciu wprowadzania danych.
form: atrybut umożliwiający umieszczanie pól formularza poza znacznikiem <form> i skojarzenie ich z wybranym formularzem za pomocą jego identyfikatora (id).
minlength, maxlength: atrybuty wymuszające minimalną i maksymalną liczbę znaków w polu formularza (<input>, <textarea>).

Multimedia, grafika i ścieżki tekstowe fo filmów

Zmiany w obsłudze mediów:

<video>, <audio>, <source>: elementy te służą do osadzania odtwarzaczy filmów wideo i muzyki audio bez wtyczek. Element <source> jest używany do wskazania tego samego materiału multimedialnego w wielu formatach (np. MP4 i OGV), aby przeglądarka mogła wybrać obsługiwany format.
<track>: dodaje napisy (ścieżkę tekstową) do filmu wideo. Napisy muszą być zapisane zgodnie ze standardem WebVTT (*.vtt). Atrybut kind może określać rodzaj ścieżki (np. subtitles, captions, descriptions).
Responsywny obrazek (<picture>, <source>): pozwala podać wiele alternatywnych plików graficznych, które przeglądarka wybierze w zależności od wielkości ekranu (media="...") lub obsługiwanego formatu (type="..."). Na końcu zawsze musi znajdować się tag <img> jako alternatywa dla starszych przeglądarek.

Optymalizacja wydajności i bezpieczeństwo

Nowe atrybuty dla optymalizacji i bezpieczeństwa:

loading="lazy": opóźnia ładowanie zasobów (<img>, <iframe>) do momentu, gdy użytkownik przewinie stronę w ich pobliże, poprawiając wydajność początkowego ładowania strony.
fetchpriority: pozwala określić priorytet ładowania krytycznych zasobów (<img>, <link>, <script>) jako low, high lub auto, co zapewnia szybsze wczytywanie ważnych elementów.
rel="preload" w <link>: służy do wstępnego ładowania zewnętrznych zasobów, zanim będą potrzebne, za pomocą atrybutów as="..." (określającego rodzaj zasobu, np. image, script, style) i href="...".
async w <script>: włącza asynchroniczne ładowanie skryptu JavaScript z zewnętrznego pliku, co zapobiega blokowaniu renderowania strony.
decoding="async" w <img>: podpowiada przeglądarce, aby dekodowała obrazek asynchronicznie, co może nie opóźniać wyświetlania reszty strony, zwłaszcza w przypadku dużych obrazków.
crossorigin: steruje przesyłaniem danych uwierzytelniających (np. ciasteczek) dla zasobów z innych domen. Może przyjmować wartości anonymous lub use-credentials.
data-...: Umożliwia dodanie własnych, niestandardowych atrybutów danych do dowolnego znacznika HTML, wykorzystywanych w skryptach JavaScript.
contenteditable: sprawia, że zawartość dowolnego elementu HTML jest edytowalna, umożliwiając dynamiczną edycję na stronie. Może przyjmować wartości true, false lub plaintext-only.

Kontrola użyteczności i zabezpieczenia

Mechanizmy kontroli interakcji i zabezpieczeń:

autocomplete="off": zabezpiecza formularze, wyłączając funkcję automatycznego uzupełniania pól formularza (dla <form>, <input>, <select>, <textarea>), co jest zalecane dla pól zawierających wrażliwe dane osobowe.
autofocus: automatycznie ustawia kursor tekstowy (fokus) na wybranym elemencie formularza po załadowaniu strony.
draggable="false": blokuje możliwość przeciągania danego elementu myszką.
inert: sprawia, że element przestaje być interaktywny - użytkownik nie może zaznaczać tekstu, edytować zawartości ani wyszukiwać tekstu (Ctrl+F) w obrębie elementu.
sandbox w <iframe>: wprowadza ograniczenia na osadzoną zawartość ramki, tworząc tzw. piaskownicę, która chroni użytkownika przed złośliwymi skryptami lub wyskakującymi oknami. Można odblokować wybrane funkcje, podając listę pozwoleń (np. allow-scripts, allow-forms).
srcdoc w <iframe>: pozwala na bezpośrednie osadzenie kodu HTML jako zawartości ramki lokalnej, eliminując potrzebę wczytywania zewnętrznego pliku.
spellcheck="false": blokuje automatyczne sprawdzanie pisowni w wybranych polach formularza lub edytowalnych elementach.
translate="no": blokuje automatyczne tłumaczenie wybranego fragmentu strony WWW na inne języki przez aplikacje tłumaczące.

Zmiany w istniejących elementach i atrybutach

Wiele elementów i atrybutów zostało zmienionych lub oznaczonych jako przestarzałe:

Zmiana elementu <a>: może teraz obejmować elementy blokowe, co jest pomocne przy tworzeniu dużych klikalnych obszarów, np. dla całego artykułu.
Zmiana elementu <address>: odnosi się do najbliższego elementu <article> lub <body>, w którym został wstawiony, i może zawierać elementy blokowe (z pewnymi wyjątkami).
<i>: oznacza np. termin techniczny, idiom z innego języka lub fragment wtrąconego tekstu.
<strong>: oznacza wysoką ważność, a nie mocne wyróżnienie tekstu.
Przestarzałe elementy: elementy formatujące, których funkcję przejęły style CSS, zostały wycofane. Należą do nich m.in.: <basefont>, <big>, <center>, <font>, <strike>, <tt>, <frame>, <frameset>, <noframes>.
Przestarzałe atrybuty: wycofano atrybuty takie jak rev i charset dla <link> i <a>, longdesc dla <img> i <iframe>, oraz wiele atrybutów formatujących, np. align dla wielu elementów.
border dla <table>: może zawierać tylko pustą wartość lub cyfrę "1".
reversed w <ol>: atrybut logiczny, który ustala odwrotną (malejącą) kolejność numeracji listy uporządkowanej.