• 
  Ewolucja języka HTML

  Co to jest język HTML5?

• 
  Czy XHTML umarł?

  Czy przejście z języka (X)HTML do (X)HTML5 wymaga przepisania wszystkich stron od nowa?

• 
  Składnia (X)HTML5

  Jak wygląda typowy dokument (X)HTML5?

• 
  Nowe elementy HTML5

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

• 
  Nowe atrybuty HTML5

  Jakie nowe atrybuty znajdują się w HTML5?

• 
  Zmienione elementy i atrybuty HTML5

  Jakie elementy (znaczniki) i atrybuty zostały zmienione (zmodyfikowane) w HTML5?

• 
  Przestarzałe elementy i atrybuty HTML5

  Jakie elementy (znaczniki) i atrybuty wycofano (usunięto) w HTML5?

• 
  Kategorie elementów HTML5

  W jaki sposób są podzielone elementy (znaczniki) HTML5?

• 
  Sekcja <section>

  Jak podzielić tematycznie obszerniejsze fragmenty dokumentu HTML5?

• 
  Artykuł <article>

  Jak wstawić artykuł do dokumentu HTML5?

• 
  Wstawka <aside>

  W jaki sposób w HTML5 powinno się wstawiać elementy, powiązane tematycznie z artykułem na stronie?

• 
  Podtytuł <hgroup>

  W jaki sposób poprawnie wstawić do dokumentu podtytuł?

• 
  Nagłówek <header>

  Jak powinno się wstawiać wprowadzenie w dokumentach HTML5?

• 
  Stopka <footer>

  W jaki sposób oznaczyć stopkę w dokumentach HTML5?

• 
  Nawigacja <nav>

  Jak wstawić na stronie WWW sekcję z linkami nawigacyjnymi?

• 
  Szablon strony w HTML5

  Jak powinien wyglądać szablon (szkielet) strony w języku HTML5?

• 
  Załącznik <figure, figcaption>

  W jaki sposób oznaczyć w HTML5: ilustrację, diagram, zdjęcie, kod źródłowy, rysunek, rycinę, wykres, załącznik?

• 
  Główna treść <main>

  W jaki sposób wskazać główną zawartość strony WWW?

• 
  Wyszukiwarka <search>

  Jak oznaczyć na stronie formularz wyszukiwania lub filtrowania treści?

• 
  Uwydatnienie <mark>

  Jak zaznaczyć lub uwydatnić część tekstu?

• 
  Data i czas <time>

  W jaki sposób poprawnie oznaczać datę i czas w dokumentach HTML5?

• 
  Możliwy koniec linii <wbr>

  Jak umożliwić przeglądarce przełamanie długiej linii do następnego wiersza?

• 
  Responsywny obrazek <picture, source>

  W jaki sposób wstawić na stronie internetowej obrazek (grafikę, zdjęcie, fotografię, ilustrację), który automatycznie dopasowuje się do wielkości ekranu?

• 
  Filmy i dźwięk <video, audio, source>

  W jaki sposób wstawić odtwarzacz filmów wideo lub muzyki audio na stronie internetowej?

• 
  Napisy do filmów <track>

  Jak dodać napisy (ścieżkę tekstową) do filmu wideo?

• 
  Autouzupełnianie <datalist>

  W jaki sposób dodać autouzupełnianie pola formularza?

• 
  Pasek postępu <progress>

  Jak wstawić na stronie WWW pasek postępu?

• 
  Pasek wyniku <meter>

  Jak wstawić na stronie WWW pasek głosowania w ankiecie?

• 
  Otwierany panel <details, summary>

  Co zrobić, aby wstawić na stronę panel, otwierany po kliknięciu myszką?

• 
  Pola formularza <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week" min max step multiple>

  Jak wstawić na stronie WWW pole (kontrolkę) formularza służącą do wyboru: koloru, daty, czasu, tygodnia roku, adresu e-mail, wartości liczbowej, przedziału (zakresu) liczb, numeru telefonu, adresu strony (URL) czy pole wyszukiwania?

• 
  Wstępne ładowanie <link "preload" as>

  W jaki sposób przyspieszyć ładowanie zewnętrznych zasobów (plików): zdjęć, filmów wideo, dźwięku audio, arkuszy stylów CSS, czcionek, skryptów?

• 
  Automatyczna kapitalizacja tekstu <... autocapitalize>

  Jak zablokować przełączanie klawiatury smartfona w tryb automatycznego wstawiania pierwszej litery jako wielkiej?

• 
  Asynchroniczne ładowanie skryptów <script src async>

  W jaki sposób załadować skrypt JavaScript (JS) asynchronicznie, aby nie blokował szybkiego wyświetlania strony WWW?

• 
  Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>

  Jak zabezpieczyć formularz internetowy przed wyciekiem (ujawnieniem) danych osobowych?

• 
  Blokada autokorekty <... autocorrect>

  W jaki sposób zablokować automatyczne poprawianie błędów pisowni podczas wprowadzania tekstu w wybranych polach formularza HTML na stronie?

• 
  Automatyczne zogniskowanie <... autofocus>

  W jaki sposób wprowadzić kursor tekstowy do wybranego pola formularza automatycznie po załadowaniu strony?

• 
  Blokowanie wyświetlania <link "stylesheet" blocking, script blocking, style blocking>

  W jaki sposób załadować skrypt JavaScript (JS) asynchronicznie, ale zatrzymać wyświetlanie (renderowanie) strony, dopóki nie skończy on generować dynamicznej zawartości?

• 
  Deklaracja strony kodowej <meta charset>

  Jak HTML5 upraszcza sposób deklarowania strony kodowej umożliwiającej poprawne wyświetlanie znaków diakrytycznych na stronie?

• 
  Element edytowalny <... contenteditable>

  Jak sprawić, aby zawartość dowolnego elementu HTML na stronie WWW można było edytować?

• 
  Uwierzytelnienie <audio crossorigin, img crossorigin, link crossorigin, script crossorigin, video crossorigin>

  W jaki sposób można identyfikować zalogowanego użytkownika pomiędzy różnymi serwisami?

• 
  Atrybuty danych <... data-...>

  Jak dodać do dowolnego znacznika HTML własny, niestandardowy atrybut?

• 
  Dekodowanie obrazków <img decoding>

  W jaki sposób nie opóźniać wyświetlania strony podczas ładowania dużych obrazków?

• 
  Grupowa blokada pól formularza <fieldset disabled>

  W jaki sposób za jednym razem zablokować kilka pól formularza HTML?

• 
  Pobieranie <a download, area download>

  Jak wymusić pobranie pliku na dysk po kliknięciu linka (odnośnika hipertekstowego)?

• 
  Przeciągnij i upuść <... draggable>

  W jaki sposób zablokować przeciąganie elementów myszką?

• 
  Klawisz Enter <... enterkeyhint>

  Co zrobić, żeby na klawiaturze smartfona wyświetlał się inny klawisz Enter - np. z napisem "Idź", "Dalej", "Wyślij" albo ikonka wyszukiwania?

• 
  Priorytet ładowania <img fetchpriority, link fetchpriority, script fetchpriority>

  Jak zapewnić szybsze ładowanie krytycznych zasobów (obrazków, arkuszy stylów, skryptów) osadzonych na stronie?

• 
  Przypisanie pola do formularza <button form, fieldset form, input form, object form, output form, select form, textarea form>

  Czy można umieszczać pola (kontrolki) poza znacznikiem formularza?

• 
  Nadpisanie atrybutów formularza <button formaction formenctype formmethod formnovalidate formtarget, input "submit, image" formaction formenctype formmethod formnovalidate formtarget>

  W jaki sposób zbudować formularz HTML, który zostanie wysłany pod inny adres, w zależności który przycisk użytkownik kliknie?

• 
  Element ukryty <... hidden>

  W jaki sposób ukryć element na stronie, ale pozwolić wyszukiwać jego treść?

• 
  Element bierny <... inert>

  W jaki sposób zablokować możliwość zaznaczania i wyszukiwanie tekstu w wybranym elemencie na stronie WWW?

• 
  Tryb wpisywania <... inputmode>

  W jaki sposób ustawić typ klawiatury na ekranie smartfona do wpisywania wartości liczbowej, numeru telefonu, adresu URL lub e-mail?

• 
  Leniwe ładowanie <iframe loading, img loading>

  Co zrobić, żeby obrazki na stronie były ładowane dopiero, kiedy użytkownik przewinie stronę w ich pobliże?

• 
  Minimalna i maksymalna liczba znaków <input minlength maxlength, textarea minlength maxlength>

  Jak wymusić wpisanie w formularzu tekstu przynajmniej o podanej długości? Jak zabezpieczyć się przed wprowadzeniem zbyt długiego tekstu?

• 
  Pominięcie walidacji formularza <form novalidate>

  W jaki sposób zrezygnować ze sprawdzania poprawności wypełniania pól formularza?

• 
  Walidacja pól formularza <input pattern>

  Jak zrobić pole formularza do wpisania tekstu w niestandardowym formacie - np. kodu pocztowego?

• 
  Podpowiedź pola formularza <input placeholder, textarea placeholder>

  Jak umieścić podpowiedź w polu formularza HTML w postaci szarego tekstu, który zniknie po rozpoczęciu wprowadzania danych?

• 
  Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>

  Jak w języku HTML otworzyć wyskakujące okienko na warstwie ponad zawartością strony bez użycia JavaScript?

• 
  Pole obowiązkowe <input required, select required, textarea required>

  W jaki sposób wymusić wypełnienie obowiązkowego (wymaganego) pola w formularzu HTML?

• 
  Wykaz z numeracją odwrotną <ol reversed>

  Jak ponumerować punkty w kolejności malejącej?

• 
  Piaskownica zabezpieczająca <iframe sandbox>

  Jak zabezpieczyć zewnętrzne widżety (ramki lokalne), aby nie mogły zainstalować wirusa czy konia trojańskiego użytkownikom naszego serwisu ani wyłudzać od nich danych?

• 
  Osadzenie kodu HTML w ramce lokalnej <iframe srcdoc>

  Jak bez użycia JavaScript wygenerować zawartość ramki lokalnej bez wczytywania do niej żadnej strony?

• 
  Sprawdzanie pisowni <... spellcheck>

  W jaki sposób zablokować sprawdzanie pisowni w wybranych polach formularza HTML na stronie?

• 
  Tłumaczenie językowe <... translate>

  W jaki sposób zablokować automatyczne tłumaczenie wybranych fragmentów strony WWW na inne języki?

• 
  Rozmiary przycisku obrazkowego <input "image" width height>

  Czy w języku HTML da się ustawić rozmiary przycisku obrazkowego do wysyłania formularza?

• 
  Zawijanie tekstu w formularzu <textarea wrap>

  W jaki sposób wymusić wysłanie tekstu dokładnie w taki sposób, jak wyglądał podczas wypełniania formularza HTML?

• 
  Pytania i odpowiedzi

  HTML

• 
  Powtórka

  HTML

Język HTML 4 stał się oficjalną rekomendacją W3C w 1997 roku. Pierwsza wersja specyfikacji XHTML 1 została ogłoszona w roku 2000. Celem XHTML 1.0 ani 1.1 nie było wprowadzanie nowych znaczników ani atrybutów, ale zbliżenie składni języka HTML do XML. Miało to umożliwić twórcom oraz administratorom serwisów internetowych korzystanie z narzędzi i bibliotek dostępnych dla języka XML oraz pozwolić na większą rozszerzalność HTML - poprzez możliwość osadzania w dokumencie XHTML fragmentów pochodzących z innych specyfikacji XML (SVG, MathML, RDF). Jednak brak nowych możliwości języka, w ciągle rozwijającej się sieci, zaczął mocno doskwierać twórcom oraz producentom przeglądarek. Z tego powodu konsorcjum W3C rozpoczęło prace nad specyfikacją XHTML 2.0, która miała całkowicie zerwać z historycznymi zaszłościami języka HTML 4. Krok ten nie spodobał się producentom popularnych przeglądarek internetowych, którzy przez lata tworzyli swoje produkty tak, aby były zgodne z językiem HTML. Nie ma co ukrywać, że wprowadzenie XHTML 2.0 mogłoby być również sporym problemem dla zwykłych użytkowników, którzy nie mając zainstalowanej najnowszej wersji przeglądarki zapewne nie mogliby w ogóle wyświetlić stron zgodnych z nowym standardem. Z tych powodów prace nad XHTML 2.0 zostały ostatecznie przerwane i specyfikacja ta zapewne nigdy nie zostanie ukończona.

Problem jednak nadal pozostał. Dzisiaj Internet nie taki sam, jak w 1997 roku, kiedy dominowały statyczne dokumenty tekstowe, a multimedialność polegała na wstawieniu do artykułu kilku ilustracji. Dlatego producenci popularnych przeglądarek postanowili rozpocząć prace nad nową wersję znanego wszystkim języka znaczników - HTML tym razem już w odsłonie nr 5. Potem dla ostatecznego opracowania nowej specyfikacji powołano grupę roboczą W3C. Głównymi celami HTML5 są:

• Wprowadzenie nowych elementów dla zwiększenia interaktywności i multimedialności stron internetowych.
• Wprowadzenie nowych znaczników semantycznych, aby uczynić sieć bardziej dostępną dla wszystkich.
• Oficjalne załączenie do specyfikacji rozszerzeń, dodanych w przeszłości na własną rękę przez producentów przeglądarek, które i tak stały się już wcześniej standardem de facto.
• Bardziej szczegółowe określenie sposobu obsługi błędów, tak aby dokumenty napisane przez niedouczonych webmasterów wyświetlały się tak samo w każdej przeglądarce.
• Zachowanie kompatybilności wstecz, tak by użytkownicy starszych przeglądarek również mogli korzystać ze stron napisanych w nowym języku.

Uważny czytelnik w tym momencie może poczuć się nieco zdezorientowany - "Najpierw uczyłem się HTML 4, potem dowiedziałem się, że lepszy od niego może być XHTML, a teraz jeszcze muszę się uczyć HTML5?". W wielu zastosowaniach język HTML jest zupełnie wystarczający. Nie każdy webmaster musi znać język XML, a zatem tym bardziej nie będzie miał potrzeby korzystania z jego narzędzi. Jednak pisanie dokumentów HTML w taki sposób, aby składniowo były zgodne z językiem XHTML 1 (a więc również XML), tak naprawdę raczej niewiele kosztuje. Być może kiedyś zajdzie potrzeba wykorzystania dodatkowych możliwości XHTML, a wtedy dokumenty będą już do tego praktycznie przygotowane.

Mimo swojej nieco mylącej nazwy, specyfikacja HTML5 tak naprawdę definiuje dwa języki: HTML5 oraz XHTML5. Ten drugi jest tym samym, czym był XHTML 1 dla HTML 4, czyli korzysta dokładnie z tych samych znaczników i atrybutów, a jedynie określa nieco inny sposób zapisu oraz klika dodatkowych ograniczeń w celu uzyskania zgodności z ogólnym językiem XML. Nie ma zatem obawy - XHTML nie umarł i na dodatek ma się całkiem dobrze :-) Jeżeli jednak czytelnik woli korzystać z uproszczonej składni HTML i nie sądzi, że własności XML kiedykolwiek będą mu potrzebne, nie ma żadnych przeszkód, aby używać zapisu właściwego tylko dla języka HTML. Tworząc specyfikację HTML5 organizacja W3C dała jasno do zrozumienia (pod delikatnym naciskiem producentów przeglądarek), że język HTML nie zostanie porzucony na rzecz XHTML, ale że będą się rozwijać jednocześnie.

Przykładowy dokument HTML5

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>...</title>
	</head>
	<body>
		...
	</body>
</html>

W pierwszej linijce widzimy skróconą deklarację typu dokumentu (co ważne, nie przełącza ona przeglądarki w tryb Quirks). Powiedzmy sobie szczerze - raczej nikt nie był w stanie zapamiętać rozwlekłej formy DTD dla języka HTML 4 ani XHTML 1. Przeglądarki również nie robiły użytku z adresów URL w nich zawartych. Dlatego zdecydowano się ją skrócić. W nowej wersji nie ma znaczenia wielkość liter w zawartości DTD - poprawny będzie także zapis:

<!DOCTYPE html>

Specyfikacja pozwala również na stosowanie specjalnej deklaracji, która ma na celu uzyskanie kompatybilności z bardzo starymi przeglądarkami:

<!DOCTYPE html SYSTEM "about:legacy-compat">

Wydaje się jednak, że nie ma takiej potrzeby i standardowa skrócona deklaracja jest w zupełności wystarczająca.

Przykładowy dokument XHTML5

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>...</title>
	</head>
	<body>
		...
	</body>
</html>

Tutaj niewiele się zmieniło. W poprawnym dokumencie XHTML stronę kodową określa się w prologu XML. Nie powinno się wtedy stosować odpowiadającego jej znacznika META.

MathML i SVG

MathML (ang. Mathematical Markup Language) jest językiem znaczników, wywodzącym się z XML, służącym do przedstawiania skomplikowanych wzorów i symboli matematycznych.

SVG (ang. Scalable Vector Graphics) jest językiem znaczników, wywodzącym się z XML, służącym do zapisu grafiki wektorowej (w tym animacji).

Oba te formaty można osadzać wprost w dokumentach HTML5.

<!doctype html>
<title>MathML i SVG w HTML 5</title>
<p>
	Twierdzenie Pitagorasa:
	<math> <mrow><msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup></mrow> </math>
</p>
<p>
	Zielony okrąg:
	<svg> <circle r="50" cx="50" cy="50" fill="green"> </svg>
</p>

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:

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

Język HTML5 definiuje nie tylko zupełnie nowe elementy (znaczniki), ale również dodatkowe atrybuty, które można przypisywać również do elementów, które były zdefiniowane już w specyfikacji HTML 4.01.

Żródło: HTML Standard

Zmienione elementy

A

Jeżeli sam nie zawiera się w elemencie wyświetlanym w linii, może obejmować sobą również elementy blokowe z wyjątkiem interaktywnych: A, BUTTON, DETAILS, EMBED, IFRAME, LABEL, SELECT, TEXTAREA, AUDIO (z atrybutem controls), IMG (z atrybutem usemap="..."), INPUT (z atrybutem type="..." innym niż "hidden"), MENU (z atrybutem type="toolbar"), OBJECT (z atrybutem usemap="..."), VIDEO (z atrybutem controls).
Szczególnego podkreślenia wymaga, że jest to niezwykle pomocna zmiana. Dzięki niej, mając np. listę artykułów z tytułami, skróconymi wprowadzeniami i zdjęciem, nie trzeba już wstawiać trzy razy tego samego linku przy każdym artykule, aby osobno objąć zawartość każdego z tych elementów. HTML5 pozwala objąć jednym znacznikiem odnośnika wszystkie te elementy jednocześnie - nawet jeśli część z nich jest wyświetlana w bloku.

ADDRESS

Odnosi się do najbliższego elementu ARTICLE lub BODY, w którym został wstawiony.
Może zawierać również elementy blokowe z wyjątkiem: nagłówków (H1, H2, H3, H4, H5, H6), sekcji (ARTICLE, ASIDE, NAV, SECTION), HEADER, FOOTER, ADDRESS.

B

Tekst na który należy zwrócić uwagę z powodów czysto użytkowych. Nie nadaje dodatkowej ważności treści ani nie stawia akcentu wypowiedzi. Przydatne przy oznaczaniu słów kluczowych w tekście albo wprowadzenia na początku artykułu.

CAPTION

Może zawierać również elementy blokowe z wyjątkiem TABLE.

CITE

Oznacza wyłącznie tytuły prac (książek, opracowań, wierszy, piosenek, filmów, gier, obrazów itp.), a nie ich autorów.

DL

Lista opisowa (ang. description list). Nie nadaje się teraz do oznaczania dialogów.

FIELDSET

Nie musi zawierać elementu LEGEND.

HR

Oddziela bloki tematyczne sekcji artykułu na poziomie akapitów.

I

Oznacza np. termin techniczny, idiom z innego języka albo fragment wtrąconego tekstu.

LABEL

Kliknięcie na etykietę nie musi już oznaczać automatycznego przeniesienia kursora tekstowego do skojarzonego z nią pola formularza, chyba że takie jest standardowe zachowanie systemu operacyjnego użytkownika.

MENU

Służy do budowy użytecznych pasków narzędzi oraz menu kontekstowych.

NOSCRIPT

Zostanie wyświetlony wyłącznie, jeśli przeglądarka w ogóle nie obsługuje dynamicznych skryptów, a nie kiedy nie potrafi zinterpretować języka skryptowego, określonego w poprzedzającym go znaczniku SCRIPT.

S

Oznacza treść, która nie jest dłużej trafna lub istotna, z punktu widzenia pozostałej zawartości dokumentu.

SCRIPT

Istnieje możliwość określenia dodatkowych wartości atrybutu type="..." - np.: "text/plain", "text/xml", "application/octet-stream", "application/xml". W tak oznaczonym elemencie można zapisać surowe dane dla dynamicznych skryptów używanych na stronie.

SMALL

Reprezentuje przypisy (wyjaśnienia, zastrzeżenia, ograniczenia prawne, prawa autorskie).

STRONG

Oznacza wysoką ważność, a nie mocne wyróżnienie tekstu.

TH

Może zawierać również elementy blokowe z wyjątkiem: HEADER, FOOTER, sekcji (ARTICLE, ASIDE, NAV, SECTION), nagłówków (H1, H2, H3, H4, H5, H6).

U

Nieartykułowany tekst albo oznaczenie błędu ortograficznego.

TABLE, THEAD, TBODY, TFOOT, TR, OL, UL, DL

Mogą być puste (nie zawierać żadnych elementów potomnych).

Zmienione atrybuty

accept

Dla elementów INPUT pozwala użyć ogólnych wartości: "audio/*" (dowolny plik w formacie dźwiękowym), "video/*" (dowolny plik w formacie wideo), "image/*" (dowolny plik graficzny).

accesskey

Możliwość użycia listy klawiszy rozdzielonych spacjami, z których przeglądarka może wybrać najbardziej dla niej odpowiedni.

action

Nie może zawierać pustej wartości.

border

Dla znacznika TABLE może zawierać tylko pustą wartość lub cyfrę "1".

colspan

Dla elementów TD i TH musi zawierać wartość większą od zera.

coords

Dla znacznika AREA nie może zawierać wartości procentowej, gdy shape="circle".

defer

Jasno określono, że wywoła załadowanie pliku skryptu osadzonego przy pomocy SCRIPT, kiedy kod strony zostanie w całości wczytany przez przeglądarkę.

dir

Dodano nową wartość - "auto".

enctype

Dla znacznika FORM dodano obsługę "text/plain".

href

Dla elementu LINK nie może zawierać pustej wartości.
Dla elementu BASE musi zawierać adres bezwzględny.
Dla elementu A może zawierać IRI (od zwykłego adresu URL różni się tym, że może składać się z liter spoza alfabetu łacińskiego). Wymagane jest jednak przy tym, aby dokument był zapisany przy użyciu strony kodowej UTF-8 lub UTF-16.

http-equiv

Dla elementu META nie oznacza już nagłówków HTTP serwera, ale dyrektywy przeglądarki.

id

Może zawierać dowolnie długą wartość, pod warunkiem że nie powtarza się drugi raz w tym samym dokumencie, nie jest pusta ani nie zawiera spacji.

lang

Może zawierać pustą wartość.

media

Dla znacznika LINK akceptuje zapytania mediów, a domyślnie posiada wartość "all".

onclick...

Atrybuty obsługi zdarzeń interfejsu użytkownika mogą zawierać wyłącznie kod skryptu, napisany w języku JavaScript.

start, type

Dla elementu OL nie są już zdeprecjonowane.

style

Może zawierać wyłącznie kod CSS - jako języka formatowania.

tabindex

Przyjmuje również wartości ujemne, co oznacza, że element może zostać aktywowany, ale nie za pomocą klawisza tabulatora.

target

Dla znaczników A i AREA nie jest już zdeprecjonowany. Może być przydatny w połączeniu z IFRAME.

type

Nie jest już konieczny dla elementów SCRIPT ani STYLE, o ile językiem skryptowym jest JavaScript, a językiem formatowania - odpowiednio CSS.

usemap

Dla znacznika IMG nie może już zawierać adresu URL, ale odniesienie do identyfikatora, rozpoczynające się znakiem krzyżyka ("#").

value

Dla elementu LI nie jest już zdeprecjonowany.

width, height

Dla znaczników IMG, IFRAME, OBJECT nie mogą zawierać wartości procentowych. Nie mogą również zostać użyte do spłaszczenia ani rozciągnięcia elementów niezgodnie z ich oryginalnymi proporcjami.

Odradzane atrybuty

border

Jeśli jest podany dla znacznika IMG, musi zawierać wartość "0" (zero). W zamian lepiej używać CSS.

language

Jeśli jest podany dla znacznika SCRIPT, musi zawierać wartość "JavaScript" (wielkość liter w zapisie nie ma znaczenia). Nie może kolidować z wartością type="...". Najlepiej w ogóle pominąć atrybut language="...", ponieważ nie ma on żadnej użytecznej funkcji.

name

Zamiast niego dla elementu A lepiej używać atrybutu id="...".

Wstęp

Choć formalnie przestarzałe elementy ani atrybuty nie wchodzą w skład specyfikacji HTML5, to przeglądarki nadal powinny je obsługiwać. Jednak nie należy ich już używać w tworzonych nowych dokumentach.

Przestarzałe elementy

Znaczniki formatujące

Ich funkcję przejęły style CSS.

• BASEFONT
• BIG
• CENTER
• FONT
• STRIKE
• TT

Znaczniki pogarszające dostępność

• FRAME
• FRAMESET
• NOFRAMES

Znaczniki rzadko używane

Rodziły niejasności co do ich pierwotnego przeznaczenia. Ich funkcje z powodzeniem mogą przejąć inne elementy.

• ACRONYM - dla oznaczania wszystkich skrótów powinien być używany znacznik ABBR
• APPLET - w zamian należy używać znacznika OBJECT
• ISINDEX - może zostać zastąpiony przez kontrolki formularzy
• DIR - w zamian należy używać znacznika UL

Przestarzałe znaczniki XHTML5

• NOSCRIPT - nie może być używany w języku XHTML5 w przypadku serwowania dokumentu z typem MIME "application/xhtml+xml"; element został wycofany w składni XML, ponieważ parser HTML odczytuje go jako czysty tekst (inaczej do dokumentu załadowałyby się np. objęte nim arkusze CSS, nawet jeżeli przeglądarka obsługuje skrypty), co nie jest możliwe w języku XML

Przestarzałe atrybuty

W języku HTML5 elementy zostały zaklasyfikowane do wyznaczonych kategorii, które grupują znaczniki o podobnych cechach. Jeden element może należeć do wielu kategorii jednocześnie, ale niektóre znaczniki nie należą do żadnej. Kategorie pozwalają od razu domyślić się, do czego służy wybrany element, jakie znaczniki może w sobie zawierać oraz wewnątrz których elementów powinien się znajdować.

Kategorie zawartości są ze sobą powiązane w następujący sposób (niektóre elementy mogą należeć również do innych kategorii):

Żródło: HTML Standard

Sekcje, nagłówki, zawartość frazowa, zawartość osadzona oraz zawartość interaktywna to wszystko typy zawartości przepływowej. Metadane czasami również są zawartością przepływową.

Metadane i zawartość interaktywna czasami są również zawartością frazową. Zawartość osadzona jest również rodzajem treści frazowej, a czasami jest zawartością interaktywną.

Ponadto jeszcze inne kategorie (patrz tabela poniżej) są używane do specyficznych celów, np. elementy formularzy są określane za pomocą kilku kategorii, aby zdefiniować wspólne wymagania. Niektóre elementy mają unikalne wymagania i nie mieszczą się w żadnej szczególnej kategorii.

Żródło: HTML Standard

<section>...</section>

Sekcja dokumentu lub aplikacji to tematyczna grupa treści, zwykle zawierająca nagłówek. Przykładami sekcji mogą być: rozdziały książki lub pracy badawczej, przełączane zakładki okna dialogowego. Strona domowa może zostać podzielona na przykładowe sekcje: wprowadzenie, lista nowości, informacje kontaktowe. Treść sekcji może być dodatkowo podzielona na podsekcje - poprzez umieszczenie w elementach głównych sekcji dodatkowych znaczników SECTION. W takim przypadku mamy do czynienia z podrozdziałami.

Podział treści na sekcje jest niezwykle przydatny czytelnikowi. Akapity w obszernym tekście ułatwiają odbiór treści. Łatwiej jest oderwać na chwilę wzrok, po przeczytaniu całego akapitu, a potem szybko odnaleźć miejsce, gdzie skończyliśmy czytać. Przede wszystkim jednak każdy akapit zawiera tekst o nieco innej tematyce niż poprzedni. Natomiast sekcje składają się zwykle z akapitów, ale zawierają treść, której tematyka różni się dużo bardziej od poprzedniej sekcji niż tekst w kolejnych akapitach. Dodatkowo sekcje, jeśli rozpoczynają się od tytułów nagłówkowych, umożliwiają hierarchiczny podział treści w postaci rozdziałów, podrozdziałów itd. Koniec rozdziału (sekcji) książki jest dobrym miejsce na zakończenie czytania na dziś i powrócenie do niego następnego dnia.

Dobrym wyznacznikiem, gdzie powinno się wstawić znacznik sekcji, jest zadanie sobie pytania, czy do tego fragmentu strony potencjalnie ktoś chciałby wstawić odsyłacz do etykiety. Dlatego takie sekcje dobrze jest dodatkowo opatrzyć identyfikatorem, do którego będzie się można potem odnosić:

<section id="moja-sekcja">
	<h1>Moja sekcja</h1>
	...
</section>

(...)

Przejdź do: <a href="#moja-sekcja">Moja sekcja</a>

Sekcja nie powinna być używana jako ogólny pojemnik na elementy. Jeżeli istnieje potrzeba, aby zmienić wygląd kilku następujących po sobie elementów, należy do tego użyć znacznika DIV, który w odróżnieniu od SECTION, nie niesie ze sobą żadnego znaczenia semantycznego. Ponadto znacznik SECTION został przeznaczony do tworzenia ogólnych sekcji dokumentu. Lepiej jest używać znaczników, które jak najbardziej szczegółowo opisują znaczenie treści. Dlatego jeżeli to tylko możliwe, zamiast SECTION należy używać znacznika ARTICLE.

Przykład <section>

Poniższy przykład może być częścią większego artykułu, opisującego komputery:

<section>
	<h2>Komputer stacjonarny</h2>
	<p>Najlepszy wybór dla osób, które korzystają z komputera w jednym miejscu. Wymaga stabilnego biurka i wolnej przestrzeni. W zamian oferuje bardzo dobre osiągi sprzętowe i ergonomiczną pracę.</p>
</section>
<section>
	<h2>Laptop</h2>
	<p>Zwany również notebookiem. Przydatny dla osób, które komputera używają głównie do pisania, a przy tym czasami pracują w różnych miejscach albo nie mają zbyt dużo wolnego miejsca w pomieszczeniu. Zapewnia przyzwoite osiągi sprzętowe.</p>
</section>

Tak przedstawione bloki tekstu są raczej zbyt obszerne, aby wstawić je w formie listy opisowej. Opisują nie tylko definicję terminów, ale również typowe sposoby użytkowania oraz główne zalety.
Z drugiej strony opisy są raczej za mało kompletne, aby zamiast znaczników SECTION użyć ARTICLE. Tak wyrwane z kontekstu sekcje, samodzielnie nie stanowiłyby raczej zbyt wartościowej treści.
Widzimy jednak, że bez wątpienia przykład ten grupuje tematycznie odmienne bloki tekstu, które przy tym zawierają nawet jawne nagłówki. Dlatego użycie tutaj znacznika DIV nie byłoby prawidłowe.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<section>	5 2010-05-25	4 2011-03-22	12 2015-07-29	11.1 2011-04-12	5 2010-06-07

<article>...</article>

Artykuł reprezentuje samodzielną część dokumentu lub aplikacji, która potencjalnie mogłaby być opublikowana niezależnie od pozostałej treści na stronie (np. w kanale RSS). Może to być np.: wiadomość wysłana na forum dyskusyjnym, wpis na blogu, komentarz użytkownika pod artykułem, interaktywny widget. W pojedynczym dokumencie może być więcej niż jeden element ARTICLE. Znaczniki te można również zagnieżdżać (umieszczać jeden w drugim). W takim przypadku oznacza to, że tematyka treści elementów podrzędnych (wewnętrznych) jest w istotny sposób powiązana z treścią, którą obejmuje znacznik nadrzędny (zewnętrzny). Na przykład nadrzędnym artykułem może być wpis na blogu, a podrzędnymi - komentarze użytkowników.

Artykuł może również zawierać wewnętrzne sekcje i tak jak one często ma na początku określony nagłówek (zobacz również: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). Wstawienie na początku znacznika ARTICLE tytułu nagłówkowego H1-H6 nie jest jednak wymagane. Na przykład często przy dodawaniu komentarzy użytkowników pod artykułem na stronie nie wypełnia się tytułu komentarza.

Jeśli nie jesteśmy pewni, czy na stronie powinniśmy wstawić znacznik ARTICLE czy SECTION, trzeba sobie odpowiedzieć na pytanie, czy ta część treści nie utraci swojego pierwotnego sensu, jeśli wyrwiemy ją z kontekstu pozostałego tekstu na stronie oraz czy samodzielnie byłaby wystarczająco wartościowa dla czytelnika. Jeżeli tak, to raczej powinniśmy wykorzystać znacznik ARTICLE. Na użycie tego elementu może wskazywać również sytuacja, kiedy objętą nim część dokumentu moglibyśmy swobodnie opublikować w swoim kanale RSS (nawet jeśli formalnie tego nie robimy).

Element ARTICLE nie nadaje się do oznaczania informacji o autorstwie artykułu. Takie dane powinny być objęte znacznikiem ADDRESS (o ile zawierają informacje kontaktowe) i najczęściej wstawione w stopce artykułu (element FOOTER).

Przykład <article>

Najlepszym sposobem oznaczenia w HTML5 wpisu na blogu wraz z komentarzami użytkowników, mogłoby być:

<article>
	<h1>Mój pierwszy wpis na blogu</h1>
	<p>Stało się. Postanowiłem założyć własnego bloga. Nie wiem, czy będę miał czas, aby regularnie go aktualizować, ale zrobię co w mojej mocy.</p>
	<section>
		<h2>Komentarze</h2>
		<article>
			<p>Życzę powodzenia.</p>
		</article>
		<article>
			<p>Nareszcie. Bardzo się cieszę.</p>
		</article>
	</section>
</article>

Wpis na blogu jak najbardziej mógłby być opublikowany w kanale RSS serwisu. Dlatego został oznaczony elementem ARTICLE. Również każdy pojedynczy komentarz użytkowników, dodany pod tym postem, nadaje się do kanału RSS (być może innego niż sam artykuł).
Natomiast cała lista komentarzy nie pasuje do ewentualnego kanału RSS, ponieważ taki kanał sam stanowi już listę. Z drugiej strony widzimy, że grupuje ona na stronie ewidentnie powiązane ze sobą tematycznie elementy - komentarze do tego samego wpisu na blogu. Dlatego właśnie została ona oznaczona znacznikiem SECTION, a nie ARTICLE ani tym bardziej DIV.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<article>	5 2010-05-25	4 2011-03-22	12 2015-07-29	11.1 2011-04-12	5 2010-06-07

<aside>...</aside>

Wstawka reprezentuje sekcję na stronie, która jest tylko nieznacznie powiązana tematycznie z treścią elementu, w którym się znajduje. Jednocześnie gdybyśmy usunęli taką sekcję z dokumentu, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Typowe przeznaczenie: cytaty umieszczone w treści artykułu w postaci osobno wyróżnionych bloków, bannery reklamowe, grupy linków nawigacyjnych.

Element ten nie nadaje się do oznaczania uwag na marginesie. Co prawda bez nich sam artykuł nie utraci swojego sensu, ale uwagi takie tracą sens, gdy zostaną wyrwane z kontekstu.

Przykład <aside>

W artykule na temat komputerów możemy umieścić wstawkę dotyczącą np. laptopów. Bez tego dodatku kompletność artykułu nie ucierpi, a jednocześnie sama wstawka może być rozpatrywana zupełnie oddzielnie - w szczególności wstawiona do innego artykułu.

<article>
	<h1>Komputery</h1>
	<p>W dzisiejszych czasach komputery towarzyszą człowiekowi na każdym kroku. Używamy ich w codziennej pracy, jak również szukając odprężenia po trudnym dniu. Sterują zarówno naszymi samochodami, jak i statkami kosmicznymi.</p>
	<aside>
		<h1>Laptop</h1>
		<p>Ten przenośny rodzaj komputera, ze względu na liczne zalety, szybko przyjął się wśród użytkowników.</p>
	</aside>
<article>

Należy tutaj podkreślić, że powyższy artykuł nie opisuje rodzajów komputerów, a jedynie podaje informacje ogólnie o tym urządzeniu elektronicznym. Dlatego wstawka o laptopach jest tutaj jak najbardziej uprawniona. W przeciwnym razie zamiast znacznika ASIDE prawdopodobnie lepszym pomysłem byłoby użycie SECTION.

Przykład dodania do artykułu wstawki z dodatkowym cytatem:

<article>
	<h1>Szczególna teoria względności</h1>
	<p>Ta teoria fizyczna, stworzona w 1905 roku, zrewolucjonizowała sposób pojmowania otaczającej nas rzeczywistości. Zgodnie z nią czas nie musi płynąć liniowo, ale zależy od względnej prędkości obserwatora. Twórcą teorii względności jest Albert Einstein.</p>
	<aside>
		<q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota, chociaż co do pierwszego nie mam pewności.</q>
	</aside>
	<p>Albert Einstein był jednym z najwybitniejszych fizyków-teoretyków. Laureat nagrody Nobla.</p>
</article>

Warto zwrócić uwagę, że gdyby treść artykułu była sformułowana w inny sposób, usunięcie z niej cytatu mogłoby nie być możliwe bez utraty wewnętrznej kompletności tekstu. W takim przypadku użycie znacznika ASIDE nie byłoby właściwe:

<article>
	<h1>Szczególna teoria względności</h1>
	<p>Ta teoria fizyczna, stworzona w 1905 roku, zrewolucjonizowała sposób pojmowania otaczającej nas rzeczywistości. Zgodnie z nią czas nie musi płynąć liniowo, ale zależy od względnej prędkości obserwatora. Twórcą teorii względności jest Albert Einstein. Jedna z jego słynnych wypowiedzi brzmi:
		<q>Dwie rzeczy nie mają granic: wszechświat i ludzka głupota, chociaż co do pierwszego nie mam pewności.</q>
	</p>
	<p>Albert Einstein był jednym z najwybitniejszych fizyków-teoretyków. Laureat nagrody Nobla.</p>
</article>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<aside>	5 2010-05-25	4 2011-03-22	12 2015-07-29	11.1 2011-04-12	5 2010-06-07

• Podtytuł pierwszego poziomu (główny):

  <hgroup>
  	<h1>tytuł</h1>
  	<p>podtytuł</p>
  </hgroup>

• Podtytuł drugiego poziomu (sekcji):

  <hgroup>
  	<h2>tytuł</h2>
  	<p>podtytuł</p>
  </hgroup>

• Podytuł trzeciego poziomu (podsekcji):

  <hgroup>
  	<h3>tytuł</h3>
  	<p>podtytuł</p>
  </hgroup>

• Podtytuł czwartego poziomu:

  <hgroup>
  	<h4>tytuł</h4>
  	<p>podtytuł</p>
  </hgroup>

• Podtytuł piątego poziomu:

  <hgroup>
  	<h5>tytuł</h5>
  	<p>podtytuł</p>
  </hgroup>

• Podtytuł szóstego poziomu (najniższej podsekcji):

  <hgroup>
  	<h6>tytuł</h6>
  	<p>podtytuł</p>
  </hgroup>

Służy do definiowania nagłówków dla sekcji (ARTICLE, ASIDE NAV, SECTION), poprzez grupowanie tytułu nagłówkego z jednym lub więcej akapitem zawierającym podtytuł, tytuł alternatywny albo slogan (krótka, łatwa do zapamiętania fraza).

HTML 4.01 tak naprawdę nie dawał możliwości definiowania podtytułów. Twórcy stron musieli sobie z tym jakoś radzić, np. wstawiając zamiast tego znacznik standardowego akapitu i stylizując go odpowiednio za pomocą CSS. Taka konstrukcja jednak nie niosła ze sobą żadnego semantycznego znaczenia. HTML5 uzupełnia ten brak.

Przykład <hgroup>

W poniżej zamieszczonym przykładzie, znacznik P stanowi podtytuł:

<article>
	<hgroup>
		<h1>Hobbit</h1>
		<p>czyli tam i z powrotem</p>
	</hgroup>
	...
</article>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<hgroup>	5 2010-05-25	4 2011-03-22	12 2015-07-29	11.1 2011-04-12	5 2010-06-07

<header>...</header>

Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji (H1, H2, H3, H4, H5, H6 albo HGROUP), ale nie jest to absolutnie konieczne. Może zawierać również: spis treści, formularz wyszukiwania, logo.

Sam element HEADER nie stanowi nagłówka sekcji. Może to być nieco mylące, ponieważ z kolei element FOOTER stanowi stopkę sekcji. Elementami definiującymi nagłówek sekcji są: H1, H2, H3, H4, H5, H6. W szczególności znacznik HEADER nie tworzy nowej sekcji w dokumencie (zobacz: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5").

Przykład <header>

<header>
	<p>Witam na stronie...</p>
	<h1>Kurs języka HTML</h1>
</header>

Skoro znacznik HEADER nie tworzy nowej sekcji, to dla tak przedstawionego dokumentu:

<header>
	<h1>Sekcja 1</h1>
	<p>Akapit sekcji 1</p>
	<h2>Podsekcja 1.1</h2>
</header>
<p>Akapit podsekcji 1.1</p>
<h2>Podsekcja 1.2</h2>
<p>Akapit podsekcji 1.2</p>

...automatyczny spis treści będzie wyglądał następująco:

1. Sekcja 1
   (zawiera akapit "Akapit sekcji 1")
   1. Podsekcja 1.1
      (zawiera akapit: "Akapit podsekcji 1.1")
   2. Podsekcja 1.2
      (zawiera akapit: "Akapit podsekcji 1.2")

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<header>	5 2010-05-25	4 2011-03-22	12 2015-07-29	11.1 2011-04-12	5 2010-06-07

<footer>...</footer>

Stanowi stopkę dla zawierającego ją elementu sekcji (ARTICLE, ASIDE NAV, SECTION). Stopka przechowuje zwykle informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp.

Mimo z pozoru analogicznej znaczeniowo nazwy, element FOOTER, inaczej niż HEADER, stanowi stopkę sekcji, podczas gdy ten drugi nie oznacza nagłówka sekcji. Jednak znacznik FOOTER sam nie tworzy nowej sekcji w dokumencie.

Co ciekawe mimo swojej nazwy, stopki nie musimy wcale umieszczać na końcu sekcji. Choć raczej nie jest to typowe zastosowanie, poprawnym będzie również wstawienie znacznika FOOTER nawet na samym początku sekcji. A jeśli umieścimy stopkę w ogóle poza znacznikami sekcji, będzie się ona odnosić do strony jako całości.

Przykład <footer>

<article>
	<h1>Mój artykuł</h1>
	<p>To jest mój artykuł...</p>
	<footer>
		Autor: <address>Jan Kowalski (jan.kowalski@example.com)</address>
		<p>wszelkie prawa zastrzeżone</p>
	</footer>
</article>

Warto przy okazji zauważyć, że gdyby w informacjach o autorze nie podano danych kontaktowych (tutaj adresu e-mail), nie należy używać znacznika ADDRESS.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<footer>	5 2010-05-25	4 2011-03-22	12 2015-07-29	11.1 2011-04-12	5 2010-06-07

<nav>...</nav>

Reprezentuje sekcję strony, która zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem NAV, zwykle bardziej właściwy do tego będzie element FOOTER.

Znacznik NAV może być niezwykle przydatny dla syntezatorów mowy, używanych przez osoby niewidome. Syntezator może udostępnić możliwość pominięcia linków nawigacyjnych, gdy użytkownik chce się zapoznać tylko z główną treścią dokumentu. Może też od razu udostępnić użytkownikowi główne menu nawigacyjne, bez niepotrzebnego przedzierania się przez mniej istotne treści, które w kodzie źródłowym dokumentu znajdują się przed nim.

Przykład <nav>

Poniżej przedstawiony przykład zawiera dwie sekcje nawigacyjne: pierwsza dla całego serwisu, a druga w obrębie artykułu na stronie.

<nav>
	<ul>
	<li><a href="index.html">Strona główna</a></li>
	<li><a href="contents.html">Spis treści</a></li>
	</ul>
</nav>
<article>
	<h1>Mój artykuł</h1>
	<nav>
		<ul>
		<li><a href="#sec1">Rozdział 1</a></li>
		<li><a href="#sec2">Rozdział 2</a></li>
		</ul>
	</nav>
	<h2 id="sec1">Rozdział 1</h2>
	<p>Treść rozdział 1...</p>
	<h2 id="sec2">Rozdział 2</h2>
	<p>Treść rozdział 2...</p>
</article>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<nav>	5 2010-05-25	4 2011-03-22	12 2015-07-29	11.1 2011-04-12	5 2010-06-07

Bardzo dawno temu, gdy nie było innej możliwości, do tworzenia szkieletu strony powszechnie używano tabel. Ale po wprowadzeniu języka CSS, takie podejście zaczęto uznawać za bardzo poważny błąd semantyczny. Mając do dyspozycji CSS i HTML 4.01, jedyną możliwością zbudowania prawidłowego szablonu strony było wykorzystanie bloków DIV. Sekcje szkieletu zwykle były potem formatowane przy pomocy CSS, a więc takie użycie znaczników było poprawne. W języku HTML5 zostały jednak wprowadzone zupełnie nowe znaczniki, dzięki którym możemy zbudować szablon strony w sposób jeszcze bardziej semantyczny. Spróbujmy to wykonać, przekształcając kod podany w rozdziale: Szablon strony na DIV-ach.

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>...</title>
	</head>
	<body>
		<div id="top">
			<header id="NAGLOWEK">Nagłówek szablonu</heade>
			<nav id="MENU">Menu nawigacyjne</nav>
			<aside id="INFORMACJE">Dodatkowe informacje</aside>
			<article id="TRESC">Treść strony</article>
			<footer id="STOPKA">Stopka serwisu</footer>
		</div>
	</body>
</html>

Znaczenie wyróżnionych fragmentów kodu zostało objaśnione w rozdziale: Szablon strony na DIV-ach. Tam również znajdziesz praktyczne przykłady sposobów układania poszczególnych sekcji szkieletu na stronie.

Objęcie całego szkieletu elementem DIV, jest poprawne, ponieważ w tym miejscu ma on na celu przygotowanie pojemnika, koniecznego do zmiany wyglądu całej strony (przy pomocy CSS). Właśnie do tego został przeznaczony ten element. Zwykle objęcie całej zawartości ciała dokumentu znacznikiem ARTICLE, nie jest najlepszym rozwiązaniem. Został on przewidziany po to, aby zaznaczyć, że objęta nim treść może być opublikowana oddzielnie. Ale przecież tutaj nie mielibyśmy do czynienia z fragmentem dokumentu, lecz jego całością. Podobnie wstawienie w tym miejscu znacznika SECTION raczej wydaje się bezcelowe, skoro element BODY odnosi się już do dokumentu jako całości.

Załącznik <figure>

<figure>...</figure>

Załącznik definiuje samodzielną część dokumentu, do której następują odwołania z głównej treści jako do pojedynczej jednostki. Może służyć do oznaczania: ilustracji, diagramów, zdjęć, wycinków kodu źródłowego itp. W obszernych opracowaniach naukowych zwykle podaje się spis wszystkich ilustracji bądź diagramów, występujących w całej pracy.

O tym, czy dany element nadaje się do oznaczenia go jako załącznik, najlepiej zdecydować, zadając sobie pytanie: czy moglibyśmy go przenieść na inną podstronę serwisu bez utraty spójności głównego tekstu dokumentu? Bardzo podobne przeznaczenie ma element ASIDE, jednak w odróżnieniu od FIGURE, jego zawartość jest tylko nieznacznie powiązana tematycznie z główną treścią. Na dobrą sprawę taką wstawkę (ASIDE) moglibyśmy zupełnie usunąć z witryny, podczas gdy załącznik (FIGURE) możemy co najwyżej przenieść na inną podstronę, bo inaczej dokument utraciłby spójność.

Przykład <figure>

<p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu. Na <a href="#listing1">przykładzie 1</a> możemy się przekonać, jak to zrobić.</p>
<figure id="listing1">
	<pre><code>
		&lt;meta charset="UTF-8"&gt;
	</code></pre>
</figure>
<p>Krótszą formę ma również deklaracja typu dokumentu.</p>

Warto zwrócić uwagę, że gdyby tekst akapitu był sformułowany w inny sposób, użycie znacznika FIGURE mogłoby być raczej niewłaściwe:

<p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu. Aby to zrobić, wystarczy posłużyć się następującym kodem źródłowym:</p>
<pre><code>
	&lt;meta charset="UTF-8"&gt;
</code></pre>
<p>Krótszą formę ma również deklaracja typu dokumentu.</p>

Gdybyśmy w tym przypadku usunęli fragment przykładowego kodu źródłowego, tekst utraciłby spójność.

Podpis załącznika <figcaption>

<figure>
	<figcaption>...</figcaption>
</figure>

Dodaje podpis do załącznika. Może on być umieszczony na początku albo na końcu zawartości. Tego typu podpisy są powszechne np. w różnego rodzaju opracowaniach naukowych, gdzie każda ilustracja bądź wykres są zatytułowane i zwykle oznaczone kolejnym numerem. W takiej pracy można często znaleźć spis wszystkich tego typu załączników. Znajdują się w nim właśnie załączone wcześniej podpisy.

Przykład <figure, figcaption>

<figure>
	<img src="42.jpg" alt="Liczba 42">
	<figcaption>Sens życia, wszechświata i w ogóle ;-)</figcaption>
</figure>

<figure id="listing1">
	<figcaption>Przykład 1. Deklaracja strony kodowej w HTML5</figcaption>
	<pre><code>
		&lt;meta charset="UTF-8"&gt;
	</code></pre>
</figure>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<figure>	8 2010-12-02	4 2011-03-22	12 2015-07-29	11 2010-12-16	5.1 2011-07-20
<figcaption>	8 2010-12-02	4 2011-03-22	12 2015-07-29	11 2010-12-16	5.1 2011-07-20

<main>...</main>

Strony internetowe nie są zwyczajnymi dokumentami elektronicznymi. Z racji na naturę hipertekstu w każdym serwisie WWW możemy wyznaczyć menu nawigacyjne, nagłówek witryny zwykle z osadzonym logo, stopkę zawierającą np. informacje o prawach autorskich. Wszystkie te elementy niezwykle ułatwiają przeglądanie witryny. Jednak użytkownicy odwiedzają stronę przede wszystkim nie po to, żeby oglądać menu czy logo. Głównym celem jest dotarcie do treści, która jest zawarta w serwisie. Taka treść może ginąć w natłoku wszystkich elementów pomocniczych witryny. Zwłaszcza wyszukiwarki i czytniki ekranowe mogą mieć problemy z prawidłowym wyznaczeniem tej części dokumentu HTML, która zawiera główną treść, ze względu na którą użytkownik zdecydował się odwiedzić serwis.

Właśnie w tym celu został stworzony element MAIN. Powinniśmy nim oznaczyć główną treść każdego dokumentu. Zwykle można ją rozpoznać po tym, że jest bezpośrednio związana z tytułem strony. Znacznikiem MAIN nie należy obejmować żadnych stałych elementów, które powtarzają się w całym serwisie: menu nawigacyjnego, informacji o prawach autorskich, logo serwisu, bannerów, formularzy wyszukiwania itp. Znacznik ten może jednak obejmować linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach.

W pojedynczym dokumencie nie można umieścić więcej niż jednego elementu MAIN, chyba że zawiera atrybut hidden. Element MAIN nie może być również umieszczony - bezpośrednio lub pośrednio - wewnątrz znaczników innych niż: HTML, BODY, DIV, FORM.

Przykład <main>

<!doctype html>
<html lang="pl">
	<head>
		<meta charset="utf-8">
		<title>Matrix - Serwis kinomaniaków</title>
	<head>
	<body>
		<header>
			Serwis kinomaniaków
			<nav>
				<ul>
					<li><a>Matrix</a></li>
					<li><a href="incepcja.html">Incepcja</a></li>
					<li><a href="trzynaste-pietro.html">Trzynaste piętro</a></li>
				</ul>
			</nav>
		</header>

		<main>
			<h1>Matrix</h1>

			<nav>
				<ul>
					<li><a href="#czym-jest-matrix">Czym jest Matrix?</a></li>
					<li><a href="#matrix-reaktywacja">Matrix: Reaktywacja</a></li>
					<li><a href="#matrix-rewolucje">Matrix: Rewolucje</a></li>
				</ul>
			</nav>

			<h2 id="czym-jest-matrix">Czym jest Matrix?</h2>
			<p>Pierwsza część trylogii science fiction.</p>

			<h2 id="matrix-reaktywacja">Matrix: Reaktywacja</h2>
			<p>Ciąg dalszy zmagań Neo, Trinity i Morfeusza z inteligentnymi maszynami, zagrażającymi całej ludzkości.</p>

			<h2 id="matrix-rewolucje">Matrix: Rewolucje</h2>
			<p>Neo kontra Agent Smith. Syjon - ostatnia enklawa ludzkiej cywilizacji - zagrożony zniszczeniem.</p>
		</main>

		<footer>Wszystkie prawa zastrzeżone</footer>
	</body>
</html>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<main>	26 2013-03-26	21 2013-05-14	12 2015-07-29	16 2013-08-27	7 2013-10-22

<search>...</search>

Element ten pozwala semantycznie wskazać, że objęty nim fragment kodu HTML stanowi formularz wyszukiwania. Może to być na przykład:

• formularz wyszukiwania w aktualnym serwisie
• mechanizm filtrowania danych w bieżącym dokumencie
• wyszukiwarka w całym Internecie

Elementem tym powinien być objęty tylko sam formularz, a nie wyniki wyszukiwania.

Znacznik SEARCH nie tworzy samoczynnie wyszukiwarki, a jedynie wskazuje miejsce na stronie, gdzie się znajduje jej formularz. Do stworzenia wyszukiwarki można się posłużyć językiem takim jak PHP (wyszukiwarka), JavaScript (filtrowanie) albo skorzystać z gotowych formularzy wyszukiwarek internetowych.

Przykład <search>

<search>
	<form action="search.php">
		<input type="search" name="q">
		<button type="submit">Szukaj</button>
	</form>
</search>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<search>	118 2023-10-10	118 2023-09-26	118 2023-10-13	104 2023-10-23	17 2023-09-18

<mark>...</mark>

Zaznacza lub uwydatnia tekst w jednym dokumencie, w celu odwołania się do niego w innym kontekście.

Uwydatnienia możemy użyć w przytaczanym cytacie. W ten sposób wskazujemy, że chcemy zwrócić szczególną uwagę czytelnika na oznaczony w ten sposób fragment i właśnie po to przytaczamy cały cytat. Mogą to być np. fragmenty cytatu, z którymi się nie zgadzamy i dalej w artykule przedstawiamy nasze własne argumenty. Może to być również fragment, który jest dla nas szczególnie wartościowy lub naszym zdaniem zawiera główne przesłanie całego cytatu.

Uwydatniając tekst na stronie, który nie jest cytatem, możemy przekazać użytkownikowi, że taki fragment może być dla niego szczególnie przydatny, biorąc pod uwagę czynności, które właśnie podjął. Na przykład jeżeli użytkownik właśnie użył wyszukiwarki w serwisie, w wynikach wyszukiwania możemy uwydatnić słowa, których szukał.

Należy wyraźnie odróżnić znaczenie uwydatnienia realizowanego przez znacznik MARK od EM i STRONG. Element MARK uwydatnia tekst tylko w określonym kontekście (w innym może już nie być zaznaczony). Natomiast znacznik EM (podkreślenie akcentu) oraz STRONG (wysoka ważność) oznaczają tekst tak samo w każdym kontekście.

Przykład <mark>

<blockquote>
	<p><mark>Litwo</mark>! Ojczyzno moja! ty jesteś jak zdrowie.<br>
	Ile cię trzeba cenić, ten tylko się dowie,<br>
	Kto cię stracił. Dziś piękność twą w całej ozdobie<br>
	Widzę i opisuję, bo tęsknię po tobie.</p>
</blockquote>
<p>Adam Mickiewicz, choć pisze o Litwie, tak naprawdę ma na myśli Polskę. W ten sposób chciał ominąć ówcześnie działającą cenzurę.</p>

Tak mogłyby wyglądać wyniki wyszukiwania słowa HTML:

<article>
	<h1>Kurs <mark>HTML</mark> - strona WWW za darmo</h1>
	<p>Kurs <mark>HTML</mark>, kurs XHTML i kurs CSS dla zupełnie początkujących i dla zaawansowanych. Napisz własną stronę WWW nawet w ciągu jednego dnia i wprowadź ją do Internetu za darmo.</p>
</article>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<mark>	7 2010-10-19	4 2011-03-22	12 2015-07-29	11 2010-12-16	5.1 2011-07-20

Data i czas <time>

<time>data/czas</time>
<time datetime="data/czas">...</time>

Na stronach internetowych bardzo często spotyka się różnorodne daty czy oznaczenia czasu: publikacja artykułu, wysłanie komentarza, zaplanowane wydarzenia i ich godzinowy rozkład dnia. Takie dane mogłyby zostać wykorzystane np. do automatycznego tworzenia kalendarzy. Problem w tym, że zwykle są one podane w postaci czytelnej dla użytkowników, a nie dla maszyn. Trudno się spodziewać, że automat będzie w stanie poprawnie zinterpretować tekstową nazwę miesiąca w każdym języku mówionym świata. Poza tym w różnych krajach istnieją odmienne konwencje zapisu kolejności poszczególnych części daty (może to być najpierw dzień, a na końcu rok lub na odwrót), a także separatorów poszczególnych członów daty.

Aby przekazać wszelkim automatom, że wybrany tekst na stronie jest datą lub/i czasem, wystarczy oznaczyć go za pomocą znacznika TIME. Trzeba jednak pamiętać, że w przypadku prostego oznaczenia <time>...</time> zawartość znacznika musi być zapisana w standardowym formacie, bo inaczej nie będzie mogła być poprawnie zinterpretowana. Natomiast jeżeli chcemy użytkownikom prezentować datę w przyjazny dla nich sposób (np. z tekstową nazwą miesiąca), to tę samą datę ale już w formacie ustandaryzowanym należy podać w atrybucie datetime="...".

Przykład <time datetime>

<time datetime="1980-01-01 09:00">1 stycznia 1980, godz. 9.00</time>

Format daty i czasu

miesiąc

2011-11

data

2011-11-12

11-12 (każdy 12 listopada)

czas

14:54

14:54:39

14:54:39.92922

data i czas lokalny

2011-11-12T14:54

2011-11-12T14:54:39

2011-11-12T14:54:39.92922

2011-11-12 14:54

2011-11-12 14:54:39

2011-11-12 14:54:39.92922

strefa czasowa

Z, +0000, +00:00 (czas UTC)

+0100, +01:00 (czas zimowy w Polsce)

+0200, +02:00 (czas letni w Polsce)

-0800, -08:00

data i czas ze strefą czasową

2011-11-12T14:54Z

2011-11-12T14:54:39Z

2011-11-12T14:54:39.92922Z

2011-11-12T14:54+0000

2011-11-12T14:54:39+0000

2011-11-12T14:54:39.92922+0000

2011-11-12T14:54+00:00

2011-11-12T14:54:39+00:00

2011-11-12T14:54:39.92922+00:00

2011-11-12T06:54-0800

2011-11-12T06:54:39-0800

2011-11-12T06:54:39.92922-0800

2011-11-12T06:54-08:00

2011-11-12T06:54:39-08:00

2011-11-12T06:54:39.92922-08:00

2011-11-12 14:54Z

2011-11-12 14:54:39Z

2011-11-12 14:54:39.92922Z

2011-11-12 14:54+0000

2011-11-12 14:54:39+0000

2011-11-12 14:54:39.92922+0000

2011-11-12 14:54+00:00

2011-11-12 14:54:39+00:00

2011-11-12 14:54:39.92922+00:00

2011-11-12 06:54-0800

2011-11-12 06:54:39-0800

2011-11-12 06:54:39.92922-0800

2011-11-12 06:54-08:00

2011-11-12 06:54:39-08:00

2011-11-12 06:54:39.92922-08:00

tydzień

2011-W46 (46-ty tydzień 2011 roku)

rok

2011

czas trwania

PT4H18M3S (4 godziny 18 minut 3 sekundy)

4h 18m 3s

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<time>	62 2017-10-17	22 2013-06-25	14 2016-08-02	49 2017-11-08	7 2013-10-22
<time datetime>	62 2017-10-17	22 2013-06-25	14 2016-08-02	49 2017-11-08	7 2013-10-22

<wbr>

Normalnie przeglądarki zawijają długie linijki tekstu, jeśli nie mieszczą się w szerokości okna. Jednak w niektórych warunkach przełamanie tekstu może nie być możliwe. Wtedy najczęściej pojawi się poziomy suwak do przewijania strony. Z takim przypadkiem możemy mieć do czynienia wewnątrz znacznika PRE, gdy zablokujemy zawijanie tekstu przy pomocy CSS albo gdy w długiej linijce nie umieścimy żadnego białego znaku (np. spacji) ani innego, po którym normalnie może nastąpić przełamanie wiersza. Znacznik WBR daje przeglądarce możliwość przełamania wiersza w tym miejscu, jeśli tekst nie zmieści się w założonej szerokość. Od znacznika BR różni się tym, że nie wymusza przełamania wiersza, jeśli nie ma takiej potrzeby.

Po co zatem w ogóle blokować zawijanie linijek, żeby potem to odblokowywać za pomocą elementu WBR? W tradycyjnym akapicie tekstu nie mamy żadnej kontroli, w jaki sposób przeglądarka zawinie tekst na ekranie. Najczęściej taki algorytm w zupełności nam odpowiada. Czasem jednak, w przypadku bardzo specyficznych tekstów (np. fragmentów kodu źródłowego), to my chcemy zdecydować, w jaki sposób zostanie zawinięty tekst. Moglibyśmy oczywiście zamiast WBR użyć BR, ale wtedy znowu być może przełamiemy linię za wcześnie - np. gdy użytkownik posiada monitor panoramiczny, na którym zmieściłoby się znacznie więcej treści w poziomie. W takich przypadkach korzystne może być użycie znacznika PRE w połączeniu z elementami WBR.

Przykład <wbr>

<pre>
	&lt;!doctype html&gt;
	&lt;html&gt;
	&lt;head&gt;<wbr>&lt;title&gt;...&lt;/title&gt;<wbr>&lt;/head&gt;
	&lt;body&gt;<wbr>...<wbr>&lt;/body&gt;
	&lt;/html&gt;	
</pre>

<p>Popsuła<wbr>mi<wbr>się<wbr>spacja</p>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<wbr>	1 2008-12-11	1 2004-11-09	12 2015-07-29	11.6 2011-12-06	4 2009-06-08

Wstęp

Znamy już sposób wstawienia obrazka na stronę za pomocą znacznika IMG. Niestety istnieją przypadki, kiedy jest on niewystarczający. Najczęściej ma to związek z urządzeniami mobilnymi. Trudno spodziewać się, że to samo zdjęcie będzie równie dobrze wyglądać zarówno na dużym ekranie laptopa i na niewielkim smartfonie. Ponadto urządzenia mobilne są również częściej narażone na niestabilną prędkość transferu danych. Właśnie z tych powodów do specyfikacji HTML5 wprowadzono nowy element: PICTURE.

Dopasowanie formatu <picture, source type>

<picture>
	<source srcset="lokalizacja pliku w formacie 1" type="format 1">
	<source srcset="lokalizacja pliku w formacie 2" type="format 2">
	(...)
	<img src="lokalizacja pliku w formacie podstawowym" alt="Tekst alternatywny">
</picture>

Na urządzeniach mobilnych zwykle duże znaczenie ma ilość pobieranych danych przez sieć. Użytkownicy smatfonów często płacą za każdy kilobajt transferu. A nawet jeśli posiadają abonament z wysokim limitem danych, to i tak może się zdarzyć, że znajdą się akurat w miejscu o słabym zasięgu sieci. Wtedy wyświetlenie strony z ciężkimi zdjęciami może trwać bardzo długo.

Rozwiązaniem tego problemu mogłoby być używanie nowoczesnych formatów zdjęć - np. WEBP lub JXR - które zapewniają lepszy stopień kompresji danych. Dzięki temu pliki w nich zapisane mogą być nawet kilkukrotnie lżejsze niż np. w tradycyjnym formacie JPG. Niestety starsze przeglądarki nie obsługują takich formatów, a wtedy na stronie zamiast pożądanej ilustracji użytkownik zobaczy zapewne ikonę zastępczą informującą o uszkodzonym pliku graficznym. Możemy jednak przygotować wiele formatów zdjęcia i dać przeglądarce możliwość wyboru. Każdy element SOURCE umieszczony wewnątrz znacznika PICTURE może mieć nadany inny atrybut type="...", dzięki któremu przeglądarka sama wybierze sobie pierwszy z kolei, który obsługuje.

Na końcu wewnątrz znacznika PICTURE zawsze należy wstawić element IMG w najpowszechniej obsługiwanym formacie graficznym (np. JPEG). Jeśli tego nie zrobimy, w starszych przeglądarkach nie zostanie wyświetlony żaden obrazek.

Przykład <picture, source type>

<picture>
	<source srcset="zdjecie.webp" type="image/webp">
	<source srcset="zdjecie.jxr" type="image/vnd.ms-photo">
	<img src="zdjecie.jpg" alt="Przykładowe zdjęcie">
</picture>

Jeśli przeglądarka nie będzie obsługiwać żadnego z nowoczesnych formatów graficznych, wtedy na ekranie zostanie wyświetlony obrazek: "zdjecie.jpg".

Dopasowanie kadru <picture, source media>

<picture>
	<source srcset="lokalizacja pliku 1" media="zapytanie mediów 1">
	<source srcset="lokalizacja pliku 2" media="zapytanie mediów 2">
	(...)
	<img src="lokalizacja pliku podstawowego" alt="Tekst alternatywny">
</picture>

Niektóre ilustracje umieszczone na stronie mogą być zbyt duże, aby zmieściły się na małym ekranie urządzenia mobilnego. Teoretycznie moglibyśmy sobie z tym poradzić w bardzo prosty sposób za pomocą CSS:

img {
	max-width: 100%;
	height: auto;
}

Wstawienie takiej reguły w zewnętrznym lub wewnętrznym arkuszu stylów spowoduje, że żaden obrazek nie będzie szerszy niż dostępne miejsce na stronie. Grafiki mniejsze pozostaną bez zmian, natomiast większe będą przeskalowane w dół. Problem w tym, że nie zawsze jest to dobre rozwiązanie. Pomijając już fakt, że mimo przeskalowania zdjęcia przeglądarka i tak będzie musiała pobrać przez sieć ciężki plik w pełnym rozmiarze, to czasami na małym ekranie smartfona po prostu niewiele będzie widać na takiej ilustracji.

Lepiej do tego podejść w inny sposób. W wersji dla standardowych komputerów możemy pokusić się o zamieszczenie na stronie fotografii np. z całą rozległą panoramą, na której sylwetki ludzkie będą względnie niewielkie, ale nadal rozpoznawalne - co podkreśli bezkres fotografowanego krajobrazu. Jednak na smartfonie bardziej korzystne może być wykadrowanie zdjęcia tak, aby dało się rozpoznać twarze widocznych na nim osób. Wtedy piękne widoki w tle mogą nie być takie kluczowe, więc możemy je wyciąć. Każdy element SOURCE umieszczony wewnątrz znacznika PICTURE może mieć nadany inny atrybut media="...", dzięki któremu przeglądarka sama wybierze sobie pierwszy z kolei, który będzie najbardziej odpowiedni. O tym jak określać wartości tego atrybutu możesz dowiedzieć się z rozdziału: Zapytania mediów.

Na końcu wewnątrz znacznika PICTURE zawsze należy wstawić element IMG. Jeśli tego nie zrobimy, w starszych przeglądarkach nie zostanie wyświetlony żaden obrazek.

Przykład <picture, source media>

<picture>
	<source srcset="duze-zdjecie.jpg" media="(min-width: 1024px)">
	<source srcset="srednie-zdjecie.jpg" media="(min-width: 400px)">
	<img src="male-zdjecie.jpg" alt="Przykładowe zdjęcie">
</picture>

Na urządzeniach z ekranem o szerokości co najmniej 1024 pikseli zostanie wyświetlony obrazek: "duze-zdjecie.jpg". Jeśli pozioma rozdzielczość ekranu będzie się zawierać w przedziale od 400 do 1023 pikseli, przeglądarka wyświetli: "srednie-zdjecie.jpg". W przeciwnym razie zostanie pokazany obrazek: "male-zdjecie.jpg".

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<picture>	38 2014-10-07	38 2015-05-12	13 2015-11-12	25 2014-10-15	9.1 2016-03-21
<source>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<source height>	90 2021-04-13	108 2022-12-13	90 2021-04-15	76 2021-04-28	15 2021-09-20
<source media>	3 2009-09-15	15 2012-08-28	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<source src>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<source srcset>	38 2014-10-07	38 2015-05-12	13 2015-11-12	25 2014-10-15	9.1 2016-03-21
<source type>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	15 2013-07-02	3.1 2008-03-18

Wstęp

Przed pojawieniem się języka HTML5, istniały już różne sposoby osadzania treści multimedialnych audio/wideo na stronach internetowych:

• Osadzenie pliku
• Uniwersalny sposób odtwarzania plików

Niestety miały one spore wady:

• Większość z nich nie została wcześniej oficjalnie ustandaryzowana, dlatego były interpretowane odmienne lub w ogóle nieobsługiwane w niektórych przeglądarkach.
• Nie istniało standardowe API, dzięki któremu można by w prosty sposób wstawić na stronie odtwarzacz z własną skórką, realizować dynamiczne listy odtwarzania itp.
• Wymagały do działania zainstalowanych wtyczek (np. Adobe Flash Player), przez co czasem nadmiernie obciążały procesor, a przy tym nie były w ogóle obsługiwane przez wiele urządzeń mobilnych (smartfony, tablety). Dodatkowo wymagały od webmastera znajomości środowiska Adobe Flash (i zakup komercyjnej licencji) albo konieczności korzystania jedynie z ogólnodostępnych odtwarzaczy Flash, bez możliwości dopasowania ich do własnych potrzeb.
• Często działały tylko w systemie operacyjnym Microsoft Windows, uniemożliwiając obejrzenie filmów czy posłuchania muzyki użytkownikom Maców i Linuksa.
• Zdarzały się poważne trudności z ustawieniem warstw (otwierane menu, okna dialogowe) ponad oknem wyświetlanym przez wtyczkę. Często okno odtwarzania wtyczki po prostu zawsze przebijało przez taką warstwę.
• Brakowało możliwości zmiany wyglądu przy pomocy CSS.
• Nie było możliwe dołączenie do filmów własnych napisów.

Nic dziwnego, że w HTML5 postanowiono zmienić tę sytuację. Najpierw zdecydowano się wprowadzić do specyfikacji element EMBED, który do tej pory i tak był powszechnie używany, choć oficjalnie nie istniał. Nadal jednak nie zaleca się jego stosowania do materiałów audio/wideo:

• Wymaga zainstalowanej na komputerze wtyczki. Nie każda przeglądarka obsługuje wszystkie rodzaje wtyczek. Nie każda wtyczka jest dostępna dla wszystkich rodzajów systemów operacyjnych. Nie każdy użytkownik wie, jak samodzielnie zainstalować wtyczkę.
• Webmaster nadal nie dostaje standardowego API, dzięki któremu mógłby dynamicznie manipulować odtwarzanym materiałem multimedialnym.
• Element EMBED nie posiada znacznika zamykającego, a element NOEMBED nadal nie został wprowadzony do specyfikacji. Zatem nie można zastosować żadnej automatycznej alternatywy, jeżeli przeglądarka użytkownika nie obsługuje żądanej wtyczki.
• Tylko podstawowe atrybuty znacznika EMBED zostały opisane w specyfikacji. Pozostałe zależą od możliwości użytej wtyczki.
• Element ten nie jest w żaden sposób zoptymalizowany do odtwarzania filmów ani muzyki.

Filmy i dźwięk <video, audio, source>

Aby pozbyć się wszystkich wymienionych powyżej wad, HTML5 wprowadza zupełnie nowe elementy, przeznaczone specjalnie do obsługi odtwarzaczy audio/wideo.

• Podstawowy odtwarzacz wideo (niezalecane!):

  <video src="lokalizacja pliku">Treść alternatywna</video>

• Podstawowy odtwarzacz audio (niezalecane!):

  <audio src="lokalizacja pliku">Treść alternatywna</audio>

• Odtwarzacz wielu formatów wideo:

  <video>
  	<source src="lokalizacja pliku w formacie 1" type='format 1'>
  	<source src="lokalizacja pliku w formacie 2" type='format 2'>
  	(...)
  	Treść alternatywna
  </video>

• Odtwarzacz wielu formatów audio:

  <audio>
  	<source src="lokalizacja pliku w formacie 1" type='format 1'>
  	<source src="lokalizacja pliku w formacie 2" type='format 2'>
  	(...)
  	Treść alternatywna
  </audio>

Różnica pomiędzy odtwarzaczem wideo a audio jest tylko taka, że ten drugi nie udostępnia okna do wyświetlania obrazu. W odtwarzaczu wideo swobodnie można odgrywać również samą muzykę. Może to być przydatne np. aby wraz z dźwiękiem wyświetlić dodatkowe napisy zsynchronizowane z dźwiękiem albo statyczny obraz. Natomiast ładując film do odtwarzacza audio, możemy pominąć zapisaną w nim ścieżkę wideo - kiedy interesuje nas tylko ścieżka dźwiękowa. Jednak gdy to tylko możliwe, należy unikać tego sposobu, ponieważ mimo iż użytkownik nie widzi obrazu wideo, to jest on nadal zapisany w pliku i transmitowany przez sieć.

Pliki multimedialne często są pokaźnych rozmiarów. Przeglądarka zwykle nie potrafi odtworzyć wszystkich możliwych formatów filmów i muzyki. Dlatego właśnie mocno zalecane jest, aby korzystać tylko z dwóch ostatnich sposobów osadzania plików wideo/audio, nawet jeżeli posiadamy materiał tylko w jednym formacie. Podając typ (format) pliku w kodzie strony, przeglądarka nie będzie musiała pobierać plików, aby sprawdzić, czy potrafi je odtworzyć. Jest to szczególnie ważne na stronach, które zawierając wiele osadzonych odtwarzaczy.

Przykład <video, audio, source>

Zobacz przykład: VIDEO, AUDIO

Atrybuty odtwarzacza

autoplay

Atrybut logiczny (podawany bez wartości), który wywołuje automatyczne rozpoczęcie odtwarzania. Używaj go z rozsądkiem. Nie ma nic gorszego niż samodzielnie włączająca się o północy muzyka na stronie i grająca na cały regulator ;-)

controls

Atrybut logiczny, który powoduje wyświetlenie domyślnych kontrolek, służących od odtwarzania materiału. Najczęściej zawierają one przycisk "odtwarzaj", "zatrzymaj", "wycisz", suwak postępu odtwarzania i głośności.

Standardowe kontrolki odtwarzania zwykle wyglądają nieco inaczej w każdej przeglądarce. Jednak użytkownik jest przyzwyczajony do ich wyglądu właśnie ze swojej przeglądarki, więc nie powinno to dla niego stanowić problemu, a raczej ułatwienie. Jeżeli jednak nie możemy się z tym pogodzić, HTML5 daje możliwość stworzenia swoich własnych kontrolek odtwarzania. Służy do tego API JavaScript, a więc bez choćby podstawowych umiejętności programistycznych raczej się przy tym nie obejdzie.

Przykład <video controls, audio controls>

Zobacz przykład: własne kontrolki odtwarzania

loop

Atrybut logiczny, który włącza tryb odtwarzania w kółko.

muted

Atrybut logiczny, który całkowicie wycisza dźwięk w odtwarzaczu.

playsinline

Niektóre przeglądarki, po włączeniu odtwarzania wideo, mogą domyślnie przełączać widok w tryb pełnoekranowy. Jeśli wolimy, aby filmy zawsze były wyświetlane bezpośrednio w stronie - w obszarze, który został przeznaczony na odtwarzacz - możemy posłużyć się atrybutem logicznym (podawanym bez wartości) playsinline. W takiej sytuacji przejście w tryb pełnoekranowy powinno się odbyć wyłącznie po wyraźnym wybraniu przez użytkownika odpowiedniej opcji.

Jeśli nie użyjemy atrybutu playsinline, nie oznacza to, że wtedy odtwarzanie zawsze rozpocznie się w trybie pełnoekranowym. W rzeczywistości większość przeglądarek nie używa takiego trybu domyślnie. W ich przypadku brak atrybutu playsinline nie wywoła żadnego efektu.

poster

W przypadku odtwarzacza VIDEO możliwe jest ustawienie statycznego obrazka, który wyświetli się w oknie odtwarzania, zanim użytkownik włączy w nim odgrywanie właściwego filmu. Można w ten sposób umieścić np. pierwszą znaczącą klatkę z filmu. Jako wartość tego atrybutu należy podać lokalizację pliku graficznego.

preload

Określa, które części pliku multimedialnego powinny zostać pobrane przez przeglądarkę, nawet jeśli użytkownik nigdy nie włączy odtwarzania:

none

Żadna część pliku nie zostanie załadowana, zanim nie rozpocznie się jego odtwarzanie. Opcja przydatna, jeżeli odtwarzacz jest na stronie elementem pobocznym i użytkownik może nigdy go nie użyć albo ewentualnie kiedy zależy nam na zminimalizowaniu transferu.

metadata

Pobiera tylko tzw. metadane zapisane w pliku (wymiary, lista ścieżek, czas trwania itp.) oraz możliwe, że kilka pierwszych klatek filmu.

auto

Przeglądarka może dowolnie pobierać plik - w szczególności załadować go w całości do pamięci, nawet jeśli nigdy nie zostanie odtworzony.

width, height

Zanim plik wideo albo jego metadane zostaną załadowane, przeglądarka nie zna właściwych wymiarów filmu. Dlatego najpierw może przyjąć jakieś standardowe rozmiary, by potem zmienić je na właściwe. Może to wywołać efekt "skakania" elementów strony. Dlatego zawsze powinno się od razu określać, jaką szerokość (width="...") i wysokość (height="...") ma film, który będzie załadowany do odtwarzacza VIDEO.

Formaty audio/wideo

Wprowadzając w HTML5 nowe znaczniki AUDIO i VIDEO początkowo starano się również rozwiązać problemy z różnorodnością formatów plików muzycznych i filmowych. W samej wielości formatów nie byłoby nic złego, gdyby wszystkie przeglądarki potrafiły je obsłużyć. Niestety tak nie jest. Do tego dochodzą kwestie związane z patentami i licencjonowaniem.

W praktyce aby mieć pewność, że muzyka bądź film zostaną poprawnie wyświetlone w większości popularnych przeglądarek i systemów operacyjnych, konieczne jest konwertowanie plików jednocześnie do wszystkich z niżej wymienionych formatów. Poszczególne skonwertowane pliki w różnych formatach należy wymieć za pomocą kolejnych znaczników SOURCE.

Przykład <video, audio, source type>

Typowa kombinacja formatów plików wideo:

<video>
	<source src="plik.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	<source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'>
	Pobierz plik w formacie: <a href="plik.mp4">MP4</a>, <a href="plik.ogv">OGV</a>
</video>

Typowa kombinacja formatów plików audio:

<audio>
	<source src="plik.mp3" type='audio/mpeg'>
	<source src="plik.ogg" type='audio/ogg'>
	Pobierz plik w formacie: <a href="plik.mp3">MP3</a>, <a href="plik.ogg">OGG</a>
</audio>

MP3/MP4

Znane od dawna, komercyjne formaty audio (MP3) i wideo (MP4). Objęte płatnymi licencjami. Na ich upowszechnieniu zależy zwłaszcza posiadaczom patentów do nich - Microsoft i Apple.

Z uwagi na możliwe błędy w mobilnej wersji przeglądarki Safari, format MP4 - jeśli jest dostępny - powinien znajdować się na początku listy znacznika VIDEO. Inaczej odtworzenie wideo może być niemożliwe.

OGG/OGV

Konsorcjum W3C najpierw próbowało forsować jeden uniwersalny i darmowy format - OGG (audio) i OGV (wideo). Nie spodobało się to jednak twórcom komercyjnego formatu MP3/MP4. Poza tym argumentowano, że otwarty format OGG/OGV choć udostępniany za darmo, może w sposób niezamierzony korzystać z jakichś patentów, co przyniosłoby problemy w przyszłości, gdyby się nagle okazało, że jednak trzeba za jego użytkowanie płacić.

Kodeki

Plik audio/wideo można w uproszczeniu traktować jak archiwa ZIP lub RAR. Zawierają one w sobie spakowane wiele zwykłych plików. Sposób wykonywania kompresji w formacie ZIP różni się od RAR, ale nie wpływa na typ plików, które są spakowane w archiwum. Jedno archiwum może zawierać np. obrazy w formacie GIF, JPG lub PNG, a także muzykę MP3, WMA itp.

Każdy plik muzyczny musi zawierać tzw. ścieżkę dźwiękową. Pliki filmowe zawierają natomiast ścieżkę wideo oraz zwykle również ścieżkę dźwiękową. Ścieżki te są jakby odpowiednikiem plików spakowanych w archiwum ZIP lub RAR. Istnieją różne sposoby zapisu dźwięku i obrazu w plikach audio/wideo. Różnią się stopniem kompresji (wielkością wynikowego pliku), jakością, obciążeniem procesora przy odtwarzaniu itp. Za konwersję ścieżki audio/wideo do określonego formatu odpowiadają kodeki.

Podając typ (format) pliku audio/wideo, powinniśmy określić również kodeki, przy użyciu których przeglądarka może odtworzyć wybrany materiał. Dzięki temu w przypadku nieposiadania odpowiedniego kodeku, nie będzie konieczne pobieranie pliku, którego i tak nie da się odtworzyć.

Kodeki MP4

H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>

MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container

<source src="video.mp4" type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container

<source src="video.3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'>

Kodeki OGG/OGV

Vorbis audio alone in Ogg container

<source src="audio.ogg" type='audio/ogg; codecs=vorbis'>

Speex audio alone in Ogg container

<source src="audio.spx" type='audio/ogg; codecs=speex'>

FLAC audio alone in Ogg container

<source src="audio.oga" type='audio/ogg; codecs=flac'>

Dirac video and Vorbis audio in Ogg container

<source src="video.ogv" type='video/ogg; codecs="dirac, vorbis"'>

Theora video and Vorbis audio in Ogg container

<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>

Theora video and Speex audio in Ogg container

<source src="video.ogv" type='video/ogg; codecs="theora, speex"'>

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
<video>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<video autoplay>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<video controls>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<video height>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<video loop>	3 2009-09-15	11 2012-03-13	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<video muted>	30 2013-10-01	11 2012-03-13	12 2015-07-29	17 2013-10-08	5 2010-06-07
<video playsinline>	75 2019-06-04	❌	79 2020-01-15	62 2019-06-27	10 2016-09-20
<video poster>	3 2009-09-15	3.6 2010-01-21	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<video preload>	3 2009-09-15	4 2011-03-22	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<video src>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<video width>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<audio>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<audio autoplay>	❌	❌	❌	❌	❌
<audio controls>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<audio loop>	3 2009-09-15	11 2012-03-13	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<audio muted>	15 2011-10-25	11 2012-03-13	≤18 2018-10-02	15 2013-07-02	6 2012-07-25
<audio preload>	3 2009-09-15	4 2011-03-22	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<audio src>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	10.5 2010-03-02	3.1 2008-03-18
<source>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<source height>	90 2021-04-13	108 2022-12-13	90 2021-04-15	76 2021-04-28	15 2021-09-20
<source src>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<source type>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<source width>	90 2021-04-13	108 2022-12-13	90 2021-04-15	76 2021-04-28	15 2021-09-20

Napisy do filmów <track>

<video>
	<source src="lokalizacja pliku w formacie 1" type='format 1'>
	<source src="lokalizacja pliku w formacie 2" type='format 2'>
	(...)
	<track src="napisy.vtt" default>
	(...)
	Treść alternatywna
</video>

Napisy wyświetlane zwykle na dole ekranu są - obok głosu lektora i dubbingu - jednym ze sposobów na przekład filmu na inny język niż ten, w którym pierwotnie został on nakręcony. Tekst tłumaczenia teoretycznie można zapisać bezpośrednio w ścieżce wideo. Wtedy jednak każde tłumaczenie filmu byłoby fizycznie osobnym plikiem wideo. Na dodatek użytkownik np. słabowidzący albo posiadający niewielki monitor, nie mógłby sterować wielkością tekstu napisów. Dlatego dużo lepiej jest przygotować osobny, względnie niewielkich rozmiarów plik tekstowy z napisami. Jeżeli ktoś z innego kraju będzie chciał obejrzeć film, wystarczy że pobierze dokładnie ten sam plik wideo i dodatkowo poszuka sobie pliku napisów dla swojego języka. Taki osobny plik testowy z napisami nazywamy ścieżką tekstową.

Plik napisów tworzy się w dowolnym prostym edytorze tekstu. Możesz do tego celu użyć edytora, w którym normalnie tworzysz strony WWW. Możesz nawet skorzystać ze zwykłego windowsowskiego Notatnika (Notepad) lub dowolnego innego prostego edytora tekstu, wbudowanego w Twój system operacyjny. Zwróć przy tym uwagę tylko na dwie bardzo ważne kwestie:

• Nazwa pliku musi mieć rozszerzenie *.vtt, a nie *.vtt.txt.
  Aby to zrobić w Notatniku, w oknie zapisywania pliku wybierz opcję: "Zapisz jako typ: Wszystkie pliki", a następnie wpisz pełną nazwę (np. napisy.vtt).
• Plik napisów musi być zapisany przy użyciu kodowania znaków UTF-8 - nieważne przy użyciu jakiej strony kodowej został utworzony dokument HTML, w którym jest wstawiony odtwarzacz wideo z dołączonymi tymi napisami.
  Aby to zrobić w Notatniku, w oknie zapisywania pliku wybierz opcję: "Kodowanie: UTF-8". Jeżeli używasz innego edytora możesz posiadać dodatkowo opcję zapisu pliku bez tzw. znaku BOM (znacznik kolejności bajtów) - dla plików *.vtt może on zarówno zostać dodany, jak i pominięty. W tym przypadku raczej korzystniej będzie go dodać (Notatnik robi to automatycznie).

Przykład <track>

Zobacz przykład: TRACK

Rodzaj napisów

Istnieje możliwość podania więcej niż jednego znacznika <track> dla tego samego materiału wideo. Mogą to być tłumaczenia napisów na różne języki. W takim przypadku pomocny jest atrybut srclang="...", w którym podajemy nazwę kodową języka (zobacz: Skróty nazw języków). Oprócz tego zaleca się również podanie atrybutu label="...", którego wartość może być wyświetlona w odtwarzaczu wideo, aby użytkownik mógł samodzielnie wybrać najbardziej odpowiadające mu napisy.

Możemy jednak również chcieć dostarczyć specjalne napisy dla osób niesłyszących albo transkrypcję dla niewidomych. W takim przypadku należy się posłużyć atrybutem kind="...". Określa on rodzaj napisów, dzięki czemu przeglądarka może wybrać odpowiedni w zależności od okoliczności. Dopuszczalne wartości tego atrybutu to:

subtitles

Typowe napisy, które widzimy np. w kinie na obcojęzycznych filmach. Są po prostu tłumaczeniem na język rodzimy wszystkich kwestii wypowiadanych przez aktorów na ekranie.

captions

Opisuje nie tylko dialogi, ale również wszystkie istotne dźwięki w filmie, które są konieczne do pełnego zrozumienia fabuły. Tego typu napisy często są używane przez osoby niesłyszące. Jednak mogą być przydatne również w sytuacji, kiedy użytkownik sam wyciszy dźwięk.

descriptions

Tego typu napisy zwykle są odczytywane na głos przez syntezator mowy, a nie wyświetlane bezpośrednio na filmie. Zawierają tekstowy opis całego filmu, z którego często korzystają osoby niewidome. Może on być jednak przydatny również w sytuacji, kiedy z jakiegoś powodu wideo nie może być odtworzone - np. kiedy kierujemy samochodem.

Przykład <video, track kind srclang label>

<video src="file.mp4">
	<track kind="subtitles" src="subtitles.vtt" srclang="pl" label="Polski">
	<track kind="subtitles" src="subtitles-en.vtt" srclang="en" lang="en" label="English">
	<track kind="captions" src="captions.vtt" srclang="pl" label="Napisy dla niesłyszących">
	<track kind="descriptions" src="descriptions.vtt" srclang="pl" label="Transkrypcja dla niewidomych">
</video>

WebVTT

Sama zawartość pliku napisów musi być zapisana zgodnie z ustalonym standardem WebVTT (ang. Web Video Text Tracks). W pierwszej linijce pliku należy obowiązkowo umieścić tekst: WEBVTT i zostawić po nim jedną linijkę przerwy. Mówi on, że plik został utworzony zgodnie ze standardem WebVTT. Dalej dodawane są już bloki kolejnych napisów. Każdy blok zawiera przedział czasu, w którym ma się wyświetlać na ekranie oraz sam tekst napisu. Kolejne bloki napisów są od siebie oddzielone pustą linijką. Choć być może brzmi to nieco skomplikowanie, tak naprawdę jest bardzo intuicyjne. Najprostszy plik napisów mógłby wyglądać następująco:

WEBVTT

00:00:01.000 --> 00:00:05.000
Ten napis wyświetli się między pierwszą a piątą sekundą filmu.

00:00:05.000 --> 00:00:10.000
Ten napis wyświetli się między piątą a dziesiątą sekundą filmu.

00:00:20.000 --> 00:00:30.000
Ten napis wyświetli się między dwudziestą a trzydziestą sekundą filmu.

Czasy wyświetlania napisów mogą na siebie również zachodzić, tzn. w jednej klatce filmu można wyświetlić kilka bloków napisów.

Ustawienia napisu

Każdy z bloków napisów może dodatkowo zawierać specjalne ustawienia, sterujące sposobem jego wyświetlania. Ustawienia umieszcza się na końcu linijki podającej przedział czasu - np.:

WEBVTT

00:00:01.000 --> 00:00:05.000 align:start vertical:rl
Ten napis zostanie wyrównany do początku i ustawiony w pionie przy lewej krawędzi.

Obsługiwane ustawienia:

• align - ustawienie w poziomie
  • start - wyrównanie tekstu do lewej strony
  • end - wyrównanie tekstu do prawej strony
• vertical - ustawienie w pionie (interpretuje: Chrome)
  • rl - napis przy lewej krawędzi
  • lr - napis przy prawej krawędzi

Dialogi

W celu oznaczenia dialogu/cytatu, odpowiednią linijkę w napisach należy poprzedzić specjalnym znacznikiem, w którym podaje się osobę, która ją wypowiada:

WEBVTT

00:00:05.000 --> 00:00:10.000
<v nauczyciel>- Ile to jest 2x2?
<v uczeń>- Poproszę o inny zestaw pytań.

Formatowanie tekstu

Do tekstu napisów można wprowadzać nawet podstawowe formatowanie tekstu. Obsługiwane są następujące znaczniki HTML: B, I, U. Aby wstawić do napisu znak mniejszości, większości lub ampersand ("&"), należy się posłużyć znanymi z języka HTML encjami: &lt;, &gt;, &amp;.

Stylizacja napisów

To jeszcze nie koniec. Można nawet zmienić wygląd napisów przy pomocy stylów CSS. Obsługiwane powinny być następujące własności: color, opacity, visibility, text-decoration, text-outline, text-shadow, background, outline, font, white-space.

Aby zmienić stylizację wszystkich napisów, trzeba posłużyć się specjalnym pseudoelementem:

::cue {
	color: white;
	background: black;
}

Aby zmienić wygląd tekstu, który w napisach został objęty znacznikami B, I, U, należy wpisać:

::cue(b) {
	color: red;
}
::cue(i) {
	color: lime;
}
::cue(u) {
	color: aqua;
}

Aby zmienić wygląd wypowiedzi konkretnych osób w dialogu:

::cue(v[voice="nauczyciel"]) {
	font-style: italic;
}

W pliku *.vtt bezpośrednio przed wybranym blokiem napisów możesz podać identyfikator:

WEBVTT

identyfikator
00:00:01.000 --> 00:00:05.000
Ten napis posiada przypisany identyfikator.

Można się nim potem posłużyć, aby zmienić wygląd całego takiego bloku:

::cue(#identyfikator) {
	color: red;
}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<track>	23 2012-11-06	31 2014-07-22	12 2015-07-29	12.1 2012-11-20	6 2012-07-25
<track default>	23 2012-11-06	31 2014-07-22	12 2015-07-29	12.1 2012-11-20	6 2012-07-25
<track kind>	23 2012-11-06	31 2014-07-22	12 2015-07-29	12.1 2012-11-20	6 2012-07-25
<track label>	23 2012-11-06	31 2014-07-22	12 2015-07-29	12.1 2012-11-20	6 2012-07-25
<track src>	23 2012-11-06	50 2016-11-15	12 2015-07-29	12.1 2012-11-20	6 2012-07-25
<track srclang>	23 2012-11-06	31 2014-07-22	12 2015-07-29	12.1 2012-11-20	6 2012-07-25
::cue	26 2013-03-26	55 2017-08-08	79 2020-01-15	15 2013-07-02	7 2013-10-22

<input list="identyfikator">
<datalist id="identyfikator">
	<option value="wartość1">
	<option value="wartość2">
	...
</datalist>

Większość przeglądarek posiada funkcję tzw. autouzupełniania elementów formularzy. Jeżeli użytkownik wpisze coś w formularzu, a potem go wyśle, to kiedy będzie następnym razem wypełniał ten sam formularz, przeglądarka wyświetli mu podpowiedzi w postaci wartości, które wcześniej wpisywał w wybranych polach. Taki mechanizm jest bardzo wygodny, ponieważ pozwala zaoszczędzić użytkownikowi sporo czasu na wprowadzaniu wciąż tych samych danych. Twórcy stron WWW również mogą wykorzystać ten system, dodając do automatycznych sugestii własne wartości. W ten sposób nawet jeżeli użytkownik dopiero pierwszy raz wypełnia formularz, od razu zobaczy właściwe podpowiedzi wartości, które może wpisać w określonych polach.

Listę dodatkowych podpowiedzi umieszcza się w postaci opcji (OPTION), zawartych w znaczniku DATALIST, któremu nadaje się odpowiedni identyfikator. Aby podpiąć takie sugestie do wybranego pola INPUT w formularzu, wystarczy przypisać mu atrybut list="..." o wartości takiej samej, jak identyfikator wybranej listy z opcjami podpowiedzi.

Jeżeli tekst automatycznych podpowiedzi jest dość długi, możemy wyświetlić użytkownikowi jego formę skróconą, po wybraniu której do pola zostanie wstawiona oryginalna, długa wartość:

<input list="identyfikator">
<datalist id="identyfikator">
	<option value="wartość1" label="skrót1">
	<option value="wartość2" label="skrót2">
</datalist>

Element DATALIST nie wyświetla się na ekranie, dlatego nie powinien sprawiać kłopotów w przeglądarkach, które nie obsługują HTML5. Wtedy użytkownik będzie zmuszony co prawda ręcznie wpisać pełną wartość w polu, ale przynajmniej w formularzu nie pojawią się żadne nieoczekiwane elementy. Czasami jednak może nam zależeć, aby opcje podpowiedzi zostały wyświetlone w starszych przeglądarkach. Z taką sytuacją możemy mieć do czynienia, gdy w wybranym polu należy wpisać w zasadzie jedną z podanych wartości, a nie dowolny tekst. Taki efekt powinniśmy uzyskać, wstawiając dodatkowy znacznik SELECT - nowsze przeglądarki po prostu go pominą, stosując mechanizm autouzupełniania, a starsze wyświetlą standardową listę rozwijalną:

<input name="nazwa" list="identyfikator">
<datalist id="identyfikator">
	<select name="nazwa">
		<option value="wartość1" label="skrót1">
		<option value="wartość2" label="skrót2">
	</select>
</datalist>

Przeglądarki

🔷 Zawiera błędy

	Chrome	Firefox	Edge	Opera	Safari
<datalist>	20 2012-06-26	🔷 110 2023-02-14	12 2015-07-29	9.5 2008-06-12	12.1 2019-03-25

• Nieokreślony stopień ukończenia:

  <progress>alternatywa</progress>

• Pasek postępu:

  <progress value="współczynnik">alternatywa</progress>
  <progress value="wartość" max="maksimum">alternatywa</progress>

Pozwala wstawić na stronie standardowy pasek postępu, który przedstawia stopień ukończenia jakiegoś zadania. Umożliwia również wskazanie nieokreślonego stopienia postępu - gdy bardziej czasochłonne zadanie jest w trakcie wykonywania, lecz nie wiadomo, kiedy zostanie ukończone. W takim przypadku przeglądarki mogą wyświetlić na ekranie specjalny animowany pasek postępu, którego pozycja będzie np. przechodzić w kółko z jego lewej na prawą stronę.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<progress>	6 2010-09-02	6 2011-08-16	12 2015-07-29	11 2010-12-16	6 2012-07-25
<progress max>	6 2010-09-02	6 2011-08-16	12 2015-07-29	11 2010-12-16	6 2012-07-25
<progress value>	6 2010-09-02	6 2011-08-16	12 2015-07-29	11 2010-12-16	6 2012-07-25

Pasek wyniku <meter value min max>

• Wersja podstawowa:

  <meter value="współczynnik">alternatywa</meter>

• Minimum i maksimum:

  <meter value="wartość" min="minimum" max="maksimum">alternatywa</meter>

Wygląd paska wyniku jest podobny do paska postępu (PROGRESS). Jednak w odróżnieniu od niego przedstawia określoną wartość (np. stopień zapełniania dysku albo liczbę głosów oddanych na określoną opcję w ankiecie), podczas gdy pasek postępu jest przeznaczony wyłącznie do określania stopnia ukończenia jakiegoś zadania.

Przedziały wartości <meter low high optimum>

• Wersja podstawowa:

  <meter value="współczynnik" low="niski" high="wysoki">alternatywa</meter>

• Minimum i maksimum:

  <meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka">alternatywa</meter>

• Wartość optymalna:

  <meter value="współczynnik" low="niski" high="wysoki" optimum="optymalny">alternatywa</meter>

• Wartość optymalna - minimum i maksimum:

  <meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka" optimum="optymalna">alternatywa</meter>

Pasek wyniku może sygnalizować np. swoim kolorem stan, kiedy podana wartość nie mieści się w optymalnym przedziale. Atrybuty low="..." i high="..." pozwalają podzielić cały pasek na trzy przedziały: dolny, środkowy i górny. Natomiast wartość atrybutu optimum="..." wskazuje, który z tych przedziałów jest optymalny. W zależności od tego, w którym przedziale znajduje się podana wartość atrybutu value="...", możliwe są następujące ustawienia przedziałów i odpowiadające im stany wartości:

W przypadku wartości znajdujących się dokładnie na granicy przedziałów, zachowanie przeglądarek może być niespójne.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<meter>	6 2010-09-02	16 2012-10-09	12 2015-07-29	11 2010-12-16	6 2012-07-25
<meter high>	6 2010-09-02	16 2012-10-09	12 2015-07-29	11 2010-12-16	6 2012-07-25
<meter low>	6 2010-09-02	16 2012-10-09	12 2015-07-29	11 2010-12-16	6 2012-07-25
<meter max>	6 2010-09-02	16 2012-10-09	12 2015-07-29	11 2010-12-16	6 2012-07-25
<meter min>	6 2010-09-02	16 2012-10-09	12 2015-07-29	11 2010-12-16	6 2012-07-25
<meter optimum>	6 2010-09-02	16 2012-10-09	12 2015-07-29	11 2010-12-16	6 2012-07-25
<meter value>	6 2010-09-02	16 2012-10-09	12 2015-07-29	11 2010-12-16	6 2012-07-25

• Panel domyślnie zamknięty:

  <details>
  	<summary>nagłówek</summary>
  	...
  </details>

• Panel domyślnie otwarty:

  <details open>
  	<summary>nagłówek</summary>
  	...
  </details>

Na stronach internetowych bardzo często spotykamy interaktywne elementy w postaci paneli, które otwierają się po kliknięciu w ich nagłówek myszką. Tego typu rozwiązanie jest szczególnie przydatne na stronach, zawierających dużo informacji. Aby nie przytłoczyć użytkownika, czasami lepiej jest na początku wyświetlić mu tylko podstawowe dane, a do szczegółów dać dostęp dopiero, kiedy zyskamy jego zainteresowanie konkretnym elementem strony.

Do tej pory jedynym sposobem wstawienia takiego otwieranego panelu było użycie dynamicznych skryptów JavaScript. HTML5 pozwala to wykonać bez ich potrzeby. W stanie zamkniętym, przeglądarka zamiast treści wpisanej w znaczniku, wyświetla tylko nagłówek panelu z napisem podanym przez nas za pomocą elementu SUMMARY. Co ciekawe, możliwe jest nawet użycie CSS, tak aby otwarty panel prezentował się wizualnie inaczej niż zamknięty - np. można dodać do niego czerwoną ramkę:

details[open] {
	border: 1px solid red;
}

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<details>	12 2011-06-07	49 2016-09-20	79 2020-01-15	15 2013-07-02	6 2012-07-25
<details open>	12 2011-06-07	49 2016-09-20	79 2020-01-15	15 2013-07-02	6 2012-07-25
<summary>	12 2011-06-07	49 2016-09-20	79 2020-01-15	15 2013-07-02	6 2012-07-25

Typ <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week">

<input type="typ">

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.

Minimum, maksimum, krok <input "date, month, week, time, datetime-local, number, range" min max step>

<input type="typ" min="minimum" max="maksimum" step="krok">

Niektóre z nowych typów pól przyjmują wartości, które w jakiś sposób można przekształcić na liczbę. W takich przypadkach możliwe jest ograniczenie wprowadzanej wartości do podanego zakresu - zdefiniowanego poprzez minimum (min="...") lub/i maksimum (max="..."). Opcjonalnie możliwe jest również określenie oczekiwanego skoku wartości (step="...").

Wszystkie te atrybuty można stosować zarówno wspólnie do tego samego znacznika jak i osobno. Nie zawsze jednak te ograniczenia bezwzględnie zadziałają. Czasem mogą jedynie stanowić ułatwienie przy wprowadzaniu danych, ale użytkownik może być w stanie je ominąć.

Przykład <input "date, month, week, time, datetime-local, number, range" min max step>

Poniżej znajdziesz pola INPUT z ustawionymi przykładowymi wartościami minimalnymi/maksymalnymi oraz domyślną wartością kroku:

<input type="date" min="2024-08-21" step="1">
<input type="month" min="2024-08" step="1">
<input type="week" min="2024-W34" step="1">
<input type="time" min="08:00" step="60">
<input type="datetime-local" min="2024-08-21T08:00" step="60">
<input type="number" min="0" max="10" step="1" >
<input type="range" min="0" max="10" step="1">

Zwróć uwagę, że w przypadku type="time" i type="datetime-local" wartość kroku podajemy w sekundach.

Zobacz także interaktywny przykład: min="...", max="...", step="..."

Wiele wartości <input "email, file" multiple>

<input type="typ" multiple>

Programy pocztowe dają możliwość wysłania e-maila do wielu adresatów jednocześnie. Ponadto do tego samego listu możemy dodać kilka plików załączników. Taki same efekt możemy uzyskać przypisując do pola odpowiedniego typu atrybut logiczny (wstawiany bez wartości) multiple. Wtedy w jednym miejscu będziemy mogli podać listę wartości rozdzieloną przecinkami.

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
<input type="color">	20 2012-06-26	29 2014-04-29	14 2016-08-02	12 2012-06-14	12.1 2019-03-25
<input type="date">	20 2012-06-26	57 2017-11-14	12 2015-07-29	11 2010-12-16	14.1 2021-04-26
<input type="datetime-local">	20 2012-06-26	93 2021-10-05	12 2015-07-29	11 2010-12-16	14.1 2021-04-26
<input type="email">	5 2010-05-25	1 2004-11-09	12 2015-07-29	11 2010-12-16	5 2010-06-07
<input type="month">	20 2012-06-26	❌	12 2015-07-29	11 2010-12-16	❌
<input type="number">	7 2010-10-19	29 2014-04-29	12 2015-07-29	15 2013-07-02	5.1 2011-07-20
<input type="range">	4 2010-01-25	23 2013-08-06	12 2015-07-29	11 2010-12-16	3.1 2008-03-18
<input type="search">	5 2010-05-25	4 2011-03-22	12 2015-07-29	10.6 2010-07-01	5 2010-06-07
<input type="tel">	3 2009-09-15	4 2011-03-22	12 2015-07-29	11 2010-12-16	4 2009-06-08
<input type="time">	20 2012-06-26	57 2017-11-14	12 2015-07-29	10 2009-09-01	14.1 2021-04-26
<input type="url">	1 2008-12-11	1 2004-11-09	12 2015-07-29	11 2010-12-16	1 2003-06-23
<input type="week">	20 2012-06-26	❌	12 2015-07-29	11 2010-12-16	❌
<input min>	4 2010-01-25	16 2012-10-09	12 2015-07-29	≤12.1 2012-11-20	5 2010-06-07
<input max>	4 2010-01-25	16 2012-10-09	12 2015-07-29	≤12.1 2012-11-20	5 2010-06-07
<input step>	5 2010-05-25	16 2012-10-09	12 2015-07-29	≤12.1 2012-11-20	5 2010-06-07
<input multiple>	2 2009-05-21	3.6 2010-01-21	12 2015-07-29	≤12.1 2012-11-20	4 2009-06-08

<link rel="preload" as="rodzaj" type="typ" href="lokalizacja">

Domyślnie przeglądarki internetowe wczytują zasoby z zewnętrznych plików dopiero w momencie, kiedy ich znacznik pojawi się w kodzie źródłowym HTML strony. Oznacza to, że jeśli na samym dole strony znajduje się np. jakiś duży obrazek, może on nie zdążyć się załadować do momentu, kiedy użytkownik przewinie do niego okno przeglądarki. Język HTML5 wprowadził specjalny mechanizm, dzięki któremu można przyspieszyć wczytywanie zewnętrznych elementów potrzebnych do wyświetlenia strony poprzez załadowane ich z wyprzedzeniem, zanim przeglądarka faktycznie będzie ich potrzebować. W tym celu w nagłówku strony wystarczy wstawić znacznik LINK z odpowiednimi atrybutami rel="preload" i as="...".

Przykład <link "preload" as>

Ten obrazek zostanie załadowany z wyprzedzeniem, zanim będzie już potrzebny:

<head>
	<link rel="preload" as="image" type="image/jpeg" href="obrazek.jpg">
</head>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<link as>	50 2016-04-13	56 2017-09-28	17 2018-04-30	37 2016-05-04	10 2016-09-20

• Elementy bez znacznika zamykającego (np. INPUT):

  <element autocapitalize="kapitalizacja">

• Elementy ze znacznikiem zamykającym (np. TEXTAREA):

  <element autocapitalize="kapitalizacja">...</element>

Niektóre metody wprowadzania tekstu, takie jak klawiatury ekranowe w smartfonach bądź tabletach, a także wprowadzanie tekstu głosowo, często pomagają użytkownikom poprzez automatyczną kapitalizację pierwszej litery zdań. Klawiatura ekranowa, która implementuje automatyczną kapitalizację tekstu, może samoczynnie przełączać się na wyświetlanie wielkich liter (ale pozwalać użytkownikowi na ręczny powrót na małe litery), gdy litera, która powinna być automatycznie kapitalizowana, ma zostać wpisana. Inne rodzaje wprowadzania tekstu, na przykład wprowadzanie głosowe, mogą wykonywać automatyczną kapitalizację w sposób, który nie daje użytkownikom możliwości wcześniejszej interwencji. Atrybut autocapitalize="..." pozwala kontrolować takie zachowanie.

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
autocapitalize	43 2015-05-19	111 2023-03-14	79 2020-01-15	30 2015-06-09	❌

<script src="lokalizacja" async></script>

Na stronach internetowych można załączać dynamiczne skrypty, napisane w języku JavaScript. Zwykle zapisuje się je w osobnych plikach z rozszerzeniem *.js i osadza na stronie przy użyciu znacznika SCRIPT - podając do nich odnośnik w atrybucie src="...". W trybie domyślnym wczytywanie dokumentu zostaje zatrzymane po napotkaniu tak osadzonego skryptu i kontynuowane dalej, dopiero kiedy w całości się on załaduje. Często tylko niepotrzebnie wydłuża to czas, po którym użytkownik może już przeglądać pozostałą treść strony.

Korzystniej by było od razu wyświetlić podstawową treść tekstową strony, tak aby czytelnik mógł już się zacząć z nią zaznajamiać, a w tym czasie w tle doładować wszystkie potrzebne pliki dynamicznych skryptów. W języku HTML 4.01 służył do tego atrybut logiczny defer. Oznaczony nim skrypt ładuje się dopiero po wczytaniu wszystkich znaczników z dokumentu, tzn. po osiągnięciu </html>. HTML5 wprowadza dodatkowy atrybut logiczny - async - dzięki któremu pliki skryptów zostaną załadowane tak szybko, jak to będzie możliwe (być może jeszcze przed wczytaniem wszystkich znaczników dokumentu).

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<script async>	1 2008-12-11	3.6 2010-01-21	12 2015-07-29	15 2013-07-02	≤4 2009-06-08

• Cały formularz:

  <form autocomplete="autouzupełnianie">...</form>

• Wybrane pole:

  <input type="typ" autocomplete="autouzupełnianie">

• Lista rozwijalna:

  <select autocomplete="autouzupełnianie">...</select>

• Obszar tekstowy:

  <textarea autocomplete="autouzupełnianie">...</textarea>

Przeglądarki często posiadają wbudowaną funkcję automatycznego uzupełniania formularzy. Najczęściej odbywa się to w formie rozwijanej listy poniżej pól tekstowych, na którą użytkownik może przejść wciskając klawisz kursora w dół i zaakceptować wybór klawiszem Enter. Na liście wyświetlają się podpowiedzi, które użytkownik wcześniej wpisywał do tego pola.

Nie zawsze jednak jest to korzystne. Jeżeli użytkownik na publicznie dostępnym komputerze (np. w bibliotece) wypełni formularz zawierający jego numer telefonu, następna osoba korzystająca z tego samego komputera i wypełniająca ten sam formularz, zobaczy wszystkie numery telefonów, wcześniej tutaj wpisywane. Może taką wiedzę np. nielegalnie sprzedać firmie zajmującej się telemarketingiem. Analogiczna sytuacja występuje przy wypełnianiu w formularzu dowolnych danych osobowych: imienia i nazwiska w połączeniu np. z adresem pocztowym lub e-mail. Aby zapobiec takiej nieprzyjemnej sytuacji, powinniśmy wyłączyć funkcję automatycznego uzupełniania (autocomplete="off") we wszystkich polach formularzy, które zawierają dane osobowe.

Nie powinno się raczej wyłączać automatycznego uzupełniania w formularzach logowania, ponieważ uniemożliwia to działanie menedżerów haseł, powodując irytację użytkowników.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<form autocomplete>	14 2011-09-16	4 2011-03-22	12 2015-07-29	15 2013-07-02	6 2012-07-25
<input autocomplete>	14 2011-09-16	4 2011-03-22	12 2015-07-29	≤12.1 2012-11-20	6 2012-07-25
<select autocomplete>	66 2018-04-17	59 2018-03-13	79 2020-01-15	53 2018-05-10	9.1 2016-03-21
<textarea autocomplete>	66 2018-04-17	59 2018-03-13	79 2020-01-15	53 2018-05-10	9.1 2016-03-21

• Elementy bez znacznika zamykającego (np. INPUT) - wersja podstawowa:

  <element autocorrect>

• Elementy bez znacznika zamykającego - wersja rozszerzona:

  <element autocorrect="autokorekta">

• Elementy ze znacznikiem zamykającym (np. TEXTAREA) - wersja podstawowa:

  <element autocorrect>...</element>

• Elementy ze znacznikiem zamykającym - wersja rozszerzona:

  <element autocorrect="autokorekta">...</element>

Niektóre przeglądarki (zwłaszcza mobilne) mają wbudowaną funkcję automatycznego poprawiania błędów pisowni, a czasem również automatycznego wstawiania znaków interpunkcyjnych i spacji, w tekście wpisywanym przez użytkownika np. w obszarze tekstowym. Charakteryzuje się ona przede wszystkim się tym, że błędne wyrazy są od razu zastępowane ich poprawną formą, podczas gdy funkcja podstawowego sprawdzania pisowni jedynie wskazuje błędy (zwykle podkreśla wężykiem na czerwono) i ewentualnie proponuje listę potencjalnych poprawek.

Autokorekta może jednak przysporzyć sporo kłopotów, jeśli pole nie zostało przeznaczone do wprowadzania zwykłego tekstu, tylko np. kodu komputerowego. W takim przypadku czasem lepiej wyłączyć tę funkcję, aby niepotrzebnie nie irytowała użytkowników, wprowadzając w tekście niezamierzone poprawki. W tym celu wystarczy do elementu przypisać atrybut autocorrect="off".

Przeglądarki

❌ Nie działa   🔷 Zawiera błędy

	Chrome	Firefox	Edge	Opera	Safari
autocorrect	❌	❌	❌	❌	🔷 14.1 2021-04-26

• Elementy bez znacznika zamykającego (np. INPUT):

  <element autofocus>

• Elementy ze znacznikiem zamykającym (np. TEXTAREA):

  <element autofocus>...</element>

Atrybut logiczny (wstawiany bez wartości), dzięki któremu po załadowaniu strony, kursor tekstowy zostanie automatycznie umieszczony w tak zaznaczonym polu formularza.

Chociaż typowym zastosowanie atrybutu autofocus są pola i przyciski formularza - takie jak: INPUT (z wyjątkiem type="hidden"), SELECT, TEXTAREA, BUTTON - to tak naprawdę można go użyć dla dowolnego znacznika. Może to poprawić dostępność strony, doświadczenia użytkownika czy funkcjonalność nawigacji. Częstym zastosowanie może być również użycie go w połączeniu z atrybutem contenteditable="true".

Przykład <input autofocus>

<form action="?" method="post">
	<fieldset>
		<legend>Zaloguj się</legend>
		<input type="text" name="login" autofocus>
		<input type="password" name="password">
		<input type="submit" value="OK">
	</fieldset>
</form>

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
autofocus	79 2019-12-10	110 2023-02-14	79 2020-01-15	66 2020-01-07	15.4 2022-03-14

• Zewnętrzny arkusz stylów CSS:

  <link rel="stylesheet" href="style.css" blocking="render">

• Skrypt JavaScript:

  <script blocking="render"></script>

• Wewnętrzny arkusz stylów CSS:

  <style blocking="render">...</style>

Przeglądarka internetowa może wykonywać niektóre operacje równocześnie. Czasami mogłoby to jednak prowadzić do nieoczekiwanych rezultatów. Dlatego na przykład osadzenie zewnętrznego skryptu JavaScript na stronie zwykle powoduje, że przeglądarka przestaje wykonywać inne operacje, dopóki go nie załaduje i nie uruchomi. Możemy jednak pozwolić na wykonywanie niektórych czynności równolegle - np. ładowanie innych zasobów zewnętrznych osadzonych w dokumencie - a zablokować jedynie samo wyświetlanie strony (ang. render), dopóki kod skryptu nie zakończy swojego uruchomienia i nie wygeneruje dynamicznej treści na stronie:

<script src="skrypt.js" async blocking="render"></script>

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
<link blocking>	105 2022-09-02	❌	105 2022-09-01	91 2022-09-14	18.2 2024-12-11
<script blocking>	105 2022-09-02	❌	105 2022-09-01	91 2022-09-14	18.2 2024-12-11
<style blocking>	105 2022-09-02	❌	105 2022-09-01	91 2022-09-14	18.2 2024-12-11

<meta charset="utf-8">

W języku HTML5 znacznik META uzyskał możliwość określania deklaracji strony kodowej w formie skróconego zapisu.

Styl HTML 4.01:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Styl HTML5:

<meta charset="utf-8">

Najnowsze wydanie specyfikacji języka HTML5 dopuszcza wyłącznie jedną stronę kodową: utf-8.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<meta charset>	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	3 2007-10-26

• Wersja podstawowa:

  <element contenteditable>...</element>

• Wersja rozszerzona:

  <element contenteditable="edycja">...</element>

Podanie wartości contenteditable="true" umożliwia dynamiczną edycję zawartości tak oznaczonego elementu strony. Użytkownik może wpisać np. bezpośrednio w treści akapitu swój własny tekst. Treść taka jednak nie będzie widoczna dla innych użytkowników, odwiedzających tę samą stronę. Nie będzie również możliwości jej zapisania - po odświeżeniu strony wyświetli się ponownie domyślna zawartość dokumentu.

Aby efekty edycji były trwałe, konieczne jest zainstalowanie na serwerze dowolnego Systemu Zarządzania Zawartością - CMS.

W odróżnieniu od zwykłej edycji zawartości elementu TEXTAREA, atrybut contenteditable="true" pozwala wstawiać również sformatowany tekst. Jeśli chcemy tego uniknąć, należy się posłużyć wartością contenteditable="plaintext-only". Zapewnia ona, że w przypadku próby wklejenia tekstu ze schowka systemowego (poprzez skrót klawiaturowy Ctrl+V albo opcję "Wklej" z menu kontekstowego), który zawiera np. pogrubienie, wszelkie formatowanie zostanie wcześniej z niego wyczyszczone (tekst po wklejeniu nie będzie pogrubiony).

Podanie wartości contenteditable="plaintext-only" w przeglądarkach, które jej nie obsługują, może spowodować, że element w ogóle nie będzie edytowalny.

Przeglądarki

❌ Nie działa

	Chrome	Firefox	Edge	Opera	Safari
contenteditable	1 2008-12-11	3 2008-06-17	12 2015-07-29	9 2006-06-20	≤4 2009-06-08
contenteditable="plaintext-only"	51 2016-05-25	❌	≤79 2020-01-15	38 2016-06-08	≤13.1 2020-03-24

• Odtwarzacz dźwiękowy audio - wersja podstawowa:

  <audio src="lokalizacja" crossorigin></audio>

• Odtwarzacz dźwiękowy audio - wersja rozszerzona:

  <audio src="lokalizacja" crossorigin="uwierzytelnienie"></audio>

• Obrazek - wersja podstawowa:

  <img src="lokalizacja" crossorigin>

• Obrazek - wersja rozszerzona:

  <img src="lokalizacja" crossorigin="uwierzytelnienie">

• Zewnętrzny zasób - wersja podstawowa:

  <link href="lokalizacja" crossorigin>

• Zewnętrzny zasób - wersja rozszerzona:

  <link href="lokalizacja" crossorigin="uwierzytelnienie">

• Zewnętrzny skrypt JavaScript - wersja podstawowa:

  <script src="lokalizacja" crossorigin></script>

• Zewnętrzny skrypt JavaScript - wersja rozszerzona:

  <script src="lokalizacja" crossorigin="uwierzytelnienie"></script>

• Odtwarzacz filmów wideo - wersja podstawowa:

  <video src="lokalizacja" crossorigin></video>

• Odtwarzacz filmów wideo - wersja rozszerzona:

  <video src="lokalizacja" crossorigin="uwierzytelnienie"></video>

Steruje przesyłaniem danych uwierzytelniających takich jak ciasteczka (ang. cookies), które umożliwiają identyfikację użytkownika (np. kiedy się zaloguje) i personalizację zawartości bądź funkcji strony - np. na podstawie dokonanych przez niego wyborów konfiguracyjnych w serwisie.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<audio crossorigin>	33 2014-02-20	74 2020-03-10	≤18 2018-10-02	20 2014-03-04	10 2016-09-20
<img crossorigin>	13 2011-08-02	8 2011-11-08	12 2015-07-29	15 2013-07-02	6 2012-07-25
<link crossorigin>	34 2014-04-08	18 2013-01-08	17 2018-04-30	21 2014-05-06	10 2016-09-20
<script crossorigin>	19 2012-05-15	14 2012-07-17	14 2016-08-02	12 2012-06-14	6 2012-07-25
<video crossorigin>	33 2014-02-20	74 2020-03-10	≤18 2018-10-02	20 2014-03-04	10 2016-09-20

• Elementy bez znacznika zamykającego z atrybutem logicznym:

  <element data-nazwa>

• Elementy bez znacznika zamykającego z atrybutem o podanej wartości:

  <element data-nazwa="wartość">

• Elementy ze znacznikiem zamykającym z atrybutem logicznym:

  <element data-nazwa>...</element>

• Elementy ze znacznikiem zamykającym z atrybutem o podanej wartości:

  <element data-nazwa="wartość">...</element>

HTML5 pozwala webmasterom nadawać dowolnemu znacznikowi na stronie swoje własne atrybuty, pod warunkiem że ich nazwa rozpoczyna się od: data- (np. data-mojatrybut="..."). Nie mają one żadnego wpływu na sposób wyświetlania strony ani na semantykę tekstu. Ich wartości wykorzystuje się w dynamicznych skryptach JavaScript - wstawianych do dokumentu za pomocą znaczników SCRIPT. Jeżeli nie korzystasz z takich skryptów, nie używaj tych atrybutów.