Język HTML 4 stał się oficjalną rekomendacją W3C w 1997 roku. Pierwsza wersja specyfikacji XHTML 1 została ogłoszona w roku 2000. Celem XHTML 1.0 ani 1.1 nie było wprowadzanie nowych znaczników ani atrybutów, ale zbliżenie składni języka HTML do XML. Miało to umożliwić twórcom oraz administratorom serwisów internetowych korzystanie z narzędzi i bibliotek dostępnych dla języka XML oraz pozwolić na większą rozszerzalność HTML - poprzez możliwość osadzania w dokumencie XHTML fragmentów pochodzących z innych specyfikacji XML (SVG, MathML, RDF). Jednak brak nowych możliwości języka, w ciągle rozwijającej się sieci, zaczął mocno doskwierać twórcom oraz producentom przeglądarek. Z tego powodu konsorcjum W3C rozpoczęło prace nad specyfikacją XHTML 2.0, która miała całkowicie zerwać z historycznymi zaszłościami języka HTML 4. Krok ten nie spodobał się producentom popularnych przeglądarek internetowych, którzy przez lata tworzyli swoje produkty tak, aby były zgodne z językiem HTML. Nie ma co ukrywać, że wprowadzenie XHTML 2.0 mogłoby być również sporym problemem dla zwykłych użytkowników, którzy nie mając zainstalowanej najnowszej wersji przeglądarki, zapewne nie mogliby w ogóle wyświetlić stron zgodnych z nowym standardem. Z tych powodów prace nad XHTML 2.0 zostały ostatecznie przerwane i specyfikacja ta zapewne nigdy nie zostanie ukończona.
Problem jednak nadal pozostał. Dzisiaj Internet nie taki sam, jak w 1997 roku, kiedy dominowały statyczne dokumenty tekstowe, a multimedialność polegała na wstawieniu do artykułu kilku ilustracji. Dlatego producenci popularnych przeglądarek postanowili rozpocząć prace nad nową wersję znanego wszystkim języka znaczników - HTML tym razem już w odsłonie nr 5. Potem dla ostatecznego opracowania nowej specyfikacji, powołano grupę roboczą W3C. Głównymi celami HTML5 są:
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.
<!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.
<?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 (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>
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('keygen');
document.createElement('main');
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, main, nav, section {
display: block;
}
audio, canvas, embed, keygen, meter, progress, video {
display: inline-block;
}
[hidden] {
display: none;
}Jeżeli nie korzystasz z możliwości CSS, nie musisz używać żadnej z wyżej przedstawionych sztuczek... ale może w takim razie to już najwyższy czas, aby poznać Kaskadowe Arkusze Stylów ;-)
Sekcje to odrębne tematycznie fragmenty treści na stronie. Można je porównać do rozdziałów w książce. Każda sekcja może mieć nagłówek (tytuł rozdziału) i stopkę (zawierającą informacje o autorze, prawach autorskich itp.).
W ramach znaczników przydatnych przy wstawianiu sekcji, wyróżnić możemy elementy, które fizycznie te sekcje tworzą (ang. sectioning elements) - są to: ARTICLE, ASIDE, NAV, SECTION. Definiują one w dokumencie zakres dla nagłówków (H1, H2, H3, H4, H5, H6) i stopek (FOOTER).
Oprócz wymienionych tutaj znaczników, do elementów używanych przy wstawianiu sekcji zaliczamy również BODY.
Jeżeli z kodu źródłowego strony usuniemy całą treść oprócz nagłówków wszystkich sekcji i podsekcji, powinniśmy otrzymać zagnieżdżoną listę w formie spisu treści dokumentu (ang. document outline). Nawet jeśli jawnie nie umieścimy spisu treści na stronie, taki domniemany spis nagłówków może być niezwykle przydatny dla czytelników serwisu. Osoby niewidome, korzystające z przeglądarki automatycznie tworzącej spisy z nagłówków, będą mogły przeskakiwać od razu do interesujących je sekcji dokumentu. Pozostali użytkownicy również na tym skorzystają, gdyż otrzymają dokument poukładany w logiczne części (w obszernym niepodzielonym na rozdziały tekście, trudno jest się połapać). Prawidłowo oznaczone nagłówki sekcji mają również pozytywny efekt, jeżeli chodzi o pozycję tak zbudowanej strony w wynikach wyszukiwarek internetowych. Dlatego warto o to szczególnie zadbać.
Do nagłówków sekcji zaliczamy: H1, H2, H3, H4, H5, H6. Każda sekcja dokumentu ma co najwyżej jeden nagłówek, a sekcje nieposiadające znaczników nagłówków, otrzymują nagłówki niejawne - np. "Niezatytułowana sekcja". Oznacza to, że wstawienie nagłówka - nawet bez elementu fizycznie oznaczającego sekcję (ARTICLE, ASIDE, NAV, SECTION) - tworzy nową sekcję w sposób niejawny (jeśli poziom nagłówka jest przynajmniej tak samo ważny jak poprzedni) lub podsekcję (gdy nagłówek ma mniej ważny poziom). Poziom nagłówka, w obrębie elementów fizycznie tworzących sekcje, nie ma znaczenia. Jeżeli do dokumentu wstawimy dwa następujące po sobie elementy SECTION, z który pierwszy będzie miał np. nagłówek H2, a drugi H3, to w spisie treści dokumentu obie te sekcje i będą równorzędne.
Oprócz elementów tworzących sekcje, wyróżniamy również tzw. korzenie sekcji. Nie tworzą one nowych sekcji w dokumencie, a cała ich zawartość (ewentualne podsekcje) nie wchodzą w skład głównego spisu treści. Każdy taki element może mieć jednak swój własny, odrębny spis treści. Korzeniami sekcji są: BLOCKQUOTE, BODY, DETAILS, FIELDSET, FIGURE, TD.
Przykład:
Tak podzielony dokument:
<h1>Sekcja 1</h1> <h2>Podsekcja 1.1</h2> <blockquote> <h3>Osobna sekcja</h3> </blockquote> <p>Akapit podsekcji 1.1</p> <h2>Podsekcja 1.2</h2> <section> <h3>Podsekcja 1.3</h3> </section> <p>Akapit sekcji 1</p>
...utworzy następujący spis treści:
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.
Służą do grupowania innych elementów.
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.
Osadzają w dokumencie treści multimedialne.
Oprócz wymienionych tutaj znaczników, do elementów osadzonych zaliczamy również: IMG, IFRAME, OBJECT, PARAM, MAP, AREA, MATH, SVG.
Wprowadzają znaczenie (semantykę) do objętego nimi fragmentu 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.
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.
Oprócz wymienionych tutaj znaczników, do elementów formularzy zaliczamy również: FORM, FIELDSET, LEGEND, LABEL, INPUT, BUTTON, SELECT, OPTGROUP, OPTION, TEXTAREA.
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="..."):
Przykład:
Zobacz przykład: INPUT
Pozwalają wprowadzić na stronie interaktywność z użytkownikiem.
Oprócz wymienionych tutaj znaczników, do elementów interaktywnych zaliczamy również MENU.
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.
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.
(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:
<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>
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.
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.
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.
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").
(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:
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
(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).
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:
Atrybut dropzone="..." określa element, na którym da się upuścić przeciąganą zawartość. Może przyjąć jedną lub więcej z podanych poniżej wartości rozdzielonych spacjami (wielkość liter nie ma znaczenia):
Oprócz tego do sterowania mechanizmem przeciągnij-i-upuść służą zdarzenia:
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.
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="formularz"></form> <input type="text" name="pole" form="formularz">
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].
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>
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.
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.
(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 type="text" name="kolor" list="kolory"> <datalist id="kolory"> <option value="czerwony"> <option value="zielony"> <option value="niebieski"> </datalist>
Zobacz przykład: list="..."
Pozwala w sposób zaawansowany sterować pamięcią podręczną przeglądarki, umożliwiając tworzenie aplikacji dziających w trybie offline, tzn. po odcięciu dostępu do sieci.
Zastosowanie: HTML.
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.
Dla otrzymania spójności z elementem LINK, znaczniki A oraz AREA uzyskały możliwość określania medium docelowego.
(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="..."
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
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>
(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.
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="..."
(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 type="search" name="q" placeholder="Szukaj w serwisie...">
Zobacz przykład: placeholder="..."
(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:
<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
Atrybut logiczny (wstawiany bez wartości), który ustala odwrotną kolejność numeracji (...3, 2, 1) punktów listy uporządkowanej.
Zastosowanie: OL.
(interpretuje: Internet Explorer 10, Firefox, Opera 15, Chrome)
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):
target="_top" dla odnośników.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>
Zastosowanie: IFRAME.
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>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="index.html">Strona główna</a>"></iframe>
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">
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".
Atrybut type="..." pozwala przekształcić menu w element interfejsu użytkownika:
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>
Atrybut logiczny, który wskazuje, że typ zawartości zasobu podanego w atrybucie data="..." musi być taki sam, jak wartość określona atrybutem type="...". Pozwala to zabezpieczyć się przed błędami lub próbami ataków przy wczytywaniu zasobów z zewnętrznych serwerów.
Zastosowanie: OBJECT.
Ustala odpowiednio: szerokość i wysokość obrazkowego przycisku wysyłania formularza <input type="image">.
Zastosowanie: INPUT.
Określa sposób zawijania tekstu wpisywanego w obszarze tekstowym formularza:
Zastosowanie: TEXTAREA.
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).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.shape="circle".type="...". Najlepiej w ogóle pominąć atrybut language="...", ponieważ nie ma on żadnej użytecznej funkcji.id="...".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.
Ich funkcję przejęły style CSS.
Rodziły niejasności co do ich pierwotnego przeznaczenia. Ich funkcje z powodzeniem mogą przejąć inne elementy.
| 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 |
| 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>
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>
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>
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>
<header>...</header>
Reprezentuje grupę wprowadzającą albo ułatwienia nawigacyjne. Zwykle zawiera nagłówek sekcji (H1, H2, H3, H4, H5, H6) ale nie jest to absolutnie konieczne. Może zawierać również: spis treści, formularz wyszukiwania, logo.
Sam element HEADER nie stanowi nagłówka sekcji. Może to być nieco mylące, ponieważ z kolei element FOOTER stanowi stopkę sekcji. Elementami definiującymi nagłówek sekcji są: H1, H2, H3, H4, H5, H6. W szczególności znacznik HEADER nie tworzy nowej, 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:
<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>
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>
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> <meta charset="UTF-8"> </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> <meta charset="UTF-8"> </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ść.
<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> <meta charset="UTF-8"> </code></pre> </figure>
<main>...</main>
Strony internetowe nie są zwyczajnymi dokumentami elektronicznymi. Z racji na naturę hipertekstu w każdym serwisie WWW możemy wyznaczyć menu nawigacyjne, nagłówek witryny zwykle z osadzonym logo, stopkę zawierającą np. informacje o prawach autorskich. Wszystkie te elementy niezwykle ułatwiają przeglądanie witryny. Jednak użytkownicy odwiedzają stronę przede wszystkim nie po to, żeby oglądać menu czy logo. Głównym celem jest dotarcie do treści, która jest zawarta w serwisie. Taka treść może ginąć w natłoku wszystkich elementów pomocniczych witryny. Zwłaszcza wyszukiwarki i czytniki ekranowe mogą mieć problemy z prawidłowym wyznaczeniem tej części dokumentu HTML, która zawiera główną treść, ze względu na którą użytkownik zdecydował się odwiedzić serwis.
Właśnie w tym celu został stworzony element MAIN. Powinniśmy nim oznaczyć główną treść każdego dokumentu. Zwykle można ją rozpoznać po tym, że jest bezpośrednio związana z tytułem strony. Znacznikiem MAIN nie należy obejmować żadnych stałych elementów, które powtarzają się w całym serwisie: menu nawigacyjnego, informacji o prawach autorskich, logo serwisu, bannerów, formularzy wyszukiwania itp. Znacznik ten może jednak obejmować linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach.
W pojedynczym dokumencie nie można umieścić więcej niż jednego elementu MAIN. Element ten nie może być również umieszczony wewnątrz: ARTICLE, ASIDE, FOOTER, HEADER ani NAV.
Przykład:
<!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Matrix - Serwis kinomaniaków</title> <head> <body> <header> Serwis kinomaniaków <nav> <ul> <li><a>Matrix</a></li> <li><a href="incepcja.html">Incepcja</a></li> <li><a href="trzynaste-pietro.html">Trzynaste piętro</a></li> </ul> </nav> </header> <main> <h1>Matrix</h1> <nav> <ul> <li><a href="#czym-jest-matrix">Czym jest Matrix?</a></li> <li><a href="#matrix-reaktywacja">Matrix: Reaktywacja</a></li> <li><a href="#matrix-rewolucje">Matrix: Rewolucje</a></li> </ul> </nav> <h2 id="czym-jest-matrix">Czym jest Matrix?</h2> <p>Pierwsza część trylogii science fiction.</p> <h2 id="matrix-reaktywacja">Matrix: Reaktywacja</h2> <p>Ciąg dalszy zmagań Neo, Trinity i Morfeusza z inteligentnymi maszynami, zagrażającymi całej ludzkości.</p> <h2 id="matrix-rewolucje">Matrix: Rewolucje</h2> <p>Neo kontra Agent Smith. Syjon - ostatnia enklawa ludzkiej cywilizacji - zagrożony zniszczeniem.</p> </main> <footer>Wszystkie prawa zastrzeżone</footer> </body> </html>
<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>data/czas</time> <time datetime="data/czas">...</time>
Na stronach internetowych bardzo często spotyka się różnorodne daty czy oznaczenia czasu: publikacja artykułu, wysłanie komentarza, zaplanowane wydarzenia i ich godzinowy rozkład dnia. Takie dane mogłyby zostać wykorzystane np. do automatycznego tworzenia kalendarzy. Problem w tym, że zwykle są one podane w postaci czytelnej dla użytkowników, a nie dla maszyn. Trudno się spodziewać, że automat będzie w stanie poprawnie zinterpretować tekstową nazwę miesiąca w każdym języku mówionym świata. Poza tym w różnych krajach istnieją odmienne konwencje zapisu kolejności poszczególnych części daty (może to być najpierw dzień, a na końcu rok lub na odwrót), a także separatorów poszczególnych członów daty.
Aby przekazać wszelkim automatom, że wybrany tekst na stronie jest datą lub/i czasem, wystarczy oznaczyć go za pomocą znacznika TIME. Trzeba jednak pamiętać, że w przypadku prostego oznaczenia <time>...</time> zawartość znacznika musi być zapisana w standardowym formacie, bo inaczej nie będzie mogła być poprawnie zinterpretowana. Natomiast jeżeli chcemy użytkownikom prezentować datę w przyjazny dla nich sposób (np. z tekstową nazwą miesiąca), to tę samą datę ale już w formacie ustandaryzowanym należy podać w atrybucie datetime="...".
Przykład:
<time datetime="1980-01-01 09:00">1 stycznia 1980, godz. 9.00</time>
<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> <!doctype html> <html> <head><wbr><title>...</title><wbr></head> <body><wbr>...<wbr></body> </html> </pre>
<p>Popsuła<wbr>mi<wbr>się<wbr>spacja</p>
(interpretuje: Internet Explorer 10, 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
(interpretuje: Internet Explorer 10, Firefox, Opera, Chrome)
<progress>alternatywa</progress>
<progress value="współczynnik">alternatywa</progress> <progress value="wartość" max="maksimum">alternatywa</progress>
Pozwala wstawić na stronie standardowy pasek postępu, który przedstawia stopień ukończenia jakiegoś zadania. Umożliwia również 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
(interpretuje: Firefox, Opera, Chrome)
<meter value="współczynnik">alternatywa</meter>
<meter value="wartość" min="minimum" max="maksimum">alternatywa</meter>
<meter value="współczynnik" low="niski" high="wysoki">alternatywa</meter> <meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka">alternatywa</meter>
<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>
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
(interpretuje: Opera 15, Chrome)
<details> <summary>nagłówek</summary> ... </details>
<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
Przed pojawieniem się języka HTML5, istniały już różne sposoby osadzania treści multimedialnych audio/wideo na stronach internetowych:
Niestety miały one spore wady:
Nic dziwnego, że w HTML5 postanowiono zmienić tę sytuację. Najpierw zdecydowano się wprowadzić do specyfikacji element EMBED, który do tej pory i tak był powszechnie używany, choć oficjalnie nie istniał. Nadal jednak nie zaleca się jego stosowania do materiałów audio/wideo:
Aby pozbyć się wszystkich wymienionych powyżej wad, HTML5 wprowadza zupełnie nowe elementy, przeznaczone specjalnie do obsługi odtwarzaczy audio/wideo.
(interpretuje: Internet Explorer 9, Firefox, Opera, Chrome)
<video src="lokalizacja pliku">Treść alternatywna</video>
<audio src="lokalizacja pliku">Treść alternatywna</audio>
<video> <source src="lokalizacja pliku w formacie 1" type='format 1'> <source src="lokalizacja pliku w formacie 2" type='format 2'> (...) Treść alternatywna </video>
<audio> <source src="lokalizacja pliku w formacie 1" type='format 1'> <source src="lokalizacja pliku w formacie 2" type='format 2'> (...) Treść alternatywna </audio>
Różnica pomiędzy odtwarzaczem wideo a audio jest tylko taka, że ten drugi nie udostępnia okna do wyświetlania obrazu. W odtwarzaczu wideo swobodnie można odgrywać również samą muzykę. Może to być przydatne np. aby wraz z dźwiękiem wyświetlić dodatkowe napisy zsynchronizowane z dźwiękiem albo statyczny obraz. Natomiast ładując film do odtwarzacza audio, możemy pominąć zapisaną w nim ścieżkę wideo - kiedy interesuje nas tylko ścieżka dźwiękowa. Jednak gdy to tylko możliwe, należy unikać tego sposobu, ponieważ mimo iż użytkownik nie widzi obrazu wideo, to jest on nadal zapisany w pliku i transmitowany przez sieć.
Pliki multimedialne często są pokaźnych rozmiarów. Przeglądarka zwykle nie potrafi odtworzyć wszystkich możliwych formatów filmów i muzyki. Dlatego właśnie mocno zalecane jest, aby korzystać tylko z dwóch ostatnich sposobów osadzania plików wideo/audio, nawet jeżeli posiadamy materiał tylko w jednym formacie. Podając typ (format) pliku w kodzie strony, przeglądarka nie będzie musiała pobierać plików, aby sprawdzić, czy potrafi je odtworzyć. Jest to szczególnie ważne na stronach, które zawierając wiele osadzonych odtwarzaczy.
Przykład:
Atrybut logiczny (podawany bez wartości), który wywołuje automatyczne rozpoczęcie odtwarzania. Używaj go z rozsądkiem. Nie ma nic gorszego niż samodzielnie włączająca się o północy muzyka na stronie i grająca na cały regulator ;-)
Atrybut logiczny, który powoduje wyświetlenie domyślnych kontrolek, służących od odtwarzania materiału. Najczęściej zawierają one przycisk "odtwarzaj", "zatrzymaj", "wycisz", suwak postępu odtwarzania i głośności.
Standardowe kontrolki odtwarzania zwykle wyglądają nieco inaczej w każdej przeglądarce. Jednak użytkownik jest przyzwyczajony do ich wyglądu właśnie ze swojej przeglądarki, więc nie powinno to dla niego stanowić problemu, a raczej ułatwienie. Jeżeli jednak nie możemy się z tym pogodzić, HTML5 daje możliwość stworzenia swoich własnych kontrolek odtwarzania. Służy do tego API JavaScript, a więc bez choćby podstawowych umiejętności programistycznych raczej się przy tym nie obejdzie.
Przykład:
Zobacz przykład: własne kontrolki odtwarzania
Atrybut logiczny, który włącza tryb odtwarzania w kółko.
Atrybut logiczny, który całkowicie wycisza dźwięk w odtwarzaczu.
W przypadku odtwarzacza VIDEO możliwe jest ustawienie statycznego obrazka, który wyświetli się w oknie odtwarzania, zanim użytkownik włączy w nim odgrywanie właściwego filmu. Można w ten sposób umieścić np. pierwszą znaczącą klatkę z filmu. Jako wartość tego atrybutu należy podać lokalizację pliku graficznego.
Określa, które części pliku multimedialnego powinny zostać pobrane przez przeglądarkę, nawet jeśli użytkownik nigdy nie włączy odtwarzania:
Zanim plik wideo albo jego metadane zostaną załadowane, przeglądarka nie zna właściwych wymiarów filmu. Dlatego najpierw może przyjąć jakieś standardowe rozmiary, by potem zmienić je na właściwe. Może to wywołać efekt "skakania" elementów strony. Dlatego zawsze powinno się od razu określać, jaką szerokość (width="...") i wysokość (height="...") ma film, który będzie załadowany do odtwarzacza VIDEO.
Wprowadzając w HTML5 nowe znaczniki AUDIO i VIDEO początkowo starano się również rozwiązać problemy z różnorodnością formatów plików muzycznych i filmowych. W samej wielości formatów nie byłoby nic złego, gdyby wszystkie przeglądarki potrafiły je obsłużyć. Niestety tak nie jest. Do tego dochodzą kwestie związane z patentami i licencjonowaniem.
W praktyce aby mieć pewność, że muzyka bądź film zostaną poprawnie wyświetlone w większości popularnych przeglądarek i systemów operacyjnych, konieczne jest konwertowanie plików jednocześnie do wszystkich z niżej wymienionych formatów. Poszczególne skonwertowane pliki w różnych formatach należy wymieć za pomocą kolejnych znaczników SOURCE.
Konwersję posiadanego pliku audio/wideo do wymaganych formatów można wykonać np. za pomocą darmowego programu Miro Video Converter.
Przykład:
Typowa kombinacja formatów plików wideo:
<video> <source src="plik.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="plik.ogv" type='video/ogg; codecs="theora, vorbis"'> Pobierz plik w formacie: <a href="plik.mp4">MP4</a>, <a href="plik.ogv">OGV</a> </video>
Typowa kombinacja formatów plików audio:
<audio> <source src="plik.mp3" type='audio/mpeg'> <source src="plik.ogg" type='audio/ogg'> Pobierz plik w formacie: <a href="plik.mp3">MP3</a>, <a href="plik.ogg">OGG</a> </audio>
Znane od dawna, komercyjne formaty audio (MP3) i wideo (MP4). Objęte płatnymi licencjami. Na ich upowszechnieniu zależy zwłaszcza posiadaczom patentów do nich - Microsoft i Apple.
Z uwagi na możliwe błędy w mobilnej wersji przeglądarki Safari, format MP4 - jeśli jest dostępny - powinien znajdować się na początku listy znacznika VIDEO. Inaczej odtworzenie wideo może być niemożliwe.
Konsorcjum W3C najpierw próbowało forsować jeden uniwersalny i darmowy format - OGG (audio) i OGV (wideo). Nie spodobało się to jednak twórcom komercyjnego formatu MP3/MP4. Poza tym argumentowano, że otwarty format OGG/OGV choć udostępniany za darmo, może w sposób niezamierzony korzystać z jakichś patentów, co przyniosłoby problemy w przyszłości, gdyby się nagle okazało, że jednak trzeba za jego użytkowanie płacić.
Plik audio/wideo można w uproszczeniu traktować jak archiwa ZIP lub RAR. Zawierają one w sobie spakowane wiele zwykłych plików. Sposób wykonywania kompresji w formacie ZIP różni się od RAR, ale nie wpływa na typ plików, które są spakowane w archiwum. Jedno archiwum może zawierać np. obrazy w formacie GIF, JPG lub PNG, a także muzykę MP3, WMA itp.
Każdy plik muzyczny musi zawierać tzw. ścieżkę dźwiękową. Pliki filmowe zawierają natomiast ścieżkę wideo oraz zwykle również ścieżkę dźwiękową. Ścieżki te są jakby odpowiednikiem plików spakowanych w archiwum ZIP lub RAR. Istnieją różne sposoby zapisu dźwięku i obrazu w plikach audio/wideo. Różnią się stopniem kompresji (wielkością wynikowego pliku), jakością, obciążeniem procesora przy odtwarzaniu itp. Za konwersję ścieżki audio/wideo do określonego formatu odpowiadają kodeki.
Podając typ (format) pliku audio/wideo, powinniśmy określić również kodeki, przy użyciu których przeglądarka może odtworzyć wybrany materiał. Dzięki temu w przypadku nieposiadania odpowiedniego kodeku, nie będzie konieczne pobieranie pliku, którego i tak nie da się odtworzyć.
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><source src="video.mp4" type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'><source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'><source src="video.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'><source src="video.mp4" type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'><source src="video.mp4" type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'><source src="video.3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'><source src="audio.ogg" type='audio/ogg; codecs=vorbis'><source src="audio.spx" type='audio/ogg; codecs=speex'><source src="audio.oga" type='audio/ogg; codecs=flac'><source src="video.ogv" type='video/ogg; codecs="dirac, vorbis"'><source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="video.ogv" type='video/ogg; codecs="theora, speex"'>(interpretuje: Firefox 31, Opera, Chrome)
<video> <source src="lokalizacja pliku w formacie 1" type='format 1'> <source src="lokalizacja pliku w formacie 2" type='format 2'> (...) <track src="napisy.vtt" default> (...) Treść alternatywna </video>
default jest konieczne. Inaczej napisy mogą nie zostać wyświetlone!Napisy wyświetlane zwykle na dole ekranu są - obok głosu lektora i dubbingu - jednym ze sposobów na przekład filmu na inny język niż ten, w którym pierwotnie został on nakręcony. Tekst tłumaczenia teoretycznie można zapisać bezpośrednio w ścieżce wideo. Wtedy jednak każde tłumaczenie filmu byłoby fizycznie osobnym plikiem wideo. Na dodatek użytkownik np. słabowidzący albo posiadający niewielki monitor, nie mógłby sterować wielkością tekstu napisów. Dlatego dużo lepiej jest przygotować osobny, względnie niewielkich rozmiarów plik tekstowy z napisami. Jeżeli ktoś z innego kraju będzie chciał obejrzeć film, wystarczy że pobierze dokładnie ten sam plik wideo i dodatkowo poszuka sobie pliku napisów dla swojego języka. Taki osobny plik testowy z napisami nazywamy ścieżką tekstową.
Plik napisów tworzy się w dowolnym prostym edytorze tekstu. Możesz do tego celu użyć edytora, w którym normalnie tworzysz strony WWW. Możesz nawet skorzystać ze zwykłego windowsowskiego Notatnika (Notepad) lub dowolnego innego prostego edytora tekstu, wbudowanego w Twój system operacyjny. Zwróć przy tym uwagę tylko na dwie bardzo ważne kwestie:
Przykład:
Zobacz przykład: TRACK
Sama zawartość pliku napisów musi być zapisana zgodnie z ustalonym standardem WebVTT (ang. Web Video Text Tracks). W pierwszej linijce pliku należy obowiązkowo umieścić tekst: WEBVTT i zostawić po nim jedną linijkę przerwy. Mówi on, że plik został utworzony zgodnie ze standardem WebVTT. Dalej dodawane są już bloki kolejnych napisów. Każdy blok zawiera przedział czasu, w którym ma się wyświetlać na ekranie oraz sam tekst napisu. Kolejne bloki napisów są od siebie oddzielone pustą linijką. Choć być może brzmi to nieco skomplikowanie, tak naprawdę jest bardzo intuicyjne. Najprostszy plik napisów mógłby wyglądać następująco:
WEBVTT 00:00:01.000 --> 00:00:05.000 Ten napis wyświetli się między pierwszą a piątą sekundą filmu. 00:00:05.000 --> 00:00:10.000 Ten napis wyświetli się między piątą a dziesiątą sekundą filmu. 00:00:20.000 --> 00:00:30.000 Ten napis wyświetli się między dwudziestą a trzydziestą sekundą filmu.
Czasy wyświetlania napisów mogą na siebie również zachodzić, tzn. w jednej klatce filmu można wyświetlić kilka bloków napisów.
Każdy z bloków napisów może dodatkowo zawierać specjalne ustawienia, sterujące sposobem jego wyświetlania. Ustawienia umieszcza się na końcu linijki podającej przedział czasu - np.:
WEBVTT 00:00:01.000 --> 00:00:05.000 align:start vertical:rl Ten napis zostanie wyrównany do początku i ustawiony w pionie przy lewej krawędzi.
Obsługiwane ustawienia:
W celu oznaczenia dialogu/cytatu, odpowiednią linijkę w napisach należy poprzedzić specjalnym znacznikiem, w którym podaje się osobę, która ją wypowiada:
WEBVTT 00:00:05.000 --> 00:00:10.000 <v nauczyciel>- Ile to jest 2x2? <v uczeń>- Poproszę o inny zestaw pytań.
Do tekstu napisów można wprowadzać nawet podstawowe formatowanie tekstu. Obsługiwane są następujące znaczniki HTML: B, I, U. Aby wstawić do napisu znak mniejszości, większości lub ampersand ("&"), należy się posłużyć znanymi z języka HTML encjami: <, >, &.
(interpretuje: Opera, Chrome)
To jeszcze nie koniec. Można nawet zmienić wygląd napisów przy pomocy stylów CSS. Obsługiwane powinny być następujące własności: color, opacity, visibility, text-decoration, text-outline, text-shadow, background, outline, font, white-space.
Aby zmienić stylizację wszystkich napisów, trzeba posłużyć się specjalnym pseudoelementem:
::cue {
color: white;
background: black;
}Aby zmienić wygląd tekstu, który w napisach został objęty znacznikami B, I, U, należy wpisać:
::cue(b) {
color: red;
}
::cue(i) {
color: lime;
}
::cue(u) {
color: aqua;
}Aby zmienić wygląd wypowiedzi konkretnych osób w dialogu:
::cue(v[voice="nauczyciel"]) { font-style: italic; }
W pliku *.vtt bezpośrednio przed wybranym blokiem napisów możesz podać identyfikator:
WEBVTT identyfikator 00:00:01.000 --> 00:00:05.000 Ten napis posiada przypisany identyfikator.
Można się nim potem posłużyć, aby zmienić wygląd całego takiego bloku:
::cue(#identyfikator) {
color: red;
}