Rozdział 4. Co to wszystko znaczy, czyli semantyka HTML5

> Dodaj do ulubionych

Do rzeczy

W tym rozdziale we┼║miemy absolutnie poprawn─ů stron─Ö HTML i j─ů poprawimy. Niekt├│re jej cz─Ö┼Ťci zostan─ů skr├│cone. Niekt├│re cz─Ö┼Ťci si─Ö wyd┼éu┼╝─ů. Ale przede wszystkim zostanie wzbogacona semantyka. B─Ödzie ┼Ťwietnie.

Kod z pocz─ůtku strony:

<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jest to tzw. typ dokumentu (ang. doctype). Typy dokumentu maj─ů d┼éug─ů histori─Ö i wiele tajemnic. Pewnego razu programi┼Ťci z Microsoftu pracuj─ůcy nad Internet Explorerem 5 dla system├│w Mac znale┼║li si─Ö w zaskakuj─ůcej sytuacji. Przegl─ůdarka nad kt├│r─ů pracowali tak bardzo poprawi┼éa si─Ö pod wzgl─Ödem obs┼éugi standard├│w, ┼╝e starsze strony zacz─Ö┼éy w niej ┼║le wygl─ůda─ç. Tak naprawd─Ö te strony w ko┼äcu zacz─Ö┼éy by─ç poprawnie wy┼Ťwietlane (zgodnie ze standardami), tylko ludzie oczekiwali, ┼╝e b─Öd─ů si─Ö wy┼Ťwietla─ç nieprawid┼éowo. Strony, o kt├│rych mowa by┼éy tworzone z uwzgl─Ödnieniem kaprys├│w najpopularniejszych w tamtych czasach przegl─ůdarek, czyli Netscape 4 i Internet Explorer 4. A przegl─ůdarka IE5 dla systemu Mac by┼éa tak zaawansowana, ┼╝e wszystko psu┼éa.

W zwi─ůzku z tym w Microsofcie wymy┼Ťlono nowatorskie rozwi─ůzanie. Przegl─ůdarka IE5 dla systemu Mac odczytywa┼éa typ dokumentu, kt├│ry powinien znajdowa─ç si─Ö w pierwszym wierszu ┼║r├│d┼éa HTML strony (nawet przed elementem html). Stare strony (zbudowane wg dziwacznych zasad starych przegl─ůdarek) zazwyczaj w og├│le nie mia┼éy okre┼Ťlonego typu dokumentu. Przegl─ůdarka IE 5 dla systemu Mac takie strony wy┼Ťwietla┼éa tak, jak by to zrobi┼éy stare przegl─ůdarki. Aby w┼é─ůczy─ç obs┼éug─Ö standard├│w, tw├│rcy stron musieli zg┼éosi─ç ten zamiar poprzez zastosowanie na stronie w┼éa┼Ťciwego typu dokumentu przed elementem html.

Pomys┼é ten podchwyci┼éy inne firmy i ju┼╝ po kr├│tkim czasie wszystkie najwa┼╝niejsze przegl─ůdarki mia┼éy po dwa tryby dzia┼éania: „dziwaczny” (ang. quirks mode) i „standardowy”. Oczywi┼Ťcie, jak to zwykle w sieci bywa, sytuacja szybko wymkn─Ö┼éa si─Ö spod kontroli. Gdy Mozilla przygotowywa┼éa wersj─Ö 1.1 swojej przegl─ůdarki, odkryto ┼╝e istniej─ů strony prezentowane w trybie standardowym, kt├│re polega┼éy na jednym specyficznym dziwactwie. Mozilla poprawi┼éa algorytmy renderuj─ůce, aby pozby─ç si─Ö tego dziwactwa, co spowodowa┼éo, ┼╝e poprawnie przesta┼éy dzia┼éa─ç tysi─ůce stron internetowych na raz. I wtedy — naprawd─Ö nie zmy┼Ťlam — powsta┼é „tryb prawie standardowy”.

Henri Sivonen w swojej prze┼éomowej pracy pt. Activating Browser Modes with Doctype (Aktywowanie tryb├│w przegl─ůdarek za pomoc─ů typu dokumentu), sporz─ůdzi┼é nast─Öpuj─ůce zestawienie r├│┼╝nych tryb├│w:

Tryb dziwactw
W trybie dziwactw przegl─ůdarki ignoruj─ů najnowsze standardy sieciowe, aby „poprawnie” wy┼Ťwietla─ç strony, kt├│re zosta┼éy utworzone zgodnie z zasadami obowi─ůzuj─ůcymi w latach 90.
Tryb standardowy
W trybie standardowym przegl─ůdarki w miar─Ö swoich mo┼╝liwo┼Ťci pr├│buj─ů przetwarza─ç dobrze zbudowane dokumenty zgodnie ze standardami. W HTML5 tryb ten nazywa si─Ö „trybem bez dziwactw”.
Tryb prawie standardowy
Firefox, Safari, Chrome, Opera (od 7.5) i IE 8 maj─ů dodatkowo tryb zwany „trybem prawie standardowym”, w kt├│rym algorytmy okre┼Ťlania wysoko┼Ťci kom├│rek tabeli s─ů zaimplementowane w tradycyjny spos├│b, niezgodny ze specyfikacj─ů CSS 2. W HTML5 tryb ten nazywa si─Ö „trybem umiarkowanych dziwactw”.

(Najlepiej przeczytaj ca┼éy artyku┼é Henriego, poniewa┼╝ ja tutaj bardzo du┼╝o upraszczam. Nawet w IE 5 dla komputer├│w Mac by┼éo kilka starszych typ├│w dokumentu, kt├│rych nie bra┼éo si─Ö pod uwag─Ö, jako obs┼éuguj─ůce standardy. Z czasem lista dziwactw poszerza┼éa si─Ö, a wraz z ni─ů ros┼éa liczba typ├│w dokument├│w powoduj─ůcych w┼é─ůczenie trybu dziwactw. Ostatni raz naliczy┼éem pi─Ö─ç typ├│w dokumentu powoduj─ůcych w┼é─ůczenie trybu prawie standardowego i 73 w┼é─ůczaj─ůce tryb dziwactw. Z pewno┼Ťci─ů jednak co┼Ť mi umkn─Ö┼éo i nie mam nawet ochoty wspomina─ç ju┼╝ o Internet Explorerze 8 i jego czterech — tak, czterech! — r├│┼╝nych trybach renderowania. Tu znajduje si─Ö ciekawy schemat. Zabi─ç. I spali─ç.)

Zaraz, chwileczk─Ö. O czym to m├│wili┼Ťmy? Aaa tak, typ dokumentu:

<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Przedstawiony typ dokumentu jest jednym z 15 w┼é─ůczaj─ůcych tryb standardowy we wszystkich nowoczesnych przegl─ůdarkach. Jest absolutnie poprawny. Je┼Ťli ci si─Ö podoba, mo┼╝esz go u┼╝ywa─ç. Ale mo┼╝esz te┼╝ zacz─ů─ç u┼╝ywa─ç typu dokumentu HTML5, kt├│ry jest kr├│tszy i bardziej zwi─Öz┼éy, a te┼╝ w┼é─ůcza tryb standardowy we wszystkich nowoczesnych przegl─ůdarkach.

Typ dokumentu HTML5 wygl─ůda tak:

<!DOCTYPE html>

To wszystko. Tylko 15 znak├│w. Jest tak prosty, ┼╝e mo┼╝na go wpisa─ç r─Öcznie i si─Ö nie pomyli─ç.

Strona HTML to zbi├│r element├│w umieszczonych w innych elementach. Struktura takiego dokumentu przypomina drzewo. Niekt├│re elementy s─ů „rodze┼ästwem”, jak dwie ga┼é─Özie wyrastaj─ůce z jednego pnia. Niekt├│re elementy mog─ů by─ç „dzie─çmi” innych element├│w, jak mniejsze ga┼é─Özie wyrastaj─ůce z wi─Ökszych. (W drug─ů stron─Ö te┼╝ to dzia┼éa, tzn. element bezpo┼Ťrednio zawieraj─ůcy inny element nazywa si─Ö jego „rodzicem”, a dla „wnuk├│w” jest „przodkiem”). Elementy (w─Öz┼éy) nie maj─ůce dzieci nazywaj─ů si─Ö li┼Ť─çmi. Element obejmuj─ůcy ca┼éy dokument, a wi─Öc b─Öd─ůcy przodkiem wszystkich pozosta┼éych element├│w na stronie nazywa si─Ö elementem g┼é├│wnym albo korzeniem. W dokumentach HTML elementem g┼é├│wnym jest html.

Na tej przyk┼éadowej stronie element g┼é├│wny wygl─ůda tak:

<html xmlns="http://www.w3.org/1999/xhtml"
      lang="en"
      xml:lang="en">

Ten kod jest absolutnie poprawny. Je┼Ťli chcesz, mo┼╝esz go u┼╝ywa─ç. Jest to poprawny kod HTML5. Jednak niekt├│re jego cz─Ö┼Ťci nie s─ů ju┼╝ niezb─Ödne w HTML5, a wi─Öc usuwaj─ůc je mo┼╝esz zaoszcz─Ödzi─ç kilka bajt├│w.

Najpierw przyjrzymy si─Ö atrybutowi xmlns. Jest to pozosta┼éo┼Ť─ç jeszcze po j─Özyku XHTML 1.0. Informuje, ┼╝e elementy znajduj─ůce si─Ö na stronie nale┼╝─ů do przestrzeni nazw XHTML (http://www.w3.org/1999/xhtml). Ale w HTML5 elementy zawsze nale┼╝─ů do tej przestrzeni nazw, w zwi─ůzku z czym nie trzeba tego dodatkowo zaznacza─ç. Obecno┼Ť─ç i brak obecno┼Ťci tego atrybutu nie maj─ů ┼╝adnego wp┼éywu na spos├│b dzia┼éania strony w HTML5.

Gdy opu┼Ťcimy atrybut xmlns, pozostanie nam taki element:

<html lang="pl" xml:lang="pl">

Te dwa atrybuty (lang i xml:lang) okre┼Ťlaj─ů j─Özyk strony HTML. (pl oznacza polski. Nie piszesz po polsku? Znajd┼║ i zastosuj kod swojego j─Özyka.) Po co s─ů dwa atrybuty s┼éu┼╝─ůce do tego samego? Jest to kolejna pozosta┼éo┼Ť─ç po j─Özyku XHTML. W j─Özyku HTML5 dzia┼éa tylko atrybut lang. Oczywi┼Ťcie je┼Ťli chcesz, mo┼╝esz pozostawi─ç atrybut xml:lang, ale w├│wczas musisz pilnowa─ç, aby mia┼é tak─ů sam─ů warto┼Ť─ç, co atrybut lang.

U┼éatwieniem dla os├│b przechodz─ůcych na XHTML i rezygnuj─ůcych z niego jest mo┼╝liwo┼Ť─ç definiowania atrybutu bez przestrzeni nazw bez przedrostka o lokalnej nazwie xml:lang dla element├│w HTML w dokumentach HTML. Atrybut├│w takich mo┼╝na jednak u┼╝ywa─ç tylko wtedy, gdy dodatkowo zdefiniowany jest te┼╝ atrybut lang bez przestrzeni nazw i oba atrybuty musz─ů mie─ç t─Ö sam─ů warto┼Ť─ç wg por├│wnania w ASCII bez uwzgl─Ödniania wielko┼Ťci liter. Atrybut bez przestrzeni nazw, bez przedrostka i o nazwie lokalnej xml:lang nie ma wp┼éywu na spos├│b przetwarzania dokumentu.

Jeste┼Ť got├│w, aby si─Ö go pozby─ç? No to dalej, po prostu go usu┼ä. Pa, pa… poszed┼é sobie! W ten spos├│b otrzymujemy taki element g┼é├│wny:

<html lang="pl">

I to wszystko, co mam na ten temat do powiedzenia.

Pierwszym dzieckiem elementu g┼é├│wnego najcz─Ö┼Ťciej jest element head. W elemencie head wpisuje si─Ö metadane, czyli informacje o stronie. Nie nale┼╝y tu umieszcza─ç tre┼Ťci w┼éa┼Ťciwej dokumentu. (Tre┼Ť─ç umieszcza si─Ö w elemencie body.) Element head sam w sobie nie jest jako┼Ť specjalnie fascynuj─ůcy i w HTML5 jest taki sam, jak we wcze┼Ťniejszych wersjach j─Özyka. Interesuj─ůca jest natomiast jego zawarto┼Ť─ç. Aby j─ů zobaczy─ç, jeszcze raz wr├│cimy do naszej przyk┼éadowej strony:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>M├│j blog</title>
  <link rel="stylesheet" type="text/css" href="style-original.css" />
  <link rel="alternate" type="application/atom+xml"
                        title="Kana┼é wiadomo┼Ťci mojego bloga"
                        href="/feed/" />
  <link rel="search" type="application/opensearchdescription+xml"
                        title="Wyszukiwarka mojego bloga"
                        href="opensearch.xml"  />
  <link rel="shortcut icon" href="/favicon.ico" />
</head>

Om├│wienie tego kodu zaczn─Ö od elementu meta.

M├│wi─ůc „tekst” najcz─Ö┼Ťciej mamy na my┼Ťli znaki i cyfry, kt├│re widzimy na ekranie monitora. Jednak komputery nie porozumiewaj─ů si─Ö przy u┼╝yciu znak├│w i cyfr dziesi─Ötnych, tylko przy u┼╝yciu bit├│w i bajt├│w. Ka┼╝dy fragment tekstu, jaki kiedykolwiek widzia┼ée┼Ť na ekranie monitora by┼é zapisany przy u┼╝yciu jakiego┼Ť rodzaju kodowania znak├│w. Istniej─ů setki metod kodowania znak├│w. Niekt├│re z nich s─ů specjalnie dostosowane do potrzeb konkretnych j─Özyk├│w, jak rosyjski czy chi┼äski albo angielski, a inne obejmuj─ů wiele j─Özyk├│w. W uproszczeniu mo┼╝na powiedzie─ç, ┼╝e kodowanie znak├│w to odwzorowanie tego, co wida─ç na ekranie na to, co komputer przechowuje w pami─Öci i na dysku.

W rzeczywisto┼Ťci wszystko jest troch─Ö bardziej skomplikowane. Jeden znak mo┼╝e wyst─Öpowa─ç w kilku kodowaniach i w ka┼╝dym z nich mo┼╝e by─ç przechowywany w pami─Öci lub na dysku przy u┼╝yciu innej sekwencji bajt├│w. Kodowanie znak├│w mo┼╝na wi─Öc traktowa─ç jako co┼Ť w rodzaju klucza pozwalaj─ůcego rozszyfrowa─ç tekst. Gdy kto┼Ť poda nam szereg bajt├│w i powie, ┼╝e to jest tekst, musimy zna─ç spos├│b kodowania znak├│w w tym tek┼Ťcie, aby m├│c rozszyfrowa─ç bajty do postaci znak├│w i wy┼Ťwietli─ç je (albo jako┼Ť przetworzy─ç b─ůd┼║ zrobi─ç z nimi jeszcze co┼Ť innego).

Sk─ůd w takim razie przegl─ůdarka wie, jakie kodowanie znak├│w zosta┼éo zastosowane w otrzymanym od serwera strumieniu bajt├│w? Ciesz─Ö si─Ö, ┼╝e pytasz. Je┼Ťli interesowa┼ée┼Ť si─Ö kiedy┼Ť nag┼é├│wkami HTTP, to mo┼╝liwe ┼╝e widzia┼ée┼Ť ju┼╝ takie co┼Ť:

Content-Type: text/html; charset="utf-8"

Jest to informacja od serwera, ┼╝e zosta┼é wys┼éany dokument HTML, w kt├│rym znaki s─ů zakodowane przy u┼╝yciu metody UTF-8. Niestety w ca┼éym internecie tylko garstka webmaster├│w ma kontrol─Ö nad u┼╝ywanym przez siebie serwerem HTTP. We┼║my np. takiego Bloggera: tre┼Ť─ç tworz─ů indywidualni u┼╝ytkownicy, ale serwery nale┼╝─ů do Google. Dlatego w HTML 4 wprowadzono mo┼╝liwo┼Ť─ç okre┼Ťlania kodowania znak├│w bezpo┼Ťrednio w dokumencie HTML. Kod podobny do poni┼╝szego pewnie te┼╝ ju┼╝ nie raz widzia┼ée┼Ť:

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

Wynika z niego, ┼╝e zdaniem autora jest to dokument HTML zawieraj─ůcy znaki zakodowane przy u┼╝yciu metody UTF-8.

Obu opisanych technik mo┼╝na u┼╝ywa─ç tak┼╝e w j─Özyku HTML5. Preferowan─ů metod─ů jest u┼╝ywanie nag┼é├│wka HTTP i je┼Ťli jest on ustawiony, to przes┼éania ustawienie w elemencie meta. Poniewa┼╝ jednak nie ka┼╝dy ma mo┼╝liwo┼Ť─ç ustawiania nag┼é├│wk├│w HTTP, element meta jest r├│wnie┼╝ wci─ů┼╝ dost─Öpny. W HTML5 nawet go troch─Ö uproszczono. Teraz wygl─ůda tak:

<meta charset="utf-8" />

Dzia┼éa to we wszystkich przegl─ůdarkach. Sk─ůd wzi─Ö┼éa si─Ö ta skr├│cona sk┼éadnia? Oto najlepsze obja┼Ťnienie, jakie uda┼éo mi si─Ö znale┼║─ç:

Stosowanie kombinacji atrybutu <meta charset> jest uzasadnione tym, ┼╝e jest ju┼╝ zaimplementowana w aplikacjach klienckich, poniewa┼╝ ludzie lubi─ů opuszcza─ç cudzys┼éowy, jak tu:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;" charset="ISO-8859-2">

Istnieje nawet kilka przypadk├│w testowych <meta charset>, kt├│re mo┼╝esz obejrze─ç je┼Ťli nie wierzysz, ┼╝e przegl─ůdarki to obs┼éuguj─ů.

Pytanie do profesora Kodeckiego

P: Ja nigdy nie u┼╝ywam dziwnych znak├│w. Czy mimo to musz─Ö deklarowa─ç kodowanie znak├│w na swoich stronach?

O: Tak! Nale┼╝y zawsze okre┼Ťla─ç spos├│b kodowania znak├│w na wszystkich stronach HTML. Brak deklaracji kodowania mo┼╝e prowadzi─ç do powstania luk w zabezpieczeniach.

Podsumujmy: kodowanie znak├│w jest skomplikowane a dekady u┼╝ywania s┼éabego oprogramowania wykorzystywanego przez niedouczonych autor├│w r├│wnie┼╝ nie podzia┼éa┼éo korzystnie. Nale┼╝y zawsze okre┼Ťla─ç kodowanie znak├│w w ka┼╝dym dokumencie HTML albo stanie si─Ö co┼Ť z┼éego. Mo┼╝na w tym celu u┼╝y─ç nag┼é├│wka HTTP Content-Type, deklaracji <meta http-equiv> albo kr├│tszej deklaracji <meta charset>. Niewa┼╝ne jak, ale jako┼Ť trzeba te kodowanie okre┼Ťli─ç. Internet ci za to podzi─Ökuje.

Zwyk┼ée ┼é─ůcza (<a href>) s┼éu┼╝─ů po prostu do wskazywania innych stron. Natomiast relacje ┼é─ůczy s┼éu┼╝─ů do wyja┼Ťniania dlaczego odsy┼éamy czytelnika do innej strony. Mo┼╝na powiedzie─ç, ┼╝e s─ů zako┼äczeniem zdania „Odsy┼éam do tej strony, poniewa┼╝…”

  • …jest to arkusz styl├│w CSS, kt├│ry przegl─ůdarka powinna zastosowa─ç do tego dokumentu.
  • …jest to kana┼é nowo┼Ťci zawieraj─ůcy tak─ů sam─ů tre┼Ť─ç, jak ta strona, ale w standardowym formacie przeznaczonym do subskrypcji.
  • …jest to t┼éumaczenie tej strony na inny j─Özyk.
  • …jest to ta sama tre┼Ť─ç, tylko w formacie PDF.
  • …jest to nast─Öpny rozdzia┼é ksi─ů┼╝ki internetowej, kt├│rej cz─Ö┼Ťci─ů jest r├│wnie┼╝ ta strona.

itd. W j─Özyku HTML5 wyr├│┼╝nia si─Ö dwa rodzaje relacji ┼é─ůczy:

Przy u┼╝yciu elementu ┼é─ůcza mo┼╝na utworzy─ç dwie kategorie ┼é─ůczy. ┼é─ůcza do zewn─Ötrznych zasob├│w to odno┼Ťniki do ┼║r├│de┼é s┼éu┼╝─ůcych do wzbogacania bie┼╝─ůcego dokumentu, a hiper┼é─ůcza to odno┼Ťniki do innych dokument├│w. …

Spos├│b dzia┼éania ┼é─ůczy do zewn─Ötrznych zasob├│w zale┼╝y od relacji tych ┼é─ůczy.

Z przyk┼éad├│w, kt├│re poda┼éem tylko pierwszy (rel="stylesheet") jest ┼é─ůczem do zewn─Ötrznego zasobu. Reszta to hiper┼é─ůcza do innych dokument├│w. Mo┼╝esz je klikn─ů─ç albo nie, ale nie s─ů one niezb─Ödne do ogl─ůdania strony.

Najcz─Ö┼Ťciej relacje okre┼Ťla si─Ö w elemencie link w sekcji head strony. S─ů te┼╝ relacje, kt├│re mo┼╝na definiowa─ç dla elementu a, ale rzadko kto z nich korzysta, nawet gdy jest to dozwolone. W j─Özyku HTML5 mo┼╝na te┼╝ definiowa─ç pewne relacja dla elementu area, ale z tej mo┼╝liwo┼Ťci korzysta jeszcze mniej os├│b. (W j─Özyku HTML 4 element area nie ma atrybutu rel.) Aby dowiedzie─ç si─Ö, do czego s┼éu┼╝─ů r├│┼╝ne warto┼Ťci atrybutu rel, zobacz list─Ö wszystkich relacji ┼é─ůczy.

Pytanie do profesora Kodeckiego

P: Czy mog─Ö tworzy─ç w┼éasne relacje ┼é─ůczy?

O: Wydaje si─Ö, ┼╝e ludzka pomys┼éowo┼Ť─ç w tym zakresie jest nieograniczona. Aby zapobiec powstaniu ba┼éaganu, spo┼éeczno┼Ť─ç skupiona wok├│┼é mikroformat├│w prowadzi rejestr proponowanych warto┼Ťci dla atrybutu rel, a w specyfikacji j─Özyka HTML zdefiniowano proces ich przyjmowania.

rel = stylesheet

Sp├│jrzmy na pierwsz─ů relacj─Ö znajduj─ůc─ů si─Ö na naszej przyk┼éadowej stronie:

<link rel="stylesheet" href="style-original.css" type="text/css" />

Jest to najcz─Ö┼Ťciej u┼╝ywana relacja ┼é─ůczy na ┼Ťwiecie. Zapis <link rel="stylesheet"> oznacza ┼é─ůcze do zapisanego w osobnym pliku arkusza CSS. W HTML5 jest troch─Ö ┼éatwiej, bo mo┼╝na opu┼Ťci─ç atrybut type. Istnieje tylko jeden j─Özyk arkuszy styl├│w do u┼╝ytku na stronach internetowych (CSS), a wi─Öc atrybut type ma z g├│ry ustalon─ů odpowiedni─ů warto┼Ť─ç domy┼Ťln─ů. Dzia┼éa to we wszystkich przegl─ůdarkach. (Mo┼╝e kto┼Ť kiedy┼Ť opracuje inny j─Özyk arkuszy styl├│w, ale wtedy wystarczy po prostu z powrotem zacz─ů─ç stosowa─ç atrybut type.)

<link rel="stylesheet" href="style-original.css" />

rel = alternate

Kontynuujemy analizę naszej przykładowej strony:

<link rel="alternate"
       type="application/atom+xml"
       title="Kana┼é wiadomo┼Ťci mojego bloga"
       href="/feed/" />

Ta relacja ┼é─ůcza r├│wnie┼╝ jest bardzo cz─Östo u┼╝ywana. Zapis <link rel="alternate"> w po┼é─ůczeniu z typem medi├│w RSS lub Atom okre┼Ťlonym w atrybucie type w┼é─ůcza tzw. automatyczne wykrywanie kana┼éu wiadomo┼Ťci (ang. feed autodiscovery). Dzi─Öki niemu czytniki kana┼é├│w wiadomo┼Ťci (np. Google Reader) wykrywaj─ů na stronach kana┼éy wiadomo┼Ťci o najnowszych artyku┼éach. Niekt├│re przegl─ůdarki w takim przypadku dodatkowo wy┼Ťwietlaj─ů specjaln─ů ikon─Ö obok paska adresu URL. (W odr├│┼╝nieniu od rel="stylesheet", tutaj atrybut type ma znaczenie. Nie opuszczaj go!)

Relacja rel="alternate" od zawsze jest dziwn─ů hybryd─ů przypadk├│w u┼╝ycia, nawet w HTML 4. W HTML5 jej definicja zosta┼éa uproszczona i rozszerzona, aby lepiej opisywa┼éa istniej─ůc─ů w internecie tre┼Ť─ç. Jak przed chwil─ů widzia┼ée┼Ť, po┼é─ůczenie relacji rel="alternate" z atrybutem type=application/atom+xml oznacza kana┼é Atom dla bie┼╝─ůcej strony. Ale relacji rel="alternate" mo┼╝na u┼╝ywa─ç w po┼é─ůczeniu z atrybutami type o innych warto┼Ťciach, aby zaznaczy─ç t─Ö sam─ů tre┼Ť─ç w innych formatach, np. PDF.

W HTML5 rozwi─ůzano tak┼╝e stary problem tworzenia po┼é─ůcze┼ä z t┼éumaczeniami dokument├│w. W HTML 4 do okre┼Ťlania j─Özyka wskazywanego dokumentu nale┼╝y u┼╝ywa─ç atrybutu lang i relacji rel="alternate", ale to jest niepoprawne. Errata do HTML 4 zawiera list─Ö czterech kardynalnych b┼é─Öd├│w w specyfikacji HTML 4. Jednym z nich dotyczy sposobu okre┼Ťlania j─Özyka dokumentu wskazywanego przy u┼╝yciu elementu z atrybutem rel="alternate". Poprawnym sposobem, opisanym w erracie HTML 4 i HTML5, jest u┼╝ycie atrybutu hreflang. Niestety b┼é─Öd├│w wymienionych w erracie nigdy nie poprawiono w specyfikacji HTML 4, poniewa┼╝ nikt z grupy roboczej ds. HTML W3C nie pracowa┼é ju┼╝ nad j─Özykiem HTML.

Inne relacje ┼é─ůczy dost─Öpne w HTML5

Relacja rel="author" s┼éu┼╝y do do┼é─ůczania informacji o autorze strony. Mo┼╝e to by─ç adres mailto: chocia┼╝ nie musi nim by─ç. Mo┼╝e to by─ç ┼é─ůcze do formularza kontaktowego albo strony typu „O autorze”.

W j─Özyku HTML 4 dost─Öpne s─ů relacje rel="start", rel="prev" oraz rel="next" s┼éu┼╝─ůce do okre┼Ťlania powi─ůza┼ä mi─Ödzy stronami nale┼╝─ůcymi do jednej grupy (np. rozdzia┼éy ksi─ů┼╝ki albo uszeregowane wpisy na blogu). Poprawnie z nich wszystkich u┼╝ywana by┼éa tylko relacja rel="next". Tw├│rcy stron zamiast rel="prev" pisali rel="previous"; zamiast rel="start" pisali rel="begin" i rel="first", a zamiast rel="last" pisali rel="end".

A, i jeszcze wymy┼Ťlali ca┼ékiem nowe relacje, np. rel="up" do wskazywania strony „nadrz─Ödnej”. Relacj─Ö rel="up" naj┼éatwiej jest sobie wyobrazi─ç patrz─ůc na nawigacj─Ö okruszkow─ů (albo sobie j─ů wyobra┼╝aj─ůc). Strona g┼é├│wna jest pierwszym okruszkiem, a aktualnie ogl─ůdana strona — ostatnim. Relacja rel="up" wskazuje przedostatni okruszek w tej strukturze.

J─Özyk HTML5 zawiera, podobnie jak HTML 4, relacje rel="next" i rel="prev" oraz ze wzgl─Ödu na zgodno┼Ť─ç ze starym kodem rel="previous". Kiedy┼Ť w specyfikacji by┼éy te┼╝ relacje rel="first", rel="last" i rel="up". Jednak „ze wzgl─Ödu na brak zainteresowania ze strony implementator├│w i u┼╝ytkownik├│w” grupa robocza ds. HTML postanowi┼éa je usun─ů─ç ze specyfikacji.

Drugie miejsce pod wzgl─Ödem popularno┼Ťci (za rel="stylesheet") zajmuje relacja rel="icon". Najcz─Ö┼Ťciej jest u┼╝ywana w po┼é─ůczeniu z relacj─ů shortcut:

<link rel="shortcut icon" href="/favicon.ico">

Wszystkie najwa┼╝niejsze przegl─ůdarki wi─ů┼╝─ů ze stron─ů ma┼é─ů ikon─Ö, kt├│ra zostanie zdefiniowana w tej relacji. Najcz─Ö┼Ťciej ikona ta jest wy┼Ťwietlana obok paska adresu i na kartach zak┼éadek przegl─ůdarki.

W j─Özyku HTML5 w po┼é─ůczeniu z icon mo┼╝na te┼╝ u┼╝ywa─ç atrybutu sizes s┼éu┼╝─ůcego do okre┼Ťlania rozmiaru wskazywanej ikony.

Relacja rel="license" zosta┼éa wynaleziona przez spo┼éeczno┼Ť─ç mikroformatow─ů. „Oznacza, ┼╝e wskazywany dokument zawiera informacje o prawach autorskich i licencj─Ö, na jakiej dost─Öpny jest bie┼╝─ůcy dokument”.

Relacja rel="nofollow" „oznacza, ┼╝e dokument do kt├│rego prowadzi ┼é─ůcze nie jest polecany przez autora lub wydawc─Ö bie┼╝─ůcej strony albo ┼╝e ┼é─ůcze zosta┼éo wstawione na stron─Ö w ramach dzia┼éalno┼Ťci biznesowej w┼éa┼Ťcicieli tych dw├│ch stron”. Relacj─Ö t─Ö wynaleziono w firmie Google i standaryzowano w mikroformatach. CMS WordPress dodaje atrybut rel="nofollow" do ┼é─ůczy w komentarzach do wpis├│w. Z relacj─ů t─ů chodzi┼éo o to, ┼╝e je┼Ťli odno┼Ťniki b─Öd─ů ni─ů oznaczone, to spamerzy zaniechaj─ů rozsiewania spamerskich komentarzy po blogach. Nie uda┼éo si─Ö, ale relacja rel="nofollow" pozosta┼éa.

Relacja rel="noreferrer" „oznacza, ┼╝e przy przechodzeniu na dan─ů stron─Ö nie maj─ů by─ç przekazywane ┼╝adne informacje o miejscu, z kt├│rego nast─ůpi┼éo przej┼Ťcie”. WebKit obs┼éuguje relacj─Ö rel="noreferrer", a wi─Öc dzia┼éa ona w przegl─ůdarkach Google Chrome i Safari (oraz powinna tak┼╝e dzia┼éa─ç w innych przegl─ůdarkach opartych na algorytmie WebKit). [przypadek testowy rel="noreferrer"]

Relacja rel="prefetch" „oznacza, ┼╝e mo┼╝na zawczasu pobra─ç do bufora podany zas├│b, gdy┼╝ istnieje du┼╝e prawdopodobie┼ästwo, ┼╝e u┼╝ytkownik i tak zechce go pobra─ç”. Wyszukiwarki czasami dodaj─ů <link rel="prefetch" href="URL pierwszego wyniku wyszukiwania"> na stronach wynik├│w wyszukiwania, je┼Ťli dojd─ů do wniosku, ┼╝e pierwszy wynik jest o wiele bardziej popularny ni┼╝ inne. Na przyk┼éad: poszukaj w Google frazy CNN, wy┼Ťwietl widok kodu ┼║r├│d┼éowego i poszukaj s┼éowa prefetch. Przegl─ůdarka Mozilla Firefox jak na razie jako jedyna obs┼éuguje relacj─Ö rel="prefetch".

Relacja rel="search" „oznacza, ┼╝e wskazywany dokument zawiera interfejs do przeszukiwania dokumentu i powi─ůzanych z nim zasob├│w”. Je┼Ťli chcesz, aby by┼é jaki┼Ť po┼╝ytek z u┼╝ycia relacji rel="search", ┼é─ůcze z ni─ů powinno wskazywa─ç dokument OpenSearch zawieraj─ůcy opis sposobu, w jaki przegl─ůdarka mo┼╝e skonstruowa─ç adres URL do przeszukania witryny w celu znalezienia wybranego s┼éowa kluczowego. OpenSearch (i ┼é─ůcza z relacj─ů rel="search" wskazuj─ůce dokumenty opis├│w OpenSearch) jest obs┼éugiwane przez przegl─ůdark─Ö Internet Explorer od wersji 7, Mozilla Firefox od wersji 2 oraz Google Chrome.

Relacja rel="tag" „wskazuje, ┼╝e tag reprezentowany przez wskazywany dokument dotyczy bie┼╝─ůcego dokumentu”. Oznaczanie tag├│w (s┼é├│w kluczowych u┼╝ywanych do kategoryzowania tre┼Ťci) przy u┼╝yciu atrybutu rel zosta┼éo wymy┼Ťlone przez Technorati w celu u┼éatwienia przyporz─ůdkowywania wpis├│w do kategorii. Dlatego pocz─ůtkowo nazywano je „tagami Technorati”. (Tak, dobrze widzisz: firma nastawiona na zysk przekona┼éa ca┼éy ┼Ťwiat do zaadaptowania metadanych, dzi─Öki kt├│rym praca tej firmy sta┼éa si─Ö l┼╝ejsza. Nie┼║le!) P├│┼║niej sk┼éadnia tej relacji zosta┼éa standardowo opisana w mikroformatach, gdzie nazwano j─ů po prostu rel="tag". Teraz wi─Ökszo┼Ť─ç platform blogowych, na kt├│rych mo┼╝na przypisywa─ç wpisy do kategorii i tag├│w ┼é─ůcza do wpis├│w oznacza relacj─ů rel="tag". Przegl─ůdarki nie specjalnego z tym nie robi─ů. Jest to tylko sygna┼é dla wyszukiwarek, aby wiedzia┼éy z czym maj─ů do czynienia.

J─Özyk HTML5 nie powsta┼é tylko po to, aby upro┼Ťci─ç niekt├│re istniej─ůce elementy (aczkolwiek w tym zakresie te┼╝ ma spore sukcesy). W HTML5 zdefiniowano te┼╝ wiele nowych element├│w semantycznych.

section
Element section reprezentuje og├│ln─ů sekcj─Ö dokumentu lub aplikacji. Sekcja w tym przypadku to grupa tre┼Ťci dotycz─ůcej jakiego┼Ť jednego tematu, zwykle dodatkowo opatrzona nag┼é├│wkiem. Przyk┼éadami sekcji s─ů rozdzia┼éy w ksi─ů┼╝ce, strona na kartach w oknie dialogowym z zak┼éadkami i ponumerowane cz─Ö┼Ťci pracy naukowej. Stron─Ö g┼é├│wn─ů witryny internetowej mo┼╝na podzieli─ç na sekcj─Ö wst─Öpn─ů, z wiadomo┼Ťciami i informacjami kontaktowymi.
nav
Element nav reprezentuje cz─Ö┼Ť─ç strony zawieraj─ůc─ů ┼é─ůcza do innych stron lub miejsc na tej samej stronie: sekcja z ┼é─ůczami nawigacyjnymi. Nie wszystkie grupy ┼é─ůczy na stronie musz─ů znajdowa─ç si─Ö w elemencie nav. Dotyczy on tylko sekcji zawieraj─ůcych najwa┼╝niejsze bloki nawigacji. W szczeg├│lno┼Ťci w stopce cz─Östo umieszcza si─Ö listy odno┼Ťnik├│w do r├│┼╝nych stron witryny, takich jak polityka prywatno┼Ťci, strona g┼é├│wna czy strona z informacjami o prawach autorskich. W takich przypadkach wystarczaj─ůce jest u┼╝ycie samego elementu footer, bez elementu nav.
article
Element article reprezentuje samodzielny fragment strony, dokumentu, aplikacji lub witryny internetowej, który może być rozpowszechniany w sposób niezależny od miejsca, w którym się znajduje, np. poprzez kanały RSS. Może na przykład reprezentować wpis na forum, artykuł gazety lub innego czasopisma, wpis na blogu, komentarz dodany przez użytkownika, interaktywny widżet lub gadżet itp.
aside
Element aside reprezentuje cz─Ö┼Ť─ç strony, kt├│ra jest bezpo┼Ťrednio powi─ůzana z tre┼Ťci─ů znajduj─ůc─ů si─Ö wok├│┼é tego elementu, a jednocze┼Ťnie nie b─Öd─ůca jej integraln─ů cz─Ö┼Ťci─ů. W druku takie sekcje najcz─Ö┼Ťciej wyst─Öpuj─ů jako paski boczne. Elementu tego mo┼╝na u┼╝ywa─ç do reprezentowania cytat├│w blokowych i pask├│w bocznych, reklam, grup element├│w nav oraz do oznaczania innych rodzaj├│w tre┼Ťci, kt├│re s─ů niezale┼╝ne od tre┼Ťci g┼é├│wnej.
hgroup
Element hgroup reprezentuje nagłówek sekcji. Element ten służy do grupowania elementów h1h6, gdy nagłówek jest wielopoziomowy, tzn. zawiera podnagłówki, alternatywne tytuły lub puentę.
header
Element header reprezentuje tre┼Ť─ç wst─Öpn─ů lub podstawowe pomoce nawigacyjne. W elemencie tym zazwyczaj umieszcza si─Ö nag┼é├│wek sekcji (element h1h6 lub hgroup), ale nie jest to konieczne. Elementu header mo┼╝na te┼╝ u┼╝y─ç do oznaczenia spisu tre┼Ťci sekcji, formularza wyszukiwania albo logo.
footer
Element footer reprezentuje stopk─Ö swojego najbli┼╝szego przodka b─Öd─ůcego elementem sekcyjnym. Najcz─Ö┼Ťciej w stopce umieszcza si─Ö informacje o autorze tre┼Ťci, ┼é─ůcza do podobnych dokument├│w, informacje o prawach autorskich itp. Stopka nie musi znajdowa─ç si─Ö na ko┼äcu sekcji, chocia┼╝ najcz─Ö┼Ťciej tam w┼éa┼Ťnie si─Ö j─ů umieszcza. Je┼Ťli element footer zawiera ca┼ée sekcje, zwykle reprezentuj─ů one dodatki, indeksy, d┼éugie kolofony, obszerne teksty licencji itp.
time
Element time reprezentuje godzin─Ö w formacie 24 godzinnym albo konkretn─ů dat─Ö wg rozszerzonego kalendarza Gregoria┼äskiego. Opcjonalnie mo┼╝e by─ç okre┼Ťlona godzina i strefa czasowa.
mark
Element mark służy do oznaczania tekstu, na który czytelnik powinien zwrócić uwagę.

Na pewno nie mo┼╝esz ju┼╝ si─Ö doczeka─ç, a┼╝ zaczniesz u┼╝ywa─ç tych nowych element├│w, bo je┼Ťli nie to po co czyta┼éby┼Ť ten rozdzia┼é. Ale chwilowo musimy odej┼Ť─ç od g┼é├│wnego tematu, aby powr├│ci─ç do niego za chwil─Ö.

Ka┼╝da przegl─ůdarka ma zdefiniowan─ů list─Ö obs┼éugiwanych przez siebie element├│w HTML. Przyk┼éadowo lista Firefoksa jest przechowywana w pliku nsElementTable.cpp. Je┼Ťli jakiego┼Ť elementu nie ma na tej li┼Ťcie, to uwa┼╝a si─Ö go za „nieznany”. Z nieznanymi elementami s─ů dwa problemy:

  1. Jak taki element ma by─ç formatowany? Domy┼Ťlnie przed i za elementem p wstawiana jest pusta przestrze┼ä o okre┼Ťlonym rozmiarze, element blockquote jest wci─Öty za pomoc─ů lewego marginesu, a element h1 ma powi─Ökszony rozmiar pisma. Ale jakie domy┼Ťlne style zastosowa─ç do nieznanych element├│w?
  2. Jak powinien wygl─ůda─ç DOM nieznanego elementu? Plik nsElementTable.cpp Mozilli zawiera informacje o tym, jakiego rodzaju elementy mo┼╝e zawiera─ç ka┼╝dy element. Je┼Ťli napiszemy kod <p><p>, to drugi akapit domy┼Ťlnie stanowi zamkni─Öcie pierwszego, dzi─Öki czemu elementy te s─ů w strukturze dokumentu r├│wnorz─Ödne. Je┼Ťli jednak napiszemy <p><span>, to element span nie oznacza zamkni─Öcia akapitu, poniewa┼╝ Firefox wie, ┼╝e <p> jest elementem blokowym mog─ůcym zawiera─ç ┼Ťr├│dliniowy element <span>. Dlatego element <span> w tym przypadku b─Ödzie potomkiem elementu <p> w strukturze DOM.

Odpowied┼║ na postawione pytania zale┼╝y od przegl─ůdarki. (Dziwne, prawda?) Z wszystkich najwa┼╝niejszych przegl─ůdarek najwi─Öcej problem├│w w tej kwestii sprawia Internet Explorer Microsoftu, ale tak naprawd─Ö ka┼╝da przegl─ůdarka potrzebuje troch─Ö pomocy.

Odpowied┼║ na pierwsze pytanie powinna by─ç wzgl─Ödnie prosta: nie nadawa─ç ┼╝adnego specjalnego formatowania nieznanym elementom. Niech normalnie dziedzicz─ů w┼éasno┼Ťci CSS po elementach nadrz─Ödnych i niech autor strony zatroszczy si─Ö o ich konkretne formatowanie. I w zasadzie tak jest, ale trzeba uwa┼╝a─ç na jedn─ů pu┼éapk─Ö.

Pytanie do profesora Kodeckiego

Wszystkie przegl─ůdarki nieznane elementy prezentuj─ů jako ┼Ťr├│dliniowe, tzn. tak, jakby mia┼éy zdefiniowane ustawienie CSS display:inline.

Ale niekt├│re nowe elementy HTML5 s─ů blokowe. To znaczy, ┼╝e mog─ů zawiera─ç inne elementy blokowe i przegl─ůdarki obs┼éuguj─ůce HTML5 domy┼Ťlnie przypisuj─ů im ustawienie display:block. Je┼Ťli chcesz ich u┼╝ywa─ç w starszych przegl─ůdarkach, musisz im t─Ö deklaracj─Ö przypisa─ç w┼éasnor─Öcznie:

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

(Powyższy kod został podkradziony z resetu CSS dla HTML5 Richa Clarka. Reset ten robi jeszcze kilka innych rzeczy, których opis nie należy do tematu tego rozdziału.)

Ale to nie wszystko. Jest gorzej ni┼╝ my┼Ťlisz! Internet Explorer do wersji 8 w┼é─ůcznie w og├│le nie stosuje arkuszy styl├│w do nieznanych element├│w. Za┼é├│┼╝my na przyk┼éad, ┼╝e mamy na stronie poni┼╝szy kod:

<style type="text/css">
  article { display: block; border: 1px solid red }
</style>
...
<article>
<h1>Witaj w Initech</h1>
<p>To jest twój <span>pierwszy dzień</span>.</p>
</article>

Internet Explorer do wersji 8 w┼é─ůcznie nie potraktuje elementu article jako blokowego ani nie zastosuje wok├│┼é niego czerwonego obramowania. Wszystkie regu┼éy CSS odnosz─ůce si─Ö do tego elementu w tej przegl─ůdarce zostan─ů zignorowane. W Internet Explorerze 9 usterk─Ö t─Ö ju┼╝ naprawiono.

Drugi problem dotyczy struktury DOM dokumentu z uwzgl─Ödnieniem nieznanych element├│w. W tym przypadku r├│wnie┼╝ najwi─Öcej trudno┼Ťci sprawiaj─ů starsze wersje Internet Explorera (starsze od wersji 9, w kt├│rej ju┼╝ usterk─Ö usuni─Öto). Gdy IE 8 nie rozpoznaje elementu po nazwie, wstawia go do drzewa DOM jako pusty nie maj─ůcy dzieci w─Öze┼é. Z tego powodu wszystkie elementy, kt├│re powinny by─ç bezpo┼Ťrednimi potomkami tego nieznanego elementu s─ů z nim r├│wnorz─Ödne.

Poni┼╝ej znajduje si─Ö atrakcyjna grafika ASCII, kt├│ra doskonale ilustruje omawiany problem. Tak wygl─ůda DOM wed┼éug struktury kodu HTML5:

article
|
+--h1 (dziecko elementu article)
|  |
|  +--text node "Witaj w Initech"
|
+--p (dziecko elementu article, brat elementu h1)
   |
   +--text node "To jest tw├│j "
   |
   +--span
   |  |
   |  +--text node "pierwszy dzień"
   |
   +--text node "."

A tak─ů struktur─Ö DOM utworzy Internet Explorer:

article (brak dzieci)
h1 (brat elementu article)
|
+--text node "Witaj w Initech"
p (brat elementu h1)
|
+--text node "To jest tw├│j "
|
+--span
|  |
|  +--text node "pierwszy dzień"
|
+--text node "."

Na szcz─Ö┼Ťcie istnieje genialne rozwi─ůzanie tego problemu. Przed u┼╝yciem elementu <article> na stronie wystarczy utworzy─ç jego atrap─Ö za pomoc─ů JavaScriptu, aby Internet Explorer magicznie zacz─ů┼é go rozpoznawa─ç i stosowa─ç do niego arkusze CSS. Nie trzeba nawet tej atrapy umieszcza─ç w strukturze DOM. Wystarczy tylko raz utworzy─ç element na stronie, aby Internet Explorer nauczy┼é si─Ö go rozpoznawa─ç.

<html>
<head>
<style>
  article { display: block; border: 1px solid red }
</style>
<script>document.createElement("article");</script>
</head>
<body>
<article>
<h1>Witaj w Initech</h1>
<p>To jest twój <span>pierwszy dzień</span>.</p>
</article>
</body>
</html>

Sztuczka ta dzia┼éa we wszystkich wersjach Internet Explorera a┼╝ do wersji 6! W ten sam spos├│b mo┼╝na w┼é─ůczy─ç obs┼éug─Ö wszystkich nowych element├│w HTML5 na raz. Przypomn─Ö, ┼╝e nie s─ů one wstawiane do drzewa DOM, a wi─Öc nigdy ich nie zobaczysz. Potem mo┼╝esz ich u┼╝ywa─ç nie martwi─ůc si─Ö o stare przegl─ůdarki.

Remy Sharp napisa┼é nawet specjalny skrypt o tajemniczej nazwie Skrypt w┼é─ůczaj─ůcy obs┼éug─Ö HTML5. Program ten by┼é ju┼╝ wielokrotnie przerabiany, ale podstawa jego dzia┼éania jest nast─Öpuj─ůca:

<!--[if lt IE 9]>
<script>
  var e = ("abbr,article,aside,audio,canvas,datalist,details," +
    "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
    "progress,section,time,video").split(',');
  for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
  }
</script>
<![endif]-->

Znaczniki <!--[if lt IE 9]> i <![endif]--> to komentarze warunkowe. Internet Explorer interpretuje je jako instrukcj─Ö if: „je┼Ťli przegl─ůdarka, w kt├│rej otwarto t─Ö stron─Ö jest Internet Explorerem w wersji starszej od 9, to wykonaj ten blok kodu”. Dla wszystkich innych przegl─ůdarek ca┼éy ten blok kodu jest zwyk┼éym komentarzem HTML. W efekcie Internet Explorer do wersji 8 w┼é─ůcznie wykona skrypt, a pozosta┼ée przegl─ůdarki go zignoruj─ů. Dzi─Öki temu w przegl─ůdarkach, w kt├│rych ta sztuczka jest niepotrzebna strona b─Ödzie si─Ö szybciej wczytywa┼éa.

U┼╝yty w skrypcie kod JavaScript jest wzgl─Ödnie prosty. Zmienna e jest tablic─ů ┼éa┼äcuch├│w, np. "abbr", "article", "aside" itd. P├│┼║niej przegl─ůdamy j─ů za pomoc─ů p─Ötli i tworzymy elementy ze znajduj─ůcych si─Ö w niej nazw za pomoc─ů wywo┼éania metody document.createElement(). Jako ┼╝e ignorujemy warto┼Ť─ç zwrotn─ů tego wywo┼éania, elementy nie s─ů dodawane do drzewa DOM. To jednak wystarczy, aby Internet Explorer traktowa┼é te elementy tak, jak chcemy, gdy b─Ödziemy ich u┼╝ywa─ç p├│┼║niej na stronie.

W poprzednim zdaniu bardzo wa┼╝ne jest s┼éowo „p├│┼║niej”. Skrypt musi znajdowa─ç si─Ö na pocz─ůtku strony, najlepiej w elemencie head. Absolutnie nie mo┼╝na go umieszcza─ç na ko┼äcu dokumentu. Dzi─Öki temu Internet Explorer wykona go przed przeanalizowaniem element├│w strony i ich atrybut├│w. Gdyby skrypt umieszczono na dole strony, to jego dzia┼éanie by┼éoby sp├│┼║nione. Internet Explorer zd─ů┼╝y ┼║le zinterpretowa─ç kod HTML i utworzy─ç nieprawid┼éowe drzewo DOM, a od tego nie ma odwrotu. Nie mo┼╝na ju┼╝ nic naprawi─ç.

Remy Sharp zminimalizowa┼é sw├│j skrypt i udost─Öpni┼é go w repozytorium Google. (Dodam jeszcze, ┼╝e skrypt jest otwarty i dost─Öpny na licencji MIT, a wi─Öc mo┼╝na z nim robi─ç, co si─Ö chce). Mo┼╝na go nawet „hotlinkowa─ç” bezpo┼Ťrednio z serwer├│w Google:

<head>
  <meta charset="utf-8" />
  <title>M├│j blog</title>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

Teraz mo┼╝esz zacz─ů─ç u┼╝ywa─ç nowych semantycznych element├│w HTML5.

Wr├│─çmy do naszej przyk┼éadowej strony. A konkretnie spojrzymy na znajduj─ůce si─Ö na niej nag┼é├│wki:

<div id="header">
  <h1>M├│j blog</h1>
  <p class="tagline">Włożono wiele wysiłku, aby robienie tego nie wymagało dużo pracy.</p>
</div>

…

<div class="entry">
  <h2>Dzień wyjazdu</h2>
</div>

…

<div class="entry">
  <h2>Jad─Ö do Pragi!</h2>
</div>

Ten kod jest absolutnie poprawny. Je┼Ťli ci si─Ö podoba, mo┼╝esz go u┼╝ywa─ç. Jest to poprawny kod HTML5. Ale w j─Özyku HTML5 dost─Öpne s─ů dodatkowe semantyczne elementy do oznaczania nag┼é├│wk├│w i sekcji.

Najpierw pozb─Ödziemy si─Ö elementu <div id="header">. Jest to cz─Östo spotykany kod, ale on przecie┼╝ tak naprawd─Ö nic nie znaczy. Element div nie ma zdefiniowanej semantyki, podobnie jak atrybut id. (Aplikacje klienckie nie mog─ů dedukowa─ç ┼╝adnych znacze┼ä z warto┼Ťci atrybutu id.) R├│wnie dobrze mogliby┼Ťmy napisa─ç <div id="abrakadabra"> i otrzymaliby┼Ťmy to samo, je┼Ťli chodzi o semantyk─Ö, czyli nic.

W j─Özyku HTML5 do oznaczania tego rodzaju tre┼Ťci s┼éu┼╝y element <header>. W specyfikacji HTML5 znajduj─ů si─Ö realne przyk┼éady u┼╝ycia elementu <header>. Na naszej przyk┼éadowej stronie mo┼╝na by by┼éo go u┼╝y─ç w taki spos├│b:

<header>
  <h1>M├│j blog</h1>
  <p class="tagline">Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy.</p>
  …
</header>

W porz─ůdku. Ka┼╝dy kogo to interesuje b─Ödzie wiedzia┼é, ┼╝e jest to nag┼é├│wek. Ale co z has┼éem? Jest to kolejny cz─Östo spotykany przypadek, dla kt├│rego do tej pory nie by┼éo ┼╝adnego specjalnego znacznika. Znakowanie tre┼Ťci to trudne zaj─Öcie. Has┼éo jest jak podnag┼é├│wek, tylko ┼╝e „zwi─ůzany” z g┼é├│wnym nag┼é├│wkiem. Inaczej m├│wi─ůc jest to podnag┼é├│wek, kt├│ry nie tworzy w┼éasnej sekcji.

Elementy takie jak h1 i h2 okre┼Ťlaj─ů struktur─Ö dokumentu. Razem tworz─ů zarys, przy u┼╝yciu kt├│rego mo┼╝na wizualizowa─ç stron─Ö albo si─Ö po niej porusza─ç. czytniki ekranu wykorzystuj─ů zarysy do pomagania niewidomym u┼╝ytkownikom w przegl─ůdaniu stron internetowych. Istniej─ů nawet internetowe narz─Ödzia i rozszerzenia przegl─ůdarek pozwalaj─ůce wy┼Ťwietli─ç zarys dokumentu.

W HTML 4, zarys dokumentu mo┼╝na by┼éo tworzy─ç tylko przy u┼╝yciu element├│w h1h6. Zarys przyk┼éadowej strony wygl─ůda tak:

M├│j blog (h1)
   |
   +--Dzień wyjazdu (h2)
   |
   +--Jad─Ö do Pragi! (h2)

Wszystko jest dobrze, ale nie ma jak oznaczy─ç has┼éa „W┼éo┼╝ono wiele wysi┼éku w to, aby robienie tego nie wymaga┼éo du┼╝o pracy”. Gdyby┼Ťmy u┼╝yli do tego celu elementu h2, to w zarysie dokumentu pojawi┼é by si─Ö w─Öze┼é widmo:

M├│j blog (h1)
   |
   +--Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy. (h2)
   |
   +--Dzień wyjazdu (h2)
   |
   +--Jad─Ö do Pragi! (h2)

Nie taka jest struktura dokumentu. Hasło nie reprezentuje żadnej sekcji, a jedynie podnagłówek.

Mo┼╝e mo┼╝na by by┼éo oznaczy─ç je elementem h2, a tytu┼éy artyku┼é├│w umie┼Ťci─ç w elemencie h3? Nie, tak by┼éoby jeszcze gorzej:

M├│j blog (h1)
   |
   +--Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy. (h2)
         |
         +--Dzień wyjazdu (h3)
         |
         +--Jad─Ö do Pragi! (h3)

Nadal w zarysie dokumentu mamy w─Öze┼é widmo, ale na dodatek „ukrad┼é” on dzieci nale┼╝─ůce do w─Öz┼éa g┼é├│wnego. Oto sedno problemu: w j─Özyku HTML 4 nie ma sposobu na oznaczenie podnag┼é├│wka bez dodawania go do zarysu dokumentu. Cho─çby┼Ťmy nie wiadomo jak si─Ö starali i mieszali elementy, to zdanie „W┼éo┼╝ono wiele wysi┼éku w to, aby robienie tego nie wymaga┼éo du┼╝o pracy” zawsze znajdzie si─Ö w tym schemacie. Dlatego w┼éa┼Ťnie byli┼Ťmy zmuszeni u┼╝ywa─ç bezwarto┼Ťciowego pod wzgl─Ödem semantycznym elementu <p class="tagline">.

W j─Özyku HTML5 rozwi─ůzanie tego problemu jest proste: wystarczy u┼╝y─ç elementu hgroup. Element hgroup jest kontenerem, w kt├│rym mo┼╝na umie┼Ťci─ç dwa lub wi─Öcej powi─ůzanych ze sob─ů nag┼é├│wk├│w. Co znaczy wyra┼╝enie „powi─ůzane ze sob─ů”? Znaczy to, ┼╝e elementy te razem tworz─ů tylko jeden w─Öze┼é w zarysie dokumentu.

Załóżmy, że mamy taki kod HTML:

<header>
  <hgroup>
    <h1>M├│j blog</h1>
    <h2>Włożono wiele wysiłku w to, aby robienie tego nie wymagało dużo pracy.</h2>
  </hgroup>
  …
</header>

…

<div class="entry">
  <h2>Dzień wyjazdu</h2>
</div>

…

<div class="entry">
  <h2>Jad─Ö do Pragi!</h2>
</div>

Ten dokument ma nast─Öpuj─ůcy zarys:

M├│j blog (h1 ze swojej grupy hgroup)
   |
   +--Dzień wyjazdu (h2)
   |
   +--Jad─Ö do Pragi! (h2)

Je┼Ťli chcesz si─Ö dowiedzie─ç czy poprawnie stosujesz nag┼é├│wki na swoich stronach, mo┼╝esz je przetestowa─ç w narz─Ödziu do sprawdzania zarysu dokument├│w HTML5.

Pozostaj─ůc przy naszej przyk┼éadowej stronie, zobaczmy co da si─Ö zrobi─ç z tym kodem HTML:

<div class="entry">
  <p class="post-date">22 pa┼║dziernika 2009 r.</p>
  <h2>
    <a href="#"
       rel="bookmark"
       title="┼é─ůcze do tego wpisu">
       Dzień wyjazdu
    </a>
  </h2>
  …
</div>

Jest to poprawny kod HTML5. Ale w j─Özyku HTML5 dost─Öpny s─ů te┼╝ specjalny element s┼éu┼╝─ůcy do oznaczania artyku┼é├│w na stronach: element article.

<article>
  <p class="post-date">22 pa┼║dziernika 2009 r.</p>
  <h2>
    <a href="#"
       rel="bookmark"
       title="┼é─ůcze do tego wpisu">
       Dzień wyjazdu
    </a>
  </h2>
  …
</article>

Hola, to nie takie proste. Trzeba zmieni─ç co┼Ť jeszcze. Najpierw poka┼╝─Ö co, a potem wyja┼Ťni─Ö dlaczego:

<article>
  <header>
    <p class="post-date">22 pa┼║dziernika 2009 r.</p>
    <h1>
      <a href="#"
         rel="bookmark"
         title="┼é─ůcze do tego wpisu">
         Dzień wyjazdu
      </a>
    </h1>
  </header>
  …
</article>

Wiesz o co chodzi? Zamieni┼éem element h2 na h1 i oba umie┼Ťci┼éem w elemencie header. Element header ju┼╝ widzia┼ée┼Ť wcze┼Ťniej. S┼éu┼╝y do grupowania element├│w stanowi─ůcych nag┼é├│wek artyku┼éu (w tym przypadku jest to data i tytu┼é publikacji). Ale…ale…ale… czy w dokumencie nie powinien znajdowa─ç si─Ö maksymalnie jeden element h1? Czy to nie popsuje zarysu dokumentu? Nie, ale ┼╝eby zrozumie─ç dlaczego, musimy nieco si─Ö cofn─ů─ç.

W HTML 4, zarys dokumentu mo┼╝na by┼éo tworzy─ç tylko przy u┼╝yciu element├│w <h1><h6>. Je┼Ťli chcieli┼Ťmy mie─ç w zarysie tylko jeden w─Öze┼é g┼é├│wny, musieli┼Ťmy ograniczy─ç si─Ö do u┼╝ycia tylko jednego elementu h1. Ale w specyfikacji HTML5 zdefiniowano algorytm generowania zarysu dokument├│w bior─ůcy pod uwag─Ö nowe elementy semantyczne. W algorytmie ten element article tworzy now─ů sekcj─Ö, a wi─Öc nowy w─Öze┼é w zarysie. Ponadto w HTML5 ka┼╝da sekcja mo┼╝e zawiera─ç w┼éasny element h1.

Jest to radykalna i bardzo korzystna zmiana w stosunku do HTML 4. Wiele strony internetowych jest generowanych przy u┼╝yciu szablon├│w. Sk┼éada si─Ö je po kawa┼éku z cz─Ö┼Ťci pochodz─ůcych z r├│┼╝nych ┼║r├│de┼é — troch─Ö st─ůd, troch─Ö stamt─ůd i otrzymujemy kompletn─ů stron─Ö. W ten sam spos├│b skonstruowanych jest wiele kurs├│w. „Oto fragment kodu HTML. Skopiuj go i wklej na swoj─ů stron─Ö”. Jest to dobre rozwi─ůzanie w przypadku niewielkich fragment├│w tre┼Ťci, ale pomy┼Ťl co by by┼éo, gdyby trzeba by┼éo wklei─ç ca┼é─ů sekcj─Ö. W takim przypadku kurs wygl─ůda┼éby mniej wi─Öcej tak: „Oto fragment kodu HTML. Skopiuj go, wklej do edytora tekstu, a nast─Öpnie dostosuj nag┼é├│wki tak, aby pasowa┼éy poziomem do nag┼é├│wk├│w, kt├│re ju┼╝ znajduj─ů si─Ö na stronie, na kt├│r─ů masz wklei─ç kod”.

Innymi s┼éowy w j─Özyku HTML 4 nie ma og├│lnego elementu nag┼é├│wkowego. S─ů tylko ponumerowane nag┼é├│wki h1h6, kt├│re musz─ů by─ç stosowane w ┼Ťci┼Ťle okre┼Ťlonej kolejno┼Ťci. To powa┼╝ny problem, zw┼éaszcza gdy strona jest „sk┼éadana” z r├│┼╝nych cz─Ö┼Ťci, a nie stanowi jednolitego ci─ůgu tre┼Ťci. Ten w┼éa┼Ťnie problem w HTML5 rozwi─ůzano przy u┼╝yciu nowych element├│w sekcyjnych i regu┼é dotycz─ůcych stosowania istniej─ůcych nag┼é├│wk├│w. Je┼Ťli u┼╝ywasz nowych element├│w sekcyjnych, to mog─Ö przekaza─ç ci poni┼╝szy kod HTML:

<article>
  <header>
    <h1>Wpis</h1>
  </header>
  <p>Lorem ipsum la la la…</p>
</article>

Ty mo┼╝esz ten kod skopiowa─ç i wklei─ç w dowolnym miejscu na swojej stronie nic w nim nie zmieniaj─ůc. Zawarto┼Ť─ç elementu h1 nie stanowi tu problemu, poniewa┼╝ ca┼éo┼Ť─ç znajduje si─Ö w elemencie article. Element article w zarysie dokumentu stanowi samodzielny w─Öze┼é a element h1 jest jego tytu┼éem. Pozosta┼ée elementy sekcyjne na tej samej stronie pozostan─ů na swoim odpowiednim poziomie zagnie┼╝d┼╝enia.

Pytanie do profesora Kodeckiego

Oczywi┼Ťcie, jak to zwykle bywa z internetem, rzeczywisto┼Ť─ç jest troch─Ö bardziej skomplikowana ni┼╝ w moim opisie. Nowe „jawne” elementy sekcyjne (jak h1 w article) mog─ů w do┼Ť─ç niezwyk┼éy spos├│b oddzia┼éywa─ç ze starymi „niejawnymi” elementami sekcyjnymi (np. samodzielnie u┼╝yte nag┼é├│wki h1h6). B─Ödzie ci ┼éatwiej, je┼Ťli b─Ödziesz u┼╝ywa─ç jednych albo drugich, ale nie obu rodzaj├│w na raz. Je┼Ťli jednak u┼╝yjesz tych dw├│ch rodzaj├│w element├│w na jednej stronie, sprawd┼║ efekt w narz─Ödziu HTML5 Outliner, aby przekona─ç si─Ö czy zarys twojego dokumentu jest logiczny.

Przyznasz chyba, ┼╝e te wszystkie nowo┼Ťci s─ů niesamowite, prawda? Mo┼╝e ich poznawanie nie wywo┼éuje takiego entuzjazmu, jak zjazd nago na nartach z Mount Everest recytuj─ůc Od─Ö do m┼éodo┼Ťci od ko┼äca, ale chyba nie mo┼╝na wi─Öcej wymaga─ç od semantycznych znacznik├│w HTML. Wr├│─çmy do naszej przyk┼éadowej strony. Kolejny fragment kodu, na kt├│ry chc─Ö zwr├│ci─ç twoj─ů uwag─Ö jest wyr├│┼╝niony poni┼╝ej:

<div class="entry">
  <p class="post-date">22 pa┼║dziernika 2009 r.</p>
  <h2>Dzień wyjazdu</h2>
</div>

Ju┼╝ to znamy, prawda? Typowa sytuacja: chcemy pokaza─ç dat─Ö publikacji artyku┼éu, a poniewa┼╝ nie ma przeznaczonego do tego celu semantycznego elementu, stosujemy og├│lny element ze specjaln─ů klas─ů. Jest to poprawny kod HTML5. Nie musisz go zmienia─ç. Ale w j─Özyku HTML5 jest dost─Öpne lepsze rozwi─ůzanie tej kwestii: element time.

<time datetime="2009-10-22" pubdate>22 pa┼║dziernika 2009 r.</time>

Element <time> sk┼éada si─Ö z trzech cz─Ö┼Ťci:

  1. znacznika czasu przeznaczonego dla komputer├│w,
  2. tre┼Ťci tekstowej dla ludzi,
  3. opcjonalnej flagi pubdate.

W tym przyk┼éadzie atrybut datetime zawiera tylko dat─Ö, bez godziny. Format daty jest nast─Öpuj─ůcy: rrrr-mm-dd:

<time datetime="2009-10-22" pubdate>22 pa┼║dziernika 2009 r.</time>

Je┼Ťli chcesz dodatkowo poda─ç godzin─Ö, wstaw za dat─ů liter─Ö T, a nast─Öpnie wpisz godzin─Ö w formacie 24 godzinnym, po czym podaj stref─Ö czasow─ů.

<time datetime="2009-10-22T13:59:47-04:00" pubdate>
  22 pa┼║dziernika 2009 r. 1:59 EDT
</time>

(Format daty i godziny jest bardzo elastyczny. W specyfikacji HTML5 można znaleźć przykłady poprawnie zbudowanych łańcuchów daty i godziny.)

Zwr├│─ç uwag─Ö, ┼╝e zmieni┼éem tre┼Ť─ç tekstow─ů — to co znajduje si─Ö mi─Ödzy znacznikami <time> i </time> — aby odpowiada┼éa maszynowemu znacznikowi czasu. Nie jest to jednak konieczne. Tre┼Ť─ç tekstowa mo┼╝e by─ç dowolna, wa┼╝ne aby w atrybucie datetime poda─ç poprawn─ů dat─Ö i/lub godzin─Ö w formacie maszynowym. W zwi─ůzku z tym poni┼╝szy kod jest poprawny wg zasad HTML5:

<time datetime="2009-10-22">zeszły czwartek</time>

Poni┼╝szy fragment r├│wnie┼╝ jest poprawny:

<time datetime="2009-10-22"></time>

Pozosta┼éo jeszcze wyja┼Ťni─ç znaczenie cz─ůstki pubdate. Jest to atrybut logiczny, a wi─Öc je┼Ťli jest potrzebny, wystarczy go zdefiniowa─ç, np.:

<time datetime="2009-10-22" pubdate>22 pa┼║dziernika 2009 r.</time>

Je┼Ťli nie lubisz takich „go┼éych” atrybut├│w, to mo┼╝esz te┼╝ napisa─ç tak:

<time datetime="2009-10-22" pubdate="pubdate">22 pa┼║dziernika 2009 r.</time>

Co oznacza atrybut pubdate? Mo┼╝e oznacza─ç dwie rzeczy, w zale┼╝no┼Ťci od miejsca wyst─Öpowania. Je┼Ťli element time znajduje si─Ö w elemencie article, to znaczy, ┼╝e ten znacznik czasu okre┼Ťla dat─Ö publikacji artyku┼éu. Je┼Ťli element time nie znajduje si─Ö w elemencie article, to znaczy, ┼╝e ten znacznik czasu okre┼Ťla dat─Ö publikacji ca┼éego dokumentu.

Poni┼╝ej znajduje si─Ö kompletny kod artyku┼éu, w kt├│rym w pe┼éni wykorzystano mo┼╝liwo┼Ťci j─Özyka HTML5:

<article>
  <header>
    <time datetime="2009-10-22" pubdate>
      22 pa┼║dziernika 2009 r.
    </time>
    <h1>
      <a href="#"
         rel="bookmark"
         title="┼é─ůcze do tego wpisu">
         Dzień wyjazdu
      </a>
    </h1>
  </header>
  <p>Lorem ipsum dolor sit amet…</p>
</article>

Jednym z najwa┼╝niejszych sk┼éadnik├│w ka┼╝dej strony internetowej jest pasek nawigacyjny. W serwisie CNN.com na ka┼╝dej stronie pod g├│rn─ů kraw─Ödzi─ů znajduj─ů si─Ö „zak┼éadki” prowadz─ůce do r├│┼╝nych sekcji — „Tech”, „Health”, „Sports” itd. Co┼Ť podobnego mo┼╝na spotka─ç na stronach wynik├│w wyszukiwania Google, na kt├│rych znajduj─ů si─Ö odno┼Ťniki prowadz─ůce do r├│┼╝nych rodzaj├│w wyszukiwarek — „Obrazy”, „Wideo”, „Mapy” itd. Nasza przyk┼éadowa strona ma pasek nawigacyjny umiejscowiony w nag┼é├│wku. Zawiera on ┼é─ůcza do sekcji serwisu — „Strona g┼é├│wna”, „Blog”, „Galeria” oraz „O nas”.

Pierwotnie kod ┼║r├│d┼éowy tego paska nawigacyjnego wygl─ůda┼é tak:

<div id="nav">
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">O nas</a></li>
  </ul>
</div>

Jest to poprawny kod HTML5. Ale jako ┼╝e zosta┼é zbudowany przy u┼╝yciu listy, nie m├│wi nic o tym, ┼╝e jest to w┼éa┼Ťnie cz─Ö┼Ť─ç nawigacji serwisu. Patrz─ůc na stron─Ö mo┼╝na si─Ö tego domy┼Ťli─ç, bo komponent znajduje si─Ö w nag┼é├│wku i zawiera ┼é─ůcza tekstowe. Jednak pod wzgl─Ödem semantycznym w kodzie tym nie ma niczego, co by odr├│┼╝nia┼éo t─Ö list─Ö odno┼Ťnik├│w od innych list.

Kogo obchodzi semantyka nawigacji witryny? Na przyk┼éad osoby niepe┼énosprawne. Dlaczego? Zastan├│w si─Ö nad tak─ů sytuacj─ů: masz ograniczone mo┼╝liwo┼Ťci ruchu i z trudem, je┼Ťli w og├│le, pos┼éugujesz si─Ö mysz─ů. Dlatego u┼╝ywasz dodatku do przegl─ůdarki, kt├│ry umo┼╝liwia przechodzenie do (lub przeskakiwanie) g┼é├│wnych ┼é─ůczy nawigacyjnych. Ale pomy┼Ťl o takim przypadku: masz s┼éaby wzrok i dlatego u┼╝ywasz czytnika ekranu, kt├│ry czyta na g┼éos zawarto┼Ť─ç przegl─ůdanych przez Ciebie stron internetowych. Po tytule strony najwa┼╝niejszym elementem s─ů g┼é├│wne ┼é─ůcza nawigacyjne. Je┼Ťli chcesz szybko dotrze─ç w wybrane miejsce, poinstruujesz czytnik, aby przeszed┼é do paska nawigacyjnego i odczyta┼é jego zawarto┼Ť─ç. Je┼Ťli chcesz szybko przej┼Ť─ç do zg┼é─Öbiania tre┼Ťci, poinstruujesz czytnik, aby pomin─ů┼é pasek nawigacyjny i przeczyta┼é tre┼Ť─ç g┼é├│wn─ů strony. W obu przypadkach mo┼╝liwo┼Ť─ç wyodr─Öbnienia ┼é─ůczy nawigacyjnych przez program jest bardzo wa┼╝na.

Kr├│tko m├│wi─ůc, mimo ┼╝e nie ma nic z┼éego w oznaczaniu nawigacji witryny za pomoc─ů elementu <div id="nav">, to nie ma w tym te┼╝ nic dobrego. Nie jest to optymalna metoda, je┼Ťli wzi─ů─ç pod uwag─Ö potrzeby wszystkich u┼╝ytkownik├│w internetu. W j─Özyku HTML5 zdefiniowano specjalny semantyczny element do oznaczania sekcji nawigacji: element nav.

<nav>
  <ul>
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Galeria</a></li>
    <li><a href="#">O nas</a></li>
  </ul>
</nav>

Pytanie do profesora Kodeckiego

P: Czy ┼é─ůczy typu pomi┼ä mo┼╝na u┼╝ywa─ç z elementem nav? Czy w HTML5 takie odno┼Ťniki s─ů jeszcze potrzebne?

O: ┼é─ůcza takie pozwalaj─ů pomin─ů─ç sekcj─Ö nawigacji. S─ů pomocne dla niepe┼énosprawnych os├│b, kt├│re u┼╝ywaj─ů program├│w do czytania stron internetowych na g┼éos i nie pos┼éuguj─ů si─Ö mysz─ů. (Dowiedz si─Ö jak i dlaczego tworzy─ç odno┼Ťniki pomijania nawigacji.)

Gdy czytniki ekranu zaczn─ů rozpoznawa─ç element nav, odno┼Ťniki do pomijania nawigacji stan─ů si─Ö niepotrzebne, poniewa┼╝ programy te b─Öd─ů mog┼éy automatycznie przeskoczy─ç nawigacj─Ö oznaczon─ů elementem nav. Jednak zanim wszyscy niepe┼énosprawni u┼╝ytkownicy zaczn─ů u┼╝ywa─ç czytnik├│w obs┼éuguj─ůcych HTML5, up┼éynie jeszcze du┼╝o wody w Cetynii. Dlatego na razie jeszcze powinno si─Ö dodawa─ç ┼é─ůcze pozwalaj─ůce przeskoczy─ç sekcj─Ö nav.

Nareszcie dotarli┼Ťmy na sam koniec naszej przyk┼éadowej strony. Na zako┼äczenie kilka s┼é├│w o ostatnim elemencie strony, czyli stopce. Pocz─ůtkowo stopk─Ö oznaczyli┼Ťmy nast─Öpuj─ůco:

<div id="footer">
  <p>§</p>
  <p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</div>

Jest to poprawny kod HTML5. Je┼Ťli ci si─Ö podoba, mo┼╝esz go u┼╝ywa─ç. Ale w j─Özyku HTML5 jest dost─Öpny lepszy element s┼éu┼╝─ůcy do oznaczania stopki: element footer.

<footer>
  <p>§</p>
  <p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</footer>

Co powinno si─Ö umieszcza─ç w elemencie footer? Najpro┼Ťciej m├│wi─ůc, wszystko to, co umie┼Ťci┼éby┼Ť w elemencie <div id="footer">. Wiem, to pokr─Ötna odpowied┼║. Ale naprawd─Ö jest bardzo dobra. Wed┼éug specyfikacji HTML5: “Najcz─Ö┼Ťciej w stopce umieszcza si─Ö informacje o autorze tre┼Ťci, ┼é─ůcza do podobnych dokument├│w, informacje o prawach autorskich itp.” Informacje takie znajduje si─Ö w stopce tak┼╝e naszej przyk┼éadowej strony: kr├│tka informacja o prawach autorskich i odno┼Ťnik do strony o autorze. Kiedy jednak przegl─ůdam r├│┼╝ne strony internetowe, to dostrzegam w stopce bardzo du┼╝y potencja┼é.

  • W portalu CNN stopka zawiera informacj─Ö o prawach autorskich, ┼é─ůcza do t┼éumacze┼ä oraz odno┼Ťniki do warunk├│w korzystania, polityki prywatno┼Ťci, strony z informacjami o firmie, strony z danymi kontaktowymi i stron pomocy. Wszystko to doskonale nadaje si─Ö do umieszczenia w elemencie footer.
  • Google s┼éynie ze swojej wyj─ůtkowo ascetycznej strony g┼é├│wnej, ale na dole znajduj─ů si─Ö ┼é─ůcza „Reklamuj si─Ö w Google”, „‎Rozwi─ůzania dla firm”, „Prywatno┼Ť─ç i warunki”, „Wszystko o Google” oraz informacja o prawach autorskich. To r├│wnie┼╝ jest dobrym materia┼éem do umieszczenia w elemencie footer.
  • M├│j blog ma stopk─Ö zawieraj─ůc─ů ┼é─ůcza do moich innych stron i informacje o prawach autorskich. Nie ma w─ůtpliwo┼Ťci, ┼╝e tak─ů tre┼Ť─ç mo┼╝na umie┼Ťci─ç w stopce. (Zwr├│─ç uwag─Ö, ┼╝e odno┼Ťnik├│w w tym przypadku nie nale┼╝y umieszcza─ç w elemencie <nav>, poniewa┼╝ nie nale┼╝─ů do g┼é├│wnej nawigacji witryny. S─ů to po prostu odno┼Ťniki do innych moich prac.)

“Ostatnio wielk─ů karier─Ö robi─ů tzw. wypasione stopki (ang. fat footer). Sp├│jrz np. na stopk─Ö w serwisie W3C. Zawiera trzy kolumny zatytu┼éowane „Navigation”, „Contact W3C” oraz „W3C Updates”. Kod ┼║r├│d┼éowy wygl─ůda mniej wi─Öcej tak:

<div id="w3c_footer">
  <div class="w3c_footer-nav">
    <h3>Navigation</h3>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>Contact W3C</h3>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>W3C Updates</h3>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </div>
  <p class="copyright">Copyright © 2009 W3C</p>
</div>

Gdybym chcia┼é u┼╝y─ç nowych semantycznych element├│w HTML5, dokona┼ébym nast─Öpuj─ůcych modyfikacji:

  • Zewn─Ötrzny element <div id="w3c_footer"> zamieni┼ébym na element <footer>.
  • Dwa pierwsze elementy <div class="w3c_footer-nav"> zamieni┼ébym na elementy <nav>, a trzeci — na <section>.
  • Nag┼é├│wki <h3> zamieni┼ébym na <h1>, poniewa┼╝ teraz ka┼╝dy z nich b─Ödzie znajdowa┼é si─Ö w elemencie sekcyjnym. Element <nav>, podobnie jak <article>, tworzy sekcj─Ö w zarysie dokumentu.

W efekcie kod ┼║r├│d┼éowy tej stopki wygl─ůda┼éby tak:

<footer>
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
    </ul>
  </nav>
  <nav>
    <h1>Contact W3C</h1>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
    </ul>
  </nav>
  <section>
    <h1>W3C Updates</h1>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </section>
  <p class="copyright">Copyright © 2009 W3C</p>
</footer>

Lektura uzupe┼éniaj─ůca

Przykładowe strony omawiane w tym rozdziale:

O kodowaniu znak├│w:

O w┼é─ůczaniu obs┼éugi nowych element├│w HTML5 w Internet Explorerze:

O trybach obsługi standardów i wykrywaniu typu dokumentu:

Walidator obs┼éuguj─ůcy HTML5:

Autor: Mark Pilgrim

Źródło: http://diveintohtml5.info/

Tłumaczenie: Łukasz Piwko

Tre┼Ť─ç tej strony jest dost─Öpna na zasadach licencji CC BY 3.0