• Strona główna
  • Curriculum Vitae
  • O mnie
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

Relacje dla odnośników

Opublikowane 3 lipca 2010. Autor: Kamil Brenk. Wizyt: 42.

Kategorie: HTML5 & CSS3
Tematyka: atrybut rel, Document relationships, HTML5, LinkTypes, mikroformaty

lip 03

Document relationships to wynalazek wymyślony na potrzeby mikroformatów i HTML5 (choć relacje były już wykorzystywane w HTML4 to wraz z nadejściem HTML5 dodano kilka nowych wartości i zaczęto przywiązywać do tego większą wagę).

Otóż jest to specjalny atrybut HTML współdziałający z takimi elementami jak A, AREA oraz LINK. Zadaniem natomiast jest określenie relacji z obiektem/stroną, do której odsyła. W niniejszej notce chciałbym omówić typy relacji dla odsyłaczy.

Do czego mogę wykorzystać relacje?

Webdeveloper może wykorzystywać atrybut rel na linkach w celu dokładniejszego wyjaśnienia tego, jakie ma relacje z bieżącym dokumentem zamieszczony na stronie odsyłacz (lub inny, wyżej wspominany element HTML).

Wiadomość ta może być wykorzystana przez agenta przeglądarki, wyszukiwarkę, czytniki stron lub inne aplikacje analizujące kod strony WWW.

Praktyczna wiedza

A więc wypiszmy typowe relacje między dokumentami w sieci:

  • Alternate
    Dodanie takiej wartości do atrybutu rel oznacza, że dokument jest alternatywą wersją do obecnie wyświetlanego dokumentu. Możemy wyróżnić kilka rodzajów alternatywnych dokumentów:
    • jeśli ten sam element HTML zawiera także atrybut media to link odsyła do dokumentu przeznaczanego na inne media (wersja do druku – media=”print”, wersja ekranowa – media=”screen”, itp.),
    • jeśli ten sam element HTML zawiera także atrybut hreflang to link odsyła do dokumentu w innym języku (hreflang=”en”),
    • jeśli ten sam element HTML zawiera także atrybut type to link odsyła do dokumentu innego typu (type=”application/pdf”).
  • Author
    Odsyłacz wskazuje autora dokumentu, który aktualnie przeglądasz.
  • Appendix
    Wskazuje dodatkowy (uzupełniający) dokument do aktualnie przeglądanego.
  • Bookmark
    Wskazuje, że adres odsyłacza nie powinien się zmienić w najbliższym czasie (jest to tzw. permanent link).
  • Charter
    Odsyła do dokumentu, który stanowi inny rozdział dla aktualnie przeglądanego dokumentu.
  • Contact
    Kieruje do formularza kontaktowego lub dokumentu, z którego będzie możliwy kontakt z twórcą bazowego dokumentu.
  • Contents / Toc
    Prowadzi do dokumentu, który zawiera pełen spis treści (a obecna strona jest jednym z rozdziałów dla tego zbioru).
  • Copyright
    Dokument, który zawiera pełen opis praw autorskich dla bieżącego dokumentu.
  • External
    Zewnętrzny odsyłacz, który może stanowić uzupełnienie dla bieżącego dokumentu.
  • Feed
    Wskazuje kanał RSS (lub inny protokół, np. Atom), który bezpośrednio dotyczy bieżącego dokumentu.
  • First / Start
    Odsyłacz ten przenosi do strony, która będzie pierwszą stroną dla wybranego zbioru dokumentów (ebook, kurs internetowy, itp).
  • Glossary
    W dokumencie tym znajdziemy słowniczek pojęć wykorzystanych w bieżącym dokumencie.
  • Help
    Klikając w ten link odnajdziemy pomoc dla aktualnie wyświetlanej strony (np. FAQ, pomoc kontekstowa).
  • Home
    Wskazuje dokument, który jest stroną główną lub pierwszym dokumentem dla zbioru plików, którego częścią jest także bieżąca strona.
  • Index
    Dokument, który stanowi indeks dla bieżącej strony. Alternatywnie strona ta może zawierać spis treści z wypisanymi wszystkimi dokumentami bieżącego zbioru.
  • Last
    Odnosi do ostatniego dokumentu aktualnie przeglądanego zbioru dokumentów.
  • License
    Wskazuje dokument zawierający licencję dla obecnie przeglądanej treści. W licencji tej powinny być jasno określone prawa wykorzystania bieżącego dokumentu.
  • Next
    Odsyła do kolejnej strony zbioru.
  • Nofollow
    Wartość namiętnie wykorzystywana przez wyszukiwarki. Wskazuje dokument, który nie powinien być śledzony przez wyszukiwarki. Powodem tego może być nieodpowiednia treść, strona bez wartości, czy też strona, której nie jesteśmy pewni.
  • Prev / Previous
    Odsyła do poprzedniej strony zbioru.
  • Search
    Wskazuje stronę, na której jest wyszukiwarka umożliwiające przeszukiwanie bieżącego dokumentu.
  • Section
    Link kieruje do działu zbioru, którego częścią jest bieżąca strona.
  • Sidebar
    Sprawia, że dokument do którego się odwołujemy otworzy się w sidebarze przeglądarki (o ile przeglądarka obsługuje taką funkcjonalność).
  • Subsection
    Wskazuje dokument, który jest podrozdziałem dla danego zbioru. Bieżąca strona jest częścią tego podrozdziału.
  • Up
    Wskazuje nadrzędny dokument w stosunku do aktualnie przeglądanej strony.

Warto również dodać, iż relacje mogą być łączone między sobą za pośrednictwem spacji. Nie rozróżniana jest także wielkość liter w opisywaniu relacji.

Przykład prawidłowego opisu relacji dla zewnętrznego, niepewnego źródła:

1
2
<a href="http://WrongSite.com" rel="external nofollow">Potencjalnie
niebezpieczna strona</a>
Wykorzystanie relacji dla odnośników

Wymienione wyżej wartości atrybutów są oczywiście opcjonalne i nie zawsze obsługiwane przez wszystkie przeglądarki czy roboty wyszukiwarek.

Pozostaje więc mieć nadzieję, że wyszukiwarki oraz inne aplikacje sieciowe (w tym roboty wyszukiwarek) z czasem będą coraz lepiej potrafiły wykorzystać mikroformaty, dzięki czemu sieć będzie rozwijać w sposób uporządkowany, logiczny i spójny.

Komentarze (3)

  1. Michal Wachowski 3 lipca 2010

    A jest rel dla obrazków?
    Dość popularne jest używanie rel=”lightbox”, ja sam używam głównie rel=”modalwindow” do podglądu obrazków w pełnym rozmiarze.

  2. Kamil Brenk 4 lipca 2010

    Wg specyfikacji HTML nie ma takiego atrybutu dla elementu IMG. Jednak nawet nie wszystkie wyżej wymienione wartości atrybutu rel (LinkTypes) są w specyfikacji. Niektórych nie ma, a mimo to ludzie je używają (tutaj jeszcze więcej różnych relacji: http://microformats.org/wiki/existing-rel-values, http://wiki.whatwg.org/wiki/RelExtensions, nie wszystkie wypisałem).

    No i można też definiować własne wartości atrybutów – nie zawsze najważniejsza jest zgodność z walidatorem :-)

  3. Michal Wachowski 4 lipca 2010

    Chyba będę musiał zdefiniować swoje, bo za cholerę nie potrafię dopasować 75% podanych typów do mojego sajta….



Dodaj komentarz

XHTML: Możesz użyć następujących tagów
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang="" escaped=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

  • Informacje o blogu

    Kamil Brenk

    Blog o tworzeniu aplikacji na potrzeby sieci Web.

    Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.

    Kanał RSS

    • Najnowsze
    • Komentarze
    • Popularne
    • Recenzja: JavaScript – mocne strony
    • Konwersja JS i CSS do PNG
    • Optymalizacja wyrażeń regularnych
    • Cross-Domain JavaScript
    • Kompendium programisty #1
    • Jak pobierać zewnętrzne zasoby?
    • Kamil Brenk: @eN: Nie sposób się nie zgodzić z tym co piszesz, masz...
    • Michal Wachowski: To jest na prawdę szalone :D
    • The one: Zarąbista gierka :D
    • eN.: Problem w tym że nie zwracają tego samego, a dokładniej1...
    • Michal Wachowski: DAS - deterministyczne automaty skończone, AS - to samo ale bez...
    • Kamil Brenk: DAS / AS? Pierwsze słyszę :-) Raczej nie będę już miał...
    • Michal Wachowski: Jak na studiach będziesz mieć AS i DAS to wiele się wyjaśni...
    • Gramatyka w PHP, część 1
    • Projekt aplikacji po stronie klienta
    • Optymalizacja wyrażeń regularnych
    • Yii PHP Framework vs Symphony
    • Minimalizacja zapytań HTTP
    • Jak pobierać zewnętrzne zasoby?
    • Usługi sieciowe w PHP: REST
  • Szukajka
    Wpisz co chcesz wyszukać na stronie…
  • Kategorie
    • Apache
    • Front-end Development
    • HTML5 & CSS3
    • Inne
    • JavaScript
    • Książki
    • PHP
    • Po godzinach
    • Protokół HTTP
    • SQL
    • Wyrażenia regularne
  • Moje serwisy
    • Testy zawodowe
    • Miłość, uczucia i seks
  • Czytane blogi
    • Wojciech Sznapka
    • Wojciech Soczyński
    • Dzienniki zyxowe
    • Przemysław "eRIZ" Pawliczuk
  • Archiwum
    • sierpień 2010
    • lipiec 2010
    • czerwiec 2010
    • maj 2010
    • kwiecień 2010
    • marzec 2010
    • luty 2010
    • styczeń 2010
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

Designed by FTL Wordpress Themes brought to you by Smashing Magazine.

Do góry ∧