Przejdź do treści

HTML5

W tym rozdziale dowiesz się...

Wstęp

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

Czy XHTML umarł?

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 jest 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. Dlatego właśnie w tym kursie przyjęto konwencję zapisu składni w formacie zgodnym z językiem XHTML.

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.

Składnia (X)HTML5

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>

Nowe elementy HTML5

UWAGA!
Przeglądarka Internet Explorer do wersji 8.0 (włącznie) nie pozwala formatować nowych znaczników HTML5 za pomocą stylów CSS.

Na szczęście znalazła się na to bardzo prosta rada :-) Wystarczy wstawić gdzieś w nagłówku dokumentu następujący kod:

<script>
document.createElement('article');
document.createElement('aside');
document.createElement('audio');
document.createElement('bdi');
document.createElement('canvas');
document.createElement('command');
document.createElement('datalist');
document.createElement('details');
document.createElement('dialog');
document.createElement('embed');
document.createElement('figcaption');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('keygen');
document.createElement('mark');
document.createElement('meter');
document.createElement('nav');
document.createElement('output');
document.createElement('progress');
document.createElement('rp');
document.createElement('rt');
document.createElement('ruby');
document.createElement('section');
document.createElement('source');
document.createElement('summary');
document.createElement('time');
document.createElement('track');
document.createElement('wbr');
document.createElement('video');
</script>

Jeszcze lepiej usunąć z powyższego kodu pierwszą i ostatnią linijkę, a następnie zapisać tak przygotowany tekst w osobnym pliku pod nazwą np. "html5.js". Wtedy w nagłówkach dokumentów serwisu zamiast powyższego dość obszernego kodu, wystarczy wstawić:

<script src="html5.js"></script>

Ważne: plik "html5.js" musi się znajdować w tym samym katalogu, co dokumenty *.html, w których został osadzony. W przeciwnym razie należy zastosować odpowiednią ścieżkę dostępu (np. src="../html5.js").

Ponadto przeglądarki które nie obsługują nowych znaczników, zwykle próbują wyświetlać je w linii. Nie jest to zgodne z domyślnym sposobem prezentacji części z tych elementów, określonym w specyfikacji. Aby ujednolicić sposób wyświetlania elementów HTML5 w starszych przeglądarkach, powinniśmy dodatkowo wstawić do dokumentu specjalny arkusz stylów:

article, aside, details, dialog, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
}

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

[hidden] {
	display: none;
}

Jeżeli nie korzystasz z możliwości CSS, nie musisz używać żadnej z wyżej przedstawionych sztuczek... ale może w takim razie to już najwyższy czas, aby poznać Kaskadowe Arkusze Stylów ;-)


Sekcje

Sekcje to odrębne tematycznie fragmenty treści na stronie. Można je porównać do rozdziałów w książce. Każda sekcja może mieć nagłówek (tytuł rozdziału) i stopkę (zawierającą informacje o autorze, prawach autorskich itp.).

W ramach znaczników przydatnych przy wstawianiu sekcji, wyróżnić możemy elementy, które fizycznie te sekcje tworzą (ang. sectioning elements) - są to: ARTICLE, ASIDE, NAV, SECTION. Definiują one w dokumencie zakres dla nagłówków (H1, H2, H3, H4, H5, H6, HGROUP) i stopek (FOOTER).

SECTION
Ogólna sekcja dokumentu lub aplikacji. Może być użyta w połączeniu z elementami: H1, H2, H3, H4, H5, H6 - dla wskazania struktury dokumentu.
ARTICLE
Niezależny kawałek treści dokumentu, jak np. wpis na blogu albo artykuł w gazecie.
ASIDE
Kawałek treści, który tylko nieznacznie jest powiązany z resztą strony.
HGROUP
Nagłówek sekcji.
HEADER
Grupa wprowadzająca albo ułatwienia nawigacyjne.
FOOTER
Stopka sekcji. Może zawierać informacje na temat autora, praw autorskich itp.
NAV
Sekcja dokumentu przeznaczona na nawigację.

Oprócz wymienionych tutaj znaczników, do elementów używanych przy wstawianiu sekcji zaliczamy również BODY.

Nagłówki sekcji

Jeżeli z kodu źródłowego strony usuniemy całą treść oprócz nagłówków wszystkich sekcji i podsekcji, powinniśmy otrzymać zagnieżdżoną listę w formie spisu treści dokumentu (ang. document outline). Nawet jeśli jawnie nie umieścimy spisu treści na stronie, taki domniemany spis nagłówków może być niezwykle przydatny dla czytelników serwisu. Osoby niewidome, korzystające z przeglądarki automatycznie tworzącej spisy z nagłówków, będą mogły przeskakiwać od razu do interesujących je sekcji dokumentu. Pozostali użytkownicy również na tym skorzystają, gdyż otrzymają dokument poukładany w logiczne części (w obszernym niepodzielonym na rozdziały tekście, trudno jest się połapać). Prawidłowo oznaczone nagłówki sekcji mają również pozytywny efekt, jeżeli chodzi o pozycję tak zbudowanej strony w wynikach wyszukiwarek internetowych. Dlatego warto o to szczególnie zadbać.

Do nagłówków sekcji zaliczamy: H1, H2, H3, H4, H5, H6, HGROUP. Każda sekcja dokumentu ma co najwyżej jeden nagłówek, a sekcje nieposiadające znaczników nagłówków, otrzymują nagłówki niejawne - np. "Niezatytułowana sekcja". Oznacza to, że wstawienie nagłówka - nawet bez elementu fizycznie oznaczającego sekcję (ARTICLE, ASIDE, NAV, SECTION) - tworzy nową sekcję w sposób niejawny (jeśli poziom nagłówka jest przynajmniej tak samo ważny jak poprzedni) lub podsekcję (gdy nagłówek ma mniej ważny poziom). Poziom nagłówka, w obrębie elementów fizycznie tworzących sekcje, nie ma znaczenia. Jeżeli do dokumentu wstawimy dwa następujące po sobie elementy SECTION, z który pierwszy będzie miał np. nagłówek H2, a drugi H3, to w spisie treści dokumentu obie te sekcje i będą równorzędne.

Oprócz elementów tworzących sekcje, wyróżniamy również tzw. korzenie sekcji. Nie tworzą one nowych sekcji w dokumencie, a cała ich zawartość (ewentualne podsekcje) nie wchodzą w skład głównego spisu treści. Każdy taki element może mieć jednak swój własny, odrębny spis treści. Korzeniami sekcji są: BLOCKQUOTE, BODY, DETAILS, FIELDSET, FIGURE, TD.

Przykład:

Tak podzielony dokument:

<h1>Sekcja 1</h1>
<h2>Podsekcja 1.1</h2>
<blockquote>
	<h3>Osobna sekcja</h3>
</blockquote>
<p>Akapit podsekcji 1.1</p>
<h2>Podsekcja 1.2</h2>
<section>
	<h3>Podsekcja 1.3</h3>
</section>
<p>Akapit sekcji 1</p>

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

  1. Sekcja 1
    (zawiera akapit "Akapit sekcji 1")
    1. Podsekcja 1.1
      (zawiera blok cytowany i akapit "Akapit podsekcji 1.1")
    2. Podsekcja 1.2
      (nie ma żadnej zawartości oprócz nagłówka)
    3. Podsekcja 1.3
      (nie ma żadnej zawartości oprócz nagłówka)

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

<section>
	<h1>Sekcja 1</h1>
	<section>
		<h2>Podsekcja 1.1</h2>
		<blockquote>
			<section>
				<h3>Osobna sekcja</h3>
			</section>
		</blockquote>
		<p>Akapit podsekcji 1.1</p>
	</section>
	<section>
		<h2>Podsekcja 1.2</h2>
	</section>
	<section>
		<h3>Podsekcja 1.3</h3>
	</section>
	<p>Akapit sekcji 1</p>
</section>

HTML5 nie nakłada wymogu, aby numeracja nagłówków sekcji rozpoczynała się od H1. Choć może to wyglądać mało czytelnie, tak podzielony dokument:

<body>
	<h4>Jabłka</h4>
	<p>Jabłka są owocami.</p>
	<section>
		<h2>Smak</h2>
		<p>Smakują wyśmienicie.</p>
		<h6>Słodkość</h6>
		<p>Czerwone jabłka są bardziej słodkie niż zielone.</p>
		<h1>Kolor</h1>
		<p>Jabłka mają różne kolory.</p>
	</section>
</body>

...jeżeli chodzi o spis treści, jest równoważny następującemu:

<body>
	<h1>Jabłka</h1>
	<p>Jabłka są owocami.</p>
	<section>
		<h2>Smak</h2>
		<p>Smakują wyśmienicie.</p>
		<section>
			<h3>Słodkość</h3>
			<p>Czerwone jabłka są bardziej słodkie niż zielone.</p>
		</section>
	</section>
	<section>
		<h2>Kolor</h2>
		<p>Jabłka mają różne kolory.</p>
	</section>
</body>

Można nawet używać wyłącznie nagłówków pierwszego poziomu:

<body>
	<h1>Jabłka</h1>
	<p>Jabłka są owocami.</p>
	<section>
		<h1>Smak</h1>
		<p>Smakują wyśmienicie.</p>
		<section>
			<h1>Słodkość</h1>
			<p>Czerwone jabłka są bardziej słodkie niż zielone.</p>
		</section>
	</section>
	<section>
		<h1>Kolor</h1>
		<p>Jabłka mają różne kolory.</p>
	</section>
</body>

Ze względu na kompatybilność z przeglądarkami, które nie obsługują w pełni HTML5, najbezpieczniejszą formą numerowania nagłówków sekcji jest przedostatni przykład. Jeżeli usuniemy w nim znaczniki sekcji, dokument nadal będzie tak samo podzielony.

Znaczniki grupujące

Służą do grupowania innych elementów.

FIGURE, FIGCAPTION
Niezależny kawałek w treści oraz jego [opcjonalny] podpis. Zwykle odwołania do niego występują w głównej części dokumentu.

Oprócz wymienionych tutaj znaczników, do elementów grupujących zaliczamy również: P, HR, PRE, BLOCKQUOTE, OL, UL, LI, DL, DT, DD, DIV.

Elementy osadzone

Osadzają w dokumencie treści multimedialne.

VIDEO, AUDIO, SOURCE
Treść multimedialna. Udostępniają API, dzięki któremu możliwe jest oprogramowanie własnego interfejsu, jednak możliwe jest również skorzystanie z domyślnego, który zapewnia przeglądarka. Element SOURCE jest używany w połączeniu z tymi znacznikami, jeżeli ten sam materiał multimedialny jest dostępny w wielu formatach.
TRACK
Dostarcza ścieżki tekstowe dla elementu VIDEO.
EMBED
Treść generowana przez wtyczki przeglądarki.
CANVAS
Używane do renderowania dynamicznej grafiki rastrowej w czasie wyświetlania strony - takiej jak wykresy lub gry.

Oprócz wymienionych tutaj znaczników, do elementów osadzonych zaliczamy również: IMG, IFRAME, OBJECT, PARAM, MAP, AREA, MATH, SVG.

Semantyka tekstu

Wprowadzają znaczenie (semantykę) do objętego nimi fragmentu tekstu.

MARK
Zaznacza lub uwydatnia tekst w jednym dokumencie, w celu odwołania się do niego w innym kontekście.
TIME
Data i/lub czas.
RUBY, RT, RP
Przypisy ruby - specjalne krótkie wstawki obok bazowego tekstu, używane zwykle w dokumentach wschodnioazjatyckich do wskazania wymowy lub wstawienia krótkiej adnotacji. W języku japońskim ta forma przypisów jest również nazywana furigana.
BDI
Obejmuje tekst, odizolowany od otaczającej go zawartości dla celów dwukierunkowego formatowania tekstu.
WBR
Możliwość przełamania linii tekstu.

Oprócz wymienionych tutaj znaczników, do elementów semantyki tekstu zaliczamy również: A, EM, STRONG, SMALL, S, CITE, Q, DFN, ABBR, CODE, VAR, SAMP, KBD, SUB, SUP, I, B, U, BDO, SPAN, BR.

Formularze

Umożliwiają wstawienie na stronie interaktywnych formularzy, które po wypełnieniu przez użytkownika mogą zostać wysłane na serwer, poprzez e-mail lub obsłużone przez skrypty działające w przeglądarce.

DATALIST
Tworzy listę rozwijaną (kombi) dla elementu INPUT.
KEYGEN
Kontrolka do generowana pary kluczy kryptograficznych.
OUTPUT
Pewien rodzaj danych wyjściowych, np. wynik obliczeń ze skryptu.
PROGRESS
Stopień ukończenia zadania - np. pobierania albo w czasie wykonywania czasochłonnych operacji.
METER
Wynik pomiaru - np. zapełnienie dysku.

Oprócz wymienionych tutaj znaczników, do elementów formularzy zaliczamy również: FORM, FIELDSET, LEGEND, LABEL, INPUT, BUTTON, SELECT, OPTGROUP, OPTION, TEXTAREA.

Pole INPUT

Znany ze specyfikacji HTML 4.01 element INPUT, tworzy większość rodzajów kontrolek formularzy. O tym, jaki typ elementu zostanie wyświetlony na ekranie, decyduje wartość atrybutu type="...". W języku HTML5 wprowadzono wiele dodatkowych typów kontrolek dla znacznika INPUT. W przypadku kiedy przeglądarka nie będzie obsługiwać nowych typów kontrolek, na ekranie zostanie wyświetlone zwykłe pole tekstowe (<input type="text">). Co prawda wtedy efekt końcowy nie będzie zgody z oczekiwaniami, ale przynajmniej nie ma obawy, że użytkownik w ogóle nie będzie w stanie prawidłowo wypełnić takiego formularza. Zrobi to, wpisując odpowiednią wartość ręcznie.

Lista nowych typów elementu INPUT (wartości atrybutu type="..."):

tel
Numer telefonu
search
Pole wyszukiwania (interpretuje: Chrome)
url
Adres URL (Firefox, Opera, Chrome)
email
Adres poczty e-mail (Firefox, Opera, Chrome)
datetime
Data i czas (Opera)
date
Data (Opera, Chrome)
month
Miesiąc (Opera)
week
Tydzień w roku (Opera)
time
Czas (Opera, Chrome)
datetime-local
Data i czas lokalny (Opera)
number
Liczba (Opera, Chrome)
range
Przedział liczbowy (Opera, Chrome)
color
Kolor (Opera, Chrome)

Przykład:

Zobacz przykład: INPUT

Elementy interaktywne

Pozwalają wprowadzić na stronie interaktywność z użytkownikiem.

DETAILS, SUMMARY
Dodatkowe informacje albo kontrolki, które użytkownik może zobaczyć. Element SUMMARY dostarcza ich streszczenie, legendę lub podpis.
COMMAND
Komenda, którą może wywołać użytkownik.
DIALOG
Część aplikacji w postaci okna dialogowego.

Oprócz wymienionych tutaj znaczników, do elementów interaktywnych zaliczamy również MENU.

Nowe atrybuty HTML5

media

Dla otrzymania spójności z elementem LINK, znaczniki A oraz AREA uzyskały możliwość określania medium docelowego.

Zastosowanie: A, AREA.

hreflang, type, rel

Dla otrzymania spójności z elementami A oraz LINK, znacznik AREA uzyskał możliwość określania właściwości strony, do której kieruje odnośnik.

Zastosowanie: AREA.

charset

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

Co ciekawe, taką formę zapisu obsługują nawet stare wersje przeglądarki Internet Explorer. Dzieje się tak dlatego, że program ten w sposób uproszczony próbował wykryć deklarację strony kodowej, szukając w nagłówku dokumentu po prostu tekstu zaczynającego się od: charset=.

Zastosowanie: META.

autofocus

(interpretuje: Firefox, Opera, Chrome)

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

Zastosowanie: INPUT (z wyjątkiem type="hidden"), SELECT, TEXTAREA, BUTTON.

Przykład:

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

placeholder

(interpretuje: Firefox, Opera, Chrome)

Podpowiedź dla użytkownika, co powinien wpisać w danym polu formularza. Przez przeglądarki atrybut ten może być obsługiwany w ten sposób, że jego wartość będzie na początku wpisana w pole, a zniknie po umieszczeniu w nim kursora tekstowego przez użytkownika.

Zastosowanie: INPUT, TEXTAREA.

Przykład:

<input type="search" name="q" placeholder="Szukaj w serwisie...">

Zobacz przykład: placeholder="..."

form

W HTML 4.01 wszystkie kontrolki formularza musiały się znajdować wewnątrz znacznika FORM. W przeciwnym razie nie były wysyłane z formularzem. HTML5 pozwala umieścić kontrolki gdziekolwiek na stronie i skojarzyć je z wybranym formularzem za pomocą atrybutu form="...". Jako wartość atrybutu należy podać identyfikator nadany formularzowi (atrybutem id="...").

Zastosowanie: INPUT, OUTPUT, SELECT, TEXTAREA, BUTTON, LABEL, OBJECT, FIELDSET.

Przykład:

<form action="?" id="formualrz"></form>
<input type="text" name="pole" form="formularz">

required

(interpretuje: Firefox, Opera, Chrome)

Atrybut logiczny (wstawiany bez wartości), który zaznacza pole formularza jako obowiązkowe. Jeśli użytkownik go nie wypełni, nie będzie mógł w ogóle wysłać formularza.

Zastosowanie: INPUT (z wyjątkiem type="hidden", type="image", type="button", type="submit", type="reset") SELECT, TEXTAREA.

Przykład:

<ul>
<li><label>Imię i nazwisko: <input type="text" name="imie_nazwisko" required> *</label></li>
<li><label> Płeć: <select name="plec" required>
	<option value="">Wybierz...
	<option value="kobieta">Kobieta
	<option value="mezczyzna">Mężczyzna
</select> *</li>
</ul>
<p>* Pola obowiązkowe</p>

Zobacz przykład: required

disabled, name

(interpretuje: Firefox, Opera, Chrome)

Znacznik FIELDSET może mieć przypisany atrybut logiczny (wstawiany bez wartości) disabled. Spowoduje on zablokowanie wszystkich pól formularza objętych tym znacznikiem.

Temu samemu znacznikowi możemy również przypisać atrybut name="...", co może być przydatne w połączeniu z dynamicznymi skryptami, działającymi w przeglądarce (JavaScript).

Zastosowanie: FIELDSET.

Przykład:

Wszystkie poniższe pola formularza powinny zostać zablokowane:

<fieldset disabled>
	<legend>Formularz</legend>
	<input type="text" name="pole">
	<input type="radio" name="opcja" value="1">
	<input type="radio" name="opcja" value="2">
</fieldset>

Zobacz przykład: disabled

autocomplete

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.

Zastosowanie: INPUT.

p>

min, max, step

(interpretuje: Opera, Chrome)

Określa minimalny lub/i maksymalny zakres wartości, które można wypełnić w polu formularza oraz oczekiwany skok wartości (step).

Zastosowanie: INPUT.

Przykład:

<input type="date" name="urodziny" max="2012-12-21">
<input type="number" name="wzrost" min="30" max="300" step="0.1">

Zobacz przykład: min="...", max="...", step="..."

multiple

Atrybut logiczny (wstawiany bez wartości), określający, że w danym polu tekstowym można wpisać kilka wartości.

Zastosowanie: INPUT.

Przykład:

<input type="email" name="adresaci" multiple>

Zobacz przykład: multiple

pattern

(interpretuje: Firefox, Opera, Chrome)

Pozwala określić wyrażenie regularne, które musi być spełnione podczas wpisywania tekstu w polu formularza przez użytkownika. Jest to pewien rodzaj filtru, który uniemożliwia nieprawidłowe wypełnienie formularza.

Zastosowanie: INPUT.

Przykład:

Kod pocztowy musi się rozpoczynać dwiema cyframi, następnie zawierać myślnik i na końcu trzy cyfry (np. 12-345):

<input type="kod_pocztowy" pattern="^[0-9]{2}-[0-9]{3}$">

Zobacz przykład: pattern="..."

list

(interpretuje: Firefox, Opera, Chrome)

Pozwala skojarzyć z polem tekstowym listę predefiniowanych wartości, z których użytkownik może wybierać.

Zastosowanie: INPUT.

Przykład:

<input type="text" name="kolor" list="kolory">
<datalist id="kolory">
	<option value="czerwony">
	<option value="zielony">
	<option value="niebieski">
</datalist>

Zobacz przykład: list="..."

width, height

Ustala odpowiednio: szerokość i wysokość obrazkowego przycisku wysyłania formularza <input type="image">.

Zastosowanie: INPUT.

dirname

Pozwala wysłać z formularzem dodatkową informację o kierunku tekstu, w którym wybrane pole było wpisywane. W językach łacińskich tekst wpisuje się od lewej do prawej (dir="ltr"), ale w arabskim lub hebrajskim - od prawej do lewej (dir="rtl"). Jeżeli na naszą stronę wejdzie osoba z domyślnie ustawionym przeciwnym kierunkiem tekstu niż się spodziewaliśmy, treść wysłana w formularzu może być potem dla nas trudna do odczytania.

Zastosowanie: INPUT, TEXTAREA.

Przykład:

<form action="?">
	<input type="text" name="nazwa" dirname="nazwa.dir">
</form>

Tak przygotowany formularz może zostać wysłany w następujący sposób:

?nazwa=Witaj&nazwa.dir=ltr

Dzięki temu wiemy, że tekst przekazany w polu o nazwie "nazwa" został wpisany w kierunku od lewej do prawej ("ltr").

maxlength

W języku HTML 4.01 tylko zwykłe pole tekstowe formularza mogło mieć ograniczoną liczbę znaków, które użytkownik może do niego wpisać. HTML5 pozwala zrobić to również dla obszaru tekstowego.

Zastosowanie: TEXTAREA.

wrap

Określa sposób zawijania tekstu wpisywanego w obszarze tekstowym formularza:

soft
Tekst nie zostanie zawinięty w chwili wysyłania formularza, choć może być w taki sposób wyświetlony na ekranie (domyślnie).
hard
W momencie wysłania formularza, przeglądarka automatycznie zawinie tekst wpisany w polu, tzn. doda do niego znaki nowej linii, tak aby wyglądał jak na ekranie przed wysłaniem.

Zastosowanie: TEXTAREA.

novalidate

Atrybut logiczny (wstawiany bez wartości), który pozwala wyłączyć wszelką weryfikację pól formularza. Oznacza to, że użytkownik będzie mógł wysłać formularza, nawet jeżeli nie wypełni wszystkich obowiązkowych pól albo poda nieprawidłowe wartości (np. wpisze adres e-mail w niepoprawnym formacie).

Zastosowanie: FORM.

Przykład:

Mimo oznaczenia pola jako obowiązkowe, użytkownik będzie mógł wysłać formularz, nawet jeżeli go nie wypełni:

<form action="?" novalidate>
	<input type="text" value="nazwa" required>
</form>

formaction, formenctype, formmethod, formnovalidate, formtarget

Czasami zachodzi potrzeba, aby ten sam formularz mógł być wysłany na różne adresy URL, w zależności od przycisku, który użytkownik kliknie. Dotychczas nie było to możliwe bez zastosowania dynamicznych skryptów JavaScript, ponieważ formularz był wysyłany zawsze na adres, określony wartością atrybutu action="..." znacznika FORM. HTML5 wprowadza możliwość określenia oddzielnego adresu dla każdego przycisku wysłania formularza (<input type="submit">, <input type="image">, <button type="submit">). Wystarczy przypisać do przycisku atrybut formaction="..." i kiedy użytkownik w niego kliknie, formularz zostanie wysłany właśnie na ten adres URL.

Analogicznie można postąpić z pozostałymi atrybutami: formenctype="..." dla przycisków odpowiada enctype="..." całego formularza, formmethod="..." - method="...", formnovalidate - novalidate, formtarget="..." - target="...". [Zobacz specyfikację znacznika FORM].

Zastosowanie: INPUT, BUTTON.

Przykład:

<form action="form.php" method="post">
	<input type="submit" value="Wyślij na adres 1, w nowym oknie, pomiń walidację danych" formaction="button1.php" formmethod="get" formenctype="text/plain" formnovalidate formtarget="_blank">
	<input type="submit" value="Wyślij na adres 2" formaction="button2.php">
	<input type="submit" value="Wyślij na adres domyślny">
</form>

type, label, contextmenu

Atrybut type="..." pozwala przekształcić menu w element interfejsu użytkownika:

context
Menu kontekstowe - może być otwierane np. prawym przyciskiem myszy
toolbar
Pasek narzędzi

Atrybut label="..." nadaje etykietę, która może być przydatna, kiedy menu główne zawiera w sobie podmenu.

Zastosowanie: MENU.

Aby przypisać menu kontekstowe do dowolnego elementu na stronie, należy nadać mu atrybut contextmenu="..." o wartości identycznej, jak identyfikator wybranego menu (podany atrybutem id="...").

Przykład:

Pasek narzędzi:

<menu type="toolbar">
	<li>
		<menu label="Plik">
			<button type="button" onclick="fnew()">Nowy...</button>
			<button type="button" onclick="fopen()">Otwórz...</button>
			<button type="button" onclick="fsave()">Zapisz</button>
			<button type="button" onclick="fsaveas()">Zapisz jako...</button>
		</menu>
	</li>
	<li>
		<menu label="Edycja">
			<button type="button" onclick="ecopy()">Kopiuj</button>
			<button type="button" onclick="ecut()">Wytnij</button>
			<button type="button" onclick="epaste()">Wklej</button>
		</menu>
	</li>
	<li>
		<menu label="Pomoc">
			<li><a href="help.html">Pomoc</a></li>
			<li><a href="about.html">O programie</a></li>
		</menu>
	</li>
</menu>

Poniższy formularz zawiera pole tekstowe, w którym użytkownik powinien wpisać nazwę dowolnego owocu. Może jednak kliknąć na polu prawym przyciskiem myszy - albo wywołać menu kontekstowe we właściwy dla swojego systemu operacyjnego sposób - i wybrać jedną z proponowanych opcji.

<form action="?" name="formularz">
	<label>Podaj owoc: <input type="text" name="owoc" contextmenu="owoce"></label>
	<menu type="context" id="owoce">
		<command label="jabłko" onclick="document.forms.formularz.elements.owoc.value = 'jabłko'">
		<command label="gruszka" onclick="document.forms.formularz.elements.owoc.value = 'gruszka'">
		<command label="banan" onclick="document.forms.formularz.elements.owoc.value = 'banan'">
	</menu>
</form>

scoped

Ograniczenie możliwości wstawienia wewnętrznego arkusza stylów tylko do nagłówka dokumentu, mogło czasem stanowić problem. HTML5 znosi tę niedogodność, pozwalając wstawiać arkusz bezpośrednio wewnątrz elementów dokumentu - z przypisanym atrybutem logicznym scoped. Formatowanie określone w takim arkuszu uzyska element, w którym się on zawiera oraz wszystkie jego elementy potomne. Aby w takim arkuszu ustalić formatowanie dla całego dokumentu, należy się posłużyć regułą @global.

Zawężony wewnętrzny arkusz stylów (z przypisanym atrybutem scoped) musi być umieszczony jako pierwsze dziecko elementu, do którego ma się odnosić.

Zastosowanie: STYLE.

<!doctype html>
<html>
	<head>
		<title>...</title>
	</head>
	<body>
		<div>
			<style scoped>
			/* Ten arkusz nadaje formatowanie tylko znacznikowi DIV,
			w którym się zawiera oraz jego elementom potomnym: P, EM. */
			div { color: red }
			/* Aby ustalić style globalne dla całej strony,
			należy wykorzystać specjalną składnię: */
			@global {
				body { color: green }
			}
			</style>
			<p>Tekst tego <em>akapitu</em> powinien być czerwony ("red").</p>
		</div>
		<p>Tekst tego akapitu powinien być zielony ("green").</p>
	</body>
</html>

async

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

Zastosowanie: SCRIPT.

sizes

Podpowiada przeglądarce wymiary ikony strony, tak aby mogła zostać pobrana najbardziej odpowiednia do wyświetlenia w interfejsie użytkownika.

Zastosowanie: LINK.

<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
<link rel="icon" href="icon.png" type="image/png" sizes="32x32">

reversed

Atrybut logiczny (wstawiany bez wartości), który ustala odwrotną kolejność numeracji (...3, 2, 1) punktów listy uporządkowanej.

Zastosowanie: OL.

seamless, srcdoc

Atrybut logiczny (wstawiany bez wartości) seamless pozwala wyświetlić ramkę lokalną na stronie, tak jakby była integralną częścią dokumentu, tzn. bez suwaków ani obramowania, o wymiarach automatycznie dopasowanych do jej zawartości.

Dzięki atrybutowi srcdoc="..." do ramki lokalnej nie musimy wczytywać osobnego pliku HTML, ale możemy wprost podać kod HTML, który się w niej wyświetli.

Zastosowanie: IFRAME.

Przykład:

<iframe seamless srcdoc="<a href=&quot;index.html&quot;>Strona główna</a>"></iframe>

contenteditable

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.

data-*

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.

hidden

Atrybut logiczny (wstawiany bez wartości), który można nadać dowolnemu znacznikowi na stronie. Wskazuje on, że element nie jest jeszcze (albo już dłużej nie jest) istotny, z punktu widzenia pozostałej zawartości dokumentu. Przeglądarka nie powinna wyświetlać takich znaczników na ekranie.

translate, spellcheck

W sieci pojawiły się specjalne programy, służące do automatycznego tłumaczenia stron obcojęzycznych na język rodzimy użytkownika. Jednak nie każdy fragment tekstu powinien być tłumaczony. Na przykład kod programu, zawierający instrukcję w języku angielskim, powinien zostać nietknięty przez aplikację tłumaczącą. Aby zabronić tłumaczenia tekstu, należy do elementu, który go obejmuje, przypisać atrybut translate="false".

Podobnie popularne przeglądarki mają wbudowaną funkcję automatycznego sprawdzania pisowni tekstu, wpisywanego przez użytkownika w obszarze tekstowym. Aby zablokować tę funkcję, należy do elementu przypisać atrybut spellcheck="false".

Zmienione elementy i atrybuty HTML5

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, KEYGEN, 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, HGROUP), 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, HGROUP).
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.
colspan
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".
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.
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.
value
Dla elementu LI nie jest już zdeprecjonowany.
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 ("#").

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

Przestarzałe elementy i atrybuty HTML5

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.

Znaczniki pogarszające dostępność

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

przestarzałe atrybuty dla elementów
rev, charset LINK, A
shape, coords A
longdesc IMG, IFRAME
target LINK
nohref AREA
profile HEAD
version HTML
name IMG
scheme META
archive, classid, codebase, codetype, declare, standby OBJECT
valuetype, type PARAM
axis, abbr TD, TH
scope TD
summary TABLE
Atrybuty formatujące
przestarzałe atrybuty dla elementów
align CAPTION, IFRAME, IMG, INPUT, OBJECT, LEGEND, TABLE, HR, DIV, H1, H2, H3, H4, H5, H6, P, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
alink, link, text, vlink BODY
background BODY
bgcolor TABLE, TR, TD, TH, BODY
border OBJECT
cellpadding, cellspacing TABLE
char, charoff COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
clear BR
compact DL, MENU, OL, UL
frame TABLE
frameborder TABLE
height TD, TH
hspace, vspace IMG, OBJECT
marginheight, marginwidth IFRAME
noshade HR
nowrap TD, TH
rules TABLE
scrolling IFRAME
size HR
type LI, UL
valign COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR
width HR, TABLE, TD, TH, COL, COLGROUP, PRE

SECTION

<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. Nie ma żadnego ograniczenia co do liczby możliwych zagnieżdżeń podsekcji (w HTML 4.01 takim ograniczeniem był maksymalny poziom nagłówków tytułowych - H6).

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 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. W takim przypadku nadużywanie sekcji nie jest poprawne, gdyż zaburza strukturę automatycznego spisu treści dokumentu (zobacz: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). 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:

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.

ARTICLE

<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 powinien mieć na początku określony nagłówek (zobacz również: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). 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:

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.

ASIDE

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

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>

HGROUP

<hgroup>
	<hm>...</hm>
	<hn>...</hn>
</hgroup>
(m = 1...5, n = m + 1)

Służy do definiowania nagłówków dla sekcji (ARTICLE, ASIDE NAV, SECTION), poprzez grupowanie tytułów nagłówkowych.

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. Umieszczenie znacznika np. H2 zaraz po H1 sprawiało, że cała dalsza treść tak naprawdę zawierała się w podsekcji, a nie w sekcji głównej.

HTML5 uzupełnia ten brak. Jako nagłówek sekcji możemy wstawić element HGROUP, który zawiera znaczniki H1 i H2. Tytułem sekcji będzie znacznik o najważniejszym poziomie (tutaj H1), a pozostałe zostaną oznaczone jako podtytuły i nie utworzą nowej podsekcji w dokumencie. Ma to niebagatelne znaczenie przy automatycznym tworzeniu spisu treści dokument (zobacz: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5").

Przykład:

W poniżej zamieszczonym przykładzie, znacznik H2 stanowi podtytuł i nie wlicza się do automatycznego spisu treści dokumentu:

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

Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji (H1, H2, H3, H4, H5, H6 lub 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, HGROUP. W szczególności znacznik HEADER nie tworzy nowej, niejawnej sekcji w dokumencie (zobacz: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5").

Przykład:

<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")
<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, niejawnej sekcji w dokumencie.

Przykład:

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

<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. Raczej niewłaściwym miejscem na element NAV będą linki umieszczone w środku treści tekstowej artykułu.

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:

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>

Szablon strony w HTML5

Mając do dyspozycji język HTML 4.01, jedyną możliwością zbudowania prawidłowego szkieletu 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 mogło być prawidłowe. Bardzo dawno temu, gdy nie było innej możliwości, używało się do tego tabel, ale takie podejście jest dziś uznawane za bardzo poważny błąd semantyczny.

W 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. W tym celu przypomnijmy sobie, że element BODY jest korzeniem sekcji (zobacz: "Sekcje / Nagłówki sekcji" w rozdziale "Nowe elementy HTML5"). Wynika z tego, że wszystkie sekcje w nim umieszczone odnoszą się tak naprawdę nie do konkretnego artykułu zamieszczonego w pojedynczym dokumencie, ale do witryny jako całości.

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>...</title>
	</head>
	<body>
		<div id="top">
			<header id="NAGLOWEK">Nagłówek szablonu</header>
			<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 jest już korzeniem sekcji.

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:

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

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

MARK

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

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

TIME

<time>data/czas</time>
<time datetime="data/czas">...</time>
"data/czas" są zapisane w formacie zdefiniowanym standardem ISO8601.

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="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

WBR

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

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

DATALIST

(interpretuje: Firefox, Opera, Chrome)

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

Przykład:

Zobacz przykład: DATALIST

PROGRESS

(interpretuje: Firefox, Opera, Chrome)

  • Nieokreślony stopień ukończenia:
    <progress>alternatywa</progress>
  • Pasek postępu:
    <progress value="współczynnik">alternatywa</progress>
    <progress value="wartość" max="maksimum">alternatywa</progress>
alternatywa
Alternatywna zawartość, wyświetlana w przeglądarkach, które nie obsługują HTML5. Powinno się tam umieścić np. tekst "Proszę czekać..." albo "Ukończono: 50%".
współczynnik
Wartość z przedziału od 0.0 (stopień postępu 0%) do 1.0 (100%).
wartość
Liczba z przedziału od 0 (zero) do maksimum.
maksimum
Maksymalna wartość, po osiągnięciu której zadanie uważa się za ukończone (100%).

Pozwala wstawić na stronie standardowy pasek postępu, który przedstawia stopień ukończenia jakiegoś zadania. Umożliwia również wskazać nieokreślony stopień 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ę.

Przykład:

Zobacz przykład: PROGRESS

METER

(interpretuje: Firefox, Opera, Chrome)

  • Pasek wyniku:
    <meter value="współczynnik">alternatywa</meter>
  • Minimum i maksimum:
    <meter value="wartość" min="minimum" max="maksimum">alternatywa</meter>
  • Przedziały wartości:
    <meter value="współczynnik" low="niski" high="wysoki">alternatywa</meter>
    <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>
    <meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka" optimum="optymalna">alternatywa</meter>
alternatywa
Alternatywna zawartość, wyświetlana w przeglądarkach, które nie obsługują HTML5. Powinno się tam umieścić np. zapisaną tekstowo wartość, którą przedstawia pasek wyniku.
współczynnik
Wartość z przedziału od 0.0 (0%) do 1.0 (100%).
wartość
Liczba z przedziału od minimum do maskimum.
minimum, maksimum
Przedział dopuszczalnych wartości jakie może osiągnąć wynik.
niski, wysoki, optymalny
Liczby z przedziału od 0.0 do 1.0 (niskiwysoki), które określają, jaka wartość współczynnika jest uznawana odpowiednio za: niską, wysoką, optymalną.
niska, wysoka, optymalna
Liczby z przedziału od minimum do maksimum (niskawysoka), które określają, jaka wartość jest uznawana odpowiednio za: niską, wysoką, optymalną.

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.

Jeżeli podana wartość wyniku będzie mniejsza od wartości atrybutu low="..." albo większa niż high="...", przeglądarki mogą oznaczyć taki pasek wyniku w specjalny sposób, sygnalizując w ten sposób, że prezentowany wynik nie jest optymalny. Na przykład pasek z optymalnym wynikiem może mieć kolor zielony, a z wynikiem niskim lub wysokim - żółty.

Przykład:

Zobacz przykład: METER

DETAILS, SUMMARY

(interpretuje: Chrome)

  • 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;
}

Przykład:

Zobacz przykład: DETAILS, SUMMARY