• Wprowadzenie
• Typ dokumentu HTML5
• Element html
• Element head
• Kodowanie znaków w HTML5
• Relacje między dokumentami
• Elementy semantyczne HTML5
• Obsługa nieznanych elementów
• Nagłówki w HTML5
• Artykuły w HTML5
• Elementy daty i godziny HTML5
• Nawigacja w HTML5
• Stopka strony w HTML5

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.

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.

• Wprowadzenie
• Typ dokumentu HTML5
• Element html
• Element head
• Kodowanie znaków w HTML5
• Relacje między dokumentami
• Elementy semantyczne HTML5
• Obsługa nieznanych elementów
• Nagłówki w HTML5
• Artykuły w HTML5
• Elementy daty i godziny HTML5
• Nawigacja w HTML5
• Stopka strony w HTML5