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.

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.

autofocus

(interpretuje: Internet Explorer 11, 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 <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>

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.

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.

crossorigin

Steruje przesyłaniem danych uwierzytelniających takich jak ciasteczka (ang. cookies).

anonymous

Dane uwierzytelniające zostaną przesłane tylko w przypadku, kiedy odwołanie nastąpi z tej samej domeny. Czyli przykładowo jeśli na naszej stronie wstawimy obrazek znajdujący się na innym serwerze, będziemy mieli pewność, że jego zawartość nie będzie w żaden sposób dopasowana do użytkownika, który aktualnie odwiedza naszą stronę.

use-credentials

Zostaną wysłane pełne dane uwierzytelniające bez względu na domenę.

Zastosowanie: AUDIO, IMG, LINK, SCRIPT, VIDEO.

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.

decoding

Podpowiada przeglądarce, w jaki sposób najlepiej wyświetlić dany obrazek.

sync

Przeglądarka powinna wstrzymać przetwarzanie reszty strony, dopóki nie nie wyświetli obrazka.

async

Przeglądarka może wyświetlać pozostałe elementy strony w trakcie przetwarzania obrazka.

auto

Wartość domyślna

Nadanie atrybutu decoding="sync" może spowolnić wyświetlanie całej strony - zwłaszcza w przypadku dużych obrazków.

Zastosowanie: IMG.

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

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

disabled, name

(interpretuje: Internet Explorer 11, 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 <fieldset disabled>

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

download

(interpretuje: Firefox, Opera 15, Chrome)

Wskazuje, że hiperłącze służy do pobierania pliku ze strony. Dzięki temu można np. wymusić pobranie wskazanego dokumentu *.html na dysk lokalny użytkownika - w przeciwnym razie po kliknięciu odnośnika nastąpiłoby wyświetlenie wskazywanego dokumentu bezpośrednio w przeglądarce, a nie rozpoczęcie jego pobierania.

Jeżeli podano wartość tego atrybutu, określa ona domyślną nazwę, jaką powinien przyjąć plik, po zapisaniu go na dysku lokalnym użytkownika (w Firefox).

Zastosowanie: A, AREA.

draggable, ondragstart, ondrag, ondragenter, ondragexit, ondragleave, ondragover, ondrop, ondragend

Pozwalają sterować mechanizmem przeciągnij-i-upuść (ang. drag-and-drop). Zwykle polega on na wskazaniu przeciąganego elementu myszką, wciśnięciu i przytrzymaniu przycisku myszki, przeniesieniu elementu w inne miejsce i zwolnieniu przycisku myszki.

Atrybut draggable="..." określa, czy oznaczony nim element da się przeciągnąć. Może przyjąć jedną z dwóch wartości:

true

Element można przeciągnąć myszką.

false

Element nie może zostać przeciągnięty.

Oprócz tego do sterowania mechanizmem przeciągnij-i-upuść służą zdarzenia:

ondragstart

Zapoczątkowanie operacji przeciągania

ondrag

Kontynuacja operacji przeciągania

ondragenter

Przeciągnięcie obiektu ponad element, gdzie może zostać on upuszczony

ondragexit, ondragleave

Przeciągnięcie obiektu z elementu, gdzie mógł on być upuszczony

ondragover

Przeciąganie elementu ponad obiektem, gdzie może on zostać upuszczony

ondrop, ondragend

Zwolnienie przycisku myszki podczas operacji przeciągania

Do realizacji mechanizmu przeciągnij-i-upuść na stronie WWW konieczna jest znajomość języków skryptowych - takich jak JavaScript - co wykracza poza zakres tego poradnika.

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, input form>

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

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 <input submit formaction>

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

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.

list

(interpretuje: Internet Explorer 10, 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 list, datalist>

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

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

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: INPUT, TEXTAREA.

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 number min max step>

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

minlength

Pozwala wymusić wpisanie w polu formularza tekstu składającego się przynajmniej z podanej liczb znaków.

Zastosowanie: INPUT, TEXTAREA.

multiple

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

Zastosowanie: INPUT, SELECT.

Przykład <input multiple>

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

Zobacz przykład: multiple

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

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>

pattern

(interpretuje: Internet Explorer 10, 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.

Jeśli użytkownik wpisze wartość w niepoprawnym formacie, przeglądarka wyświetli komunikat błędu i zablokuje możliwość wysłania formularza. Komunikat ten będzie jednak dość ogólny - np. "Podaj wartość w wymaganym formacie". Niestety użytkownik może się nie domyślić, co właściwie oznacza ten "wymagany format". Dlatego zaleca się dodatkowo ustawić atrybut title="...", w którym możemy bardziej szczegółowo opisać, co powinno być wpisane w danym polu.

Zastosowanie: INPUT.

Przykład <input pattern>

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}$" title="pięć cyfr w postaci XX-XXX">

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

placeholder

(interpretuje: Internet Explorer 10, 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 placeholder>

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

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

required

(interpretuje: Internet Explorer 10, 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 <input required, select required>

<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

reversed

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

Zastosowanie: OL.

sandbox

(interpretuje: Internet Explorer 10, Firefox, Opera 15, Chrome)

Dodanie do ramki IFRAME atrybutu logicznego sandbox (bez wartości) pozwala nałożyć dodatkowe ograniczenia na treść, wyświetlaną w ramce lokalnej: blokuje formularze, skrypty, API, atrybuty target="...", wtyczki oraz nawigację w innych ramkach i oknach. Możemy poluźnić te ograniczenia, przypisując odpowiednią wartość atrybutowi sandbox="..." - w postaci jednej lub więcej poniższych wartości rozdzielonych spacjami (wielkość liter nie ma znaczenia):

allow-forms

Pozwala wysyłać formularze.

allow-modals

Pozwala otwierać okna modalne, tzn. takie które blokują stronę dopóki użytkownik ich nie zamknie (obsługuje: Firefox 49). W języku JavaScript są to funkcje: alert, confirm, print, prompt, a także zdarzenie onbeforeunload.

allow-pointer-lock

Zezwala na używanie API blokującego wskaźnik myszki.

allow-popups

Pozwala na otwieranie wyskakujących okien oraz używanie atrybutu target="_blank". Każde nowe okno, które zostanie otwarte przez stronę w ramce, przejmuje wszystkie ograniczenia nałożone atrybutem sandbox.

allow-popups-to-escape-sandbox

Pozwala, aby otwarte nowe okna nie miały już żadnych ograniczeń (obsługuje: Firefox 49, Opera 32, Chrome 46). Może to być przydatne np. w przypadku wyświetlania reklam. Chcielibyśmy mieć pewność, że reklama niczego nie popsuje na naszej stronie, ale jednocześnie nie chcemy, aby po kliknięciu w reklamę strona docelowa posiadała jakiekolwiek ograniczenia.

To polecenie samo w sobie nie zezwala na otwieranie okien, a jedynie zdejmuje ograniczenia, jeśli już nowe okno zostanie otwarte. Aby było możliwe otwieranie nowych okien, należy posłużyć się wartością sandbox="allow-popups allow-popups-to-escape-sandbox".

allow-same-origin

Zezwala odczytywać ciasteczka przeglądarki oraz dane użytkownika z innych podobnych mechanizmów.

allow-scripts

Zezwala na uruchamiania skryptów JavaScript.

allow-top-navigation

Pozwala na używanie atrybutu target="_top" dla odnośników.

allow-top-navigation-by-user-activation

Pozwala na używanie atrybutu target="_top" dla odnośników, ale tylko jeśli użytkownik sam w nie kliknie, a nie zostaną otwarte automatycznie poprzez skrypt w ramce (obsługuje: Opera 45, Chrome 58).

Podanie wartości sandbox="allow-scripts allow-same-origin" sprawi, że strona w ramce lokalnej będzie mogła samodzielnie usunąć atrybut sandbox i w ten sposób pozbyć się wszystkich nałożonych na nią ograniczeń.

Nakładanie ograniczeń na stronę pozwala wyświetlić w ramce lokalnej treść, która potencjalnie mogłaby być niebezpieczna dla czytelnika naszego serwisu. Oczywiście sami raczej nie zaatakujemy użytkownika serią wyskakujących okienek ani świadomie nie zainstalujemy mu konia trojańskiego czy wirusa. Nie zawsze jednak mamy pełną kontrolę nad wyświetlaną u nas treścią. Możemy chcieć osadzić na stronie jakiś widżet, pochodzący z innego serwisu. Będzie on bardzo przydatny, ale nie da się wykluczyć złych zamiarów jego twórcy lub przejęcia kontroli nad jego stroną przez osoby o takich zamiarach. W takim przypadku możemy zminimalizować ryzyko, osadzając widżet w następujący sposób:

<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://example.com/widget.html"></iframe>

Zwracam uwagę, że jeśli już ustawimy atrybut sandbox="...", to zablokowane zostaną wszystkie potencjalnie niebezpieczne działania, które nie zostały wyszczególnione w jego wartości. Może to wywołać nieoczekiwane efekty w starszych przeglądarkach, które obsługują tylko część z wartości tego atrybutu.

Na przykład jeśli wstawimy na stronie taki kod:

<iframe sandbox="allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox" src="http://example.com/widget.html"></iframe>

to w Internet Explorerze otrzymamy ramkę, w której nie będą działały żadne odnośniki z nadanym atrybutem target="_top", a każde otwarte nowe okno nadal będzie posiadało te same ograniczenia co ramka.

Zastosowanie: IFRAME.

srcdoc

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

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

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

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

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

width, height

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

Zastosowanie: INPUT.

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.