Autor publikacji
Virtual Patriot - Administrator

link

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu link

Element link reprezentuje zasób internetowy, który chcemy, aby został powiązany z danym dokumentem HTML.

Docelowym zasobem internetowym może być:

  • plik HTML
  • plik CSS
  • plik graficzny w postaci ikony
  • różne inne typy plików

Dodatkowe artykuły związane z elementem link

brak

Informacje techniczne o elemencie link

kategoria ogólna
kontekst zewnętrzny

  • element HTML, który tworzy wewnętrzny kontekst metadata

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="plik-01.css" rel="stylesheet">
  </head>

  <body>
    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->
  </body>
</html>

    Kontekstem zewnętrznym przykładowego elementu "link" jest element "head". Wspomniany element "head" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst metadata, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "head", jest prawidłowym kontekstem zewnętrznym dla elementu "link".

  • jako element dziecko elementu noscript, który jest elementem dzieckiem elementu head

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="plik-01.css" rel="stylesheet">

    <noscript>
      <link href="plik-02.css" rel="stylesheet">
    </noscript>
  </head>

  <body>
    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->
  </body>
</html>

    Kontekstem zewnętrznym drugiego przykładowego elementu "link" jest element "noscript", dla którego wspomniany element "link" jest elementem dzieckiem. Ponadto wspomniany element "noscript" jest elementem dzieckiem elementu "head", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "noscript", jest prawidłowym kontekstem zewnętrznym dla drugiego przykładowego elementu "link".

  • element HTML, który tworzy wewnętrzny kontekst frazowany, lecz tylko wtedy gdy dany element link posiada atrybut rel wraz z wyłącznie wartością stylesheet oraz gdy dany element link znajduje się w kontekście wewnętrznym elementu body

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="plik-01.css" rel="stylesheet">
  </head>

  <body>
    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <link href="plik-02.css" rel="stylesheet">
    </article>
  </body>
</html>

    Kontekstem zewnętrznym drugiego przykładowego elementu "link" jest element "article". Wspomniany element "article" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany. Ponadto wspomniany element "link" znajduje się w kontekście wewnętrznym elementu "body", dodatkowo wspomniany element "link" posiada atrybut "rel" wraz z wyłącznie wartością "stylesheet", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "article", jest prawidłowym kontekstem zewnętrznym dla drugiego przykładowego elementu "link".

kontekst wewnętrzny

brak

wymagane elementy dzieci

brak

wymagane atrybuty
zdolność fallback

nie dotyczy

składnia HTML

<link>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

none

Przypuszczalnie domyślne reguły CSS elementu link

link {
  display:none;
}

Interpretacja elementu link

Firefox

tak

Nie interpretuje atrybutu sizes.

Google Chrome

tak

Nie interpretuje atrybutu sizes.

Safari

tak

Nie interpretuje atrybutu sizes.

Opera

tak

Nie interpretuje atrybutu sizes.

Internet Explorer

tak

Interpretuje atrybut crossorigin, lecz od wersji "11".

Nie interpretuje atrybutu nonce, referrerpolicy oraz sizes.

Edge

tak

Nie interpretuje atrybutu sizes.

Opis atrybutów elementu link

Atrybut Lokalny

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem link pozwala nam określić, w jaki sposób dany element link reprezentujący zasób internetowy ma reagować na mechanizm umożliwiający wymienianie się zasobami internetowymi pomiędzy serwerami znajdującymi się w różnych domenach (tzw. CORS, czyli Cross-Origin Resource Sharing).

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

anonymous (gdy nie podaliśmy wartości)

anonymous (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu crossorigin

anonymous

Wartość anonymous oznacza, że nie jest wymagane potwierdzenie tożsamości użytkownika.

use-credentials

Wartość use-credentials oznacza, że jest wymagane potwierdzenie tożsamości użytkownika, np. za pomocą COOKIES (tzw. ciasteczka), za pomocą certyfikatu SSL po stronie klienta lub za pomocą uwierzytelnienia HTTP.

Atrybut Lokalny

href

Przeznaczenie atrybutu href

Atrybut href wykorzystany wraz z elementem link pozwala nam określić adres zasobu internetowego, który chcemy, aby był reprezentowany przez dany element link.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu href

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://webkod.pl/files/html/styl-domyslny-01.css" rel="stylesheet">
    <!-- KOD ŹRÓDŁOWY PLIKU: styl-domyslny-01.css >>>>

    body { background-color:orange; }

    -->
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Zasobem internetowym reprezentowanym przez przykładowy element "link" jest zasób internetowy "styl-domyslny-01.css" znajdujący się pod adresem "https://webkod.pl/files/html/styl-domyslny-01.css", ponieważ do wspomnianego elementu "link" został dodany atrybut "href" wraz z wartością "https://webkod.pl/files/html/styl-domyslny-01.css".

Atrybut Lokalny

hreflang

Przeznaczenie atrybutu hreflang

Atrybut hreflang wykorzystany wraz z elementem link pozwala nam określić informację o języku, jaki posiada zasób internetowy reprezentowany przez dany element link.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu hreflang

symbol języka

Należy podać ciąg znaków w formie symbolu języka (Norma ISO 639-1).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://en.wikipedia.org/wiki/MIT_License" rel="license" hreflang="en">
  </head>
  <body>

    <h1>Owoce</h1>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest czereśnia.</p>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "hreflang" wraz z wartością "en", przykładowy element "link" reprezentujący zasób internetowy znajdujący się pod adresem "https://en.wikipedia.org/wiki/MIT_License" zawiera dodatkową informację dla przeglądarki internetowej o tym, że językiem, jaki posiada wspomniany zasób internetowy, jest język angielski.

Atrybut Lokalny

media

Przeznaczenie atrybutu media

Atrybut media wykorzystany wraz z elementem link pozwala nam określić informację o tym, dla jakiego typu medium (urządzenia) powinien być przeznaczony zasób internetowy reprezentowany przez dany element link.

Wartość domyślna

all (gdy pominęliśmy atrybut)

BRAK (gdy podaliśmy wartość nieprawidłową)

Wartości atrybutu media

@media query

Należy podać ciąg znaków w formie @media queries.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://webkod.pl/files/html/styl-domyslny-01.css" media="all and (min-width:800px)" rel="stylesheet">
    <!-- KOD ŹRÓDŁOWY PLIKU: styl-domyslny-01.css >>>>

    body { background-color:orange; }

    -->
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Zasób internetowy "styl-domyslny-01.css" reprezentowany przez przykładowy element "link" przeznaczony jest dla wszystkich typów mediów (wszystkich urządzeń), w których wartość szerokości okna przeglądarki internetowej w danej chwili wynosi co najmniej "800" pikseli, ponieważ do wspomnianego elementu "link" został dodany atrybut "media" wraz z wartością "all and (min-width:800px)".

Atrybut Lokalny

nonce

Przeznaczenie atrybutu nonce

Atrybut nonce wykorzystany wraz z elementem link pozwala nam określić informację o tym, jaki wygenerowany losowo (np. za pomocą języka programowania PHP) oraz istniejący na potrzeby polityki prywatności treści (Content Security Policy) ciąg znaków powinien zostać przypisany do danego elementu link, dzięki czemu jeden z mechanizmów przeglądarki internetowej będzie mógł zdecydować, czy zasób internetowy reprezentowany przez dany element link powinien zostać uaktywniony.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu nonce

ciąg znaków

Należy podać niepusty ciąg znaków, który został wygenerowany losowo dla dokumentu HTML, w którego zawartości znajduje się dany element link.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-security-policy" content="style-src 'nonce-87234583'">
    <title>Darmowy Kurs HTML</title>
    <link href="https://webkod.pl/files/html/styl-domyslny-01.css" nonce="87234583" rel="stylesheet">
    <!-- KOD ŹRÓDŁOWY PLIKU: styl-domyslny-01.css >>>>

    body { background-color:orange; }

    -->
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "link" został dodany atrybut "nonce" wraz z wartością "87234583", ciągiem znaków, jaki został przypisany do przykładowego elementu "link", jest ciąg znaków "87234583", dlatego zasób internetowy "styl-domyslny-01.css" reprezentowany przez wspomniany element "link" został uaktywniony przez jeden z mechanizmów przeglądarki internetowej.

Atrybut Lokalny

referrerpolicy

Przeznaczenie atrybutu referrerpolicy

Atrybut referrerpolicy wykorzystany wraz z elementem link pozwala nam określić, jakie składniki adresu danego dokumentu HTML może posiadać informacja, która zostanie przekazana przez przeglądarkę internetową do serwera, na którym znajduje się zasób internetowy reprezentowany przez dany element link.

Mowa tu o takich składnikach adresu danego dokumentu HTML jak:

  • typ protokołu (np. https)
  • nazwa serwera (np. www.webkod.pl)
  • numer portu (np. 8080)
  • ścieżka do pliku (np. pliki/obrazki/lew.png)
  • zapytanie (np. ?imie=jan&nazwisko=kowalski)

Docelowe przekazanie informacji o adresie danego dokumentu HTML odbywa się za pomocą nagłówka referer w momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego reprezentowanego przez dany element link.

Wartość domyślna

no-referrer-when-downgrade (w każdej sytuacji) lub wartość atrybutu content elementu meta posiadającego atrybut name o wartości referrer, jeżeli taki element meta znajduje się w zawartości danego dokumentu HTML

Wartości atrybutu referrerpolicy

no-referrer

Wartość no-referrer oznacza, że informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl -
http://abc.pl/plik-strony http://abc.pl/inny-plik -
http://abc.pl/plik-strony?x=8 http://xyz.pl -
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl -
https://abc.pl/plik-strony https://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 https://xyz.pl -
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik -
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl -
http://abc.pl/plik-strony https://abc.pl/inny-plik -
http://abc.pl/plik-strony?x=8 https://xyz.pl -
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik -
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="http://inna-strona.pl/inny-plik" referrerpolicy="no-referrer" rel="author">
  </head>
  <body>

    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik" reprezentowanego przez przykładowy element "link", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", nie zostanie przekazana żadna informacja o adresie "http://moja-strona.pl/plik-strony" dokumentu HTML, ponieważ do wspomnianego elementu "link" został dodany atrybut "referrerpolicy" wraz z wartością "no-referrer".

no-referrer-when-downgrade

Wartość no-referrer-when-downgrade oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

W sytuacji gdy adres danego dokumentu HTML posiada bardziej bezpieczny typ protokołu (np. https), a adres zasobu internetowego reprezentowanego przez dany element link posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/plik-strony
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="http://inna-strona.pl/inny-plik" referrerpolicy="no-referrer-when-downgrade" rel="author">
  </head>
  <body>

    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik" reprezentowanego przez przykładowy element "link", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", nie zostanie przekazana żadna informacja o adresie "https://moja-strona.pl/plik-strony?x=8" dokumentu HTML, ponieważ do wspomnianego elementu "link" został dodany atrybut "referrerpolicy" wraz z wartością "no-referrer-when-downgrade".

origin

Wartość origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony http://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik https://abc.pl/

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="http://inna-strona.pl/inny-plik" referrerpolicy="origin" rel="author">
  </head>
  <body>

    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik" reprezentowanego przez przykładowy element "link", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "link" został dodany atrybut "referrerpolicy" wraz z wartością "origin".

origin-when-cross-origin

Wartość origin-when-cross-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie, lecz tylko wtedy gdy adres danego dokumentu HTML oraz adres zasobu internetowego reprezentowanego przez dany element link będą posiadały ten sam typ protokołu, nazwę serwera oraz numer portu, w przeciwnym przypadku informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony http://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 http://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik https://abc.pl/

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://moja-strona.pl/moj-plik" referrerpolicy="origin-when-cross-origin" rel="author">
  </head>
  <body>

    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "moj-plik" reprezentowanego przez przykładowy element "link", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "https://moja-strona.pl", na którym znajduje się zasób internetowy "moj-plik", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "link" został dodany atrybut "referrerpolicy" wraz z wartością "origin-when-cross-origin".

same-origin

Wartość same-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

W sytuacji gdy adres danego dokumentu HTML oraz adres zasobu internetowego reprezentowanego przez dany element link nie będą posiadały tego samego typu protokołu, nazwy serwera oraz numeru portu, wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl -
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl -
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl -
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl -
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl -
http://abc.pl/plik-strony https://abc.pl/inny-plik -
http://abc.pl/plik-strony?x=8 https://xyz.pl -
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik -
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://moja-strona.pl/moj-plik" referrerpolicy="same-origin" rel="author">
  </head>
  <body>

    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "moj-plik" reprezentowanego przez przykładowy element "link", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "https://moja-strona.pl", na którym znajduje się zasób internetowy "moj-plik", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "link" został dodany atrybut "referrerpolicy" wraz z wartością "same-origin".

strict-origin

Wartość strict-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

W sytuacji gdy adres danego dokumentu HTML posiada bezpieczny typ protokołu (np. https), a adres zasobu internetowego reprezentowanego przez dany element link posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="http://inna-strona.pl/inny-plik" referrerpolicy="strict-origin" rel="author">
  </head>
  <body>

    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik" reprezentowanego przez przykładowy element "link", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "link" został dodany atrybut "referrerpolicy" wraz z wartością "strict-origin".

strict-origin-when-cross-origin

Wartość strict-origin-when-cross-origin oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie, lecz tylko wtedy gdy adres danego dokumentu HTML oraz adres zasobu internetowego reprezentowanego przez dany element link będą posiadały ten sam typ protokołu, nazwę serwera oraz numer portu, w przeciwnym przypadku informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać jedynie: typ protokołu, nazwę serwera oraz numer portu.

W sytuacji gdy adres danego dokumentu HTML posiada bezpieczny typ protokołu (np. https), a adres zasobu internetowego reprezentowanego przez dany element link posiada mniej bezpieczny typ protokołu (np. http), wtedy informacja o adresie danego dokumentu HTML nie będzie przekazywana do docelowego serwera.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl -
https://abc.pl/plik-strony http://abc.pl/inny-plik -
https://abc.pl/plik-strony?x=8 http://xyz.pl -
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik -

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="http://moja-strona.pl/moj-plik" referrerpolicy="strict-origin-when-cross-origin" rel="author">
  </head>
  <body>

    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "moj-plik" reprezentowanego przez przykładowy element "link", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "http://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://moja-strona.pl", na którym znajduje się zasób internetowy "moj-plik", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "link" został dodany atrybut "referrerpolicy" wraz z wartością "strict-origin-when-cross-origin".

unsafe-url

Wartość unsafe-url oznacza, że informacja o adresie danego dokumentu HTML, jaka zostanie przekazana do docelowego serwera, będzie mogła posiadać: typ protokołu, nazwę serwera, numer portu, ścieżkę do pliku oraz zapytanie.

Adres Bieżący (Dokument HTML) Adres Docelowy (Serwer) Rezultat (Referrer)
http http http ⟶ http
http://abc.pl/plik-strony http://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony http://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 http://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https https https ⟶ https
https://abc.pl/plik-strony https://xyz.pl https://abc.pl/plik-strony
https://abc.pl/plik-strony https://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 https://xyz.pl https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik https://abc.pl/plik-strony?x=8
http https http ⟶ https
http://abc.pl/plik-strony https://xyz.pl http://abc.pl/plik-strony
http://abc.pl/plik-strony https://abc.pl/inny-plik http://abc.pl/plik-strony
http://abc.pl/plik-strony?x=8 https://xyz.pl http://abc.pl/plik-strony?x=8
http://abc.pl/plik-strony?x=8 https://abc.pl/inny-plik http://abc.pl/plik-strony?x=8
https http https ⟶ http
https://abc.pl/plik-strony http://xyz.pl https://abc.pl/plik-strony
https://abc.pl/plik-strony http://abc.pl/inny-plik https://abc.pl/plik-strony
https://abc.pl/plik-strony?x=8 http://xyz.pl https://abc.pl/plik-strony?x=8
https://abc.pl/plik-strony?x=8 http://abc.pl/inny-plik https://abc.pl/plik-strony?x=8

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="http://inna-strona.pl/inny-plik" referrerpolicy="unsafe-url" rel="author">
  </head>
  <body>

    <!-- miejsce na pozostały kod części BODY dokumentu HTML -->

  </body>
</html>

W momencie próby rozpoczęcia pobierania przez przeglądarkę internetową zasobu internetowego "inny-plik" reprezentowanego przez przykładowy element "link", który znajduje się w zawartości dokumentu HTML, którego adresem jest adres "https://moja-strona.pl/plik-strony?x=8", do serwera o nazwie "http://inna-strona.pl", na którym znajduje się zasób internetowy "inny-plik", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "link" został dodany atrybut "referrerpolicy" wraz z wartością "unsafe-url".

Wartość "unsafe-url" obniża bezpieczeństwo naszej strony internetowej w sytuacji gdy nasza strona internetowa korzysta z zabezpieczenia TLS.

Atrybut Lokalny

rel

Przeznaczenie atrybutu rel

Atrybut rel wykorzystany wraz z elementem link pozwala nam określić relację pomiędzy dokumentem HTML, w którego zawartości znajduje się dany element link, a zasobem internetowym reprezentowanym przez dany element link.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu rel

alternate

Wartość alternate oznacza, że dany dokument HTML posiada swój alternatywny odpowiednik w postaci zasobu internetowego reprezentowanego przez dany element link.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="owoce.pdf" rel="alternate">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "alternate", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "owoce.pdf", który jest reprezentowany przez wspomniany element "link", jest alternatywnym zasobem internetowym danego dokumentu HTML.

author

Wartość author oznacza, że dany dokument HTML posiada swojego autora, o którym można dowiedzieć się więcej z zasobu internetowego reprezentowanego przez dany element link.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="webmaster-jan-nowak.html" rel="author">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "author", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML posiada swojego autora, o którym można dowiedzieć się więcej z zasobu internetowego "webmaster-jan-nowak.html" reprezentowanego przez wspomniany element "link".

help

Wartość help oznacza, że dla treści reprezentowanej przez zawartość danego dokumentu HTML istnieją dodatkowe informacje pomocnicze, o których można dowiedzieć się więcej z zasobu internetowego reprezentowanego przez dany element link.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://wikipedia.org/czeresnia.html" rel="help">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "help", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dla treści reprezentowanej przez zawartość danego dokumentu HTML istnieją dodatkowe informacje pomocnicze, o których można dowiedzieć się więcej z zasobu internetowego "czeresnia.html" reprezentowanego przez wspomniany element "link".

icon

Wartość icon oznacza, że dany element link reprezentuje zasób internetowy w postaci ikony reprezentującej dany dokument HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="favicon-01.ico" rel="icon">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "icon", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "favicon-01.ico", który jest reprezentowany przez wspomniany element "link", jest plikiem reprezentującym ikonę danego dokumentu HTML.

license

Wartość license oznacza, że treść główna danego dokumentu HTML reprezentowana przez zawartość elementu main opiera się na licencji, o której można dowiedzieć się więcej z zasobu internetowego reprezentowanego przez dany element link.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="licencja-mit.html" rel="license">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "license", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść główna danego dokumentu HTML reprezentowana przez zawartość elementu "main" opiera się na licencji, o której można dowiedzieć się więcej z zasobu internetowego "licencja-mit.html" reprezentowanego przez wspomniany element "link".

next

Wartość next oznacza, że dany dokument HTML jest częścią serii, natomiast zasób internetowy reprezentowany przez dany element link, jest następnym w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="kwiaty.html" rel="next">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "next", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML jest częścią serii, natomiast zasób internetowy "kwiaty.html", który jest reprezentowany przez wspomniany element "link", jest następnym w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML.

prev

Wartość prev oznacza, że dany dokument HTML jest częścią serii, natomiast zasób internetowy reprezentowany przez dany element link, jest poprzednim w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="warzywa.html" rel="prev">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "prev", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML jest częścią serii, natomiast zasób internetowy "warzywa.html", który jest reprezentowany przez wspomniany element "link", jest poprzednim w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML.

stylesheet

Wartość stylesheet oznacza, że dany element link reprezentuje preferowany (domyślny) zasób internetowy posiadający reguły określające styl wyglądu poszczególnych elementów HTML znajdujących się w zawartości danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="styl-domyslny.css" rel="stylesheet">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "stylesheet", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "styl-domyslny.css", który jest reprezentowany przez wspomniany element "link", jest preferowanym (domyślnym) plikiem zawierającym reguły określające styl wyglądu poszczególnych elementów HTML znajdujących się w zawartości danego dokumentu HTML.

Gdy dany element "link" posiada atrybut "rel" wraz z następującą kombinacją wartości: stylesheet alternate, wtedy dany element "link" reprezentuje alternatywny (zamienny) zasób internetowy posiadający reguły określające styl wyglądu poszczególnych elementów HTML znajdujących się w zawartości danego dokumentu HTML.

wartość niestandardowa

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas niestandardowej wartości atrybutu rel elementu link.

kombinacja wartości

Możemy podać kilka wartości, oddzielonych od siebie przynajmniej jednym znakiem spacji, dzięki czemu dany atrybut rel będzie mógł określać kilka docelowych relacji jednocześnie.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="styl-domyslny.css" rel="stylesheet" title="wygląd domyślny">
    <link href="styl-alternatywny.css" rel="stylesheet alternate" title="wygląd alternatywny">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z następującą kombinacją wartości: "stylesheet alternate", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy "styl-alternatywny.css", który jest reprezentowany przez wspomniany element "link", jest alternatywnym (zamiennym) plikiem zawierającym reguły określające styl wyglądu poszczególnych elementów HTML znajdujących się w zawartości danego dokumentu HTML.

Atrybut Lokalny

rev

Przeznaczenie atrybutu rev

Atrybut rev wykorzystany wraz z elementem link pozwala nam określić relację odwrotną pomiędzy dokumentem HTML, w którego zawartości znajduje się dany element link, a zasobem internetowym reprezentowanym przez dany element link.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu rev

wartość atrybutu rel

Należy podać interesującą nas wartość atrybutu rel.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="kwiaty.html" rev="prev" rel="next">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rev" wraz z wartością "prev", przykładowy element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML jest poprzednim w kolejności zasobem internetowym w danej serii, w stosunku do zasobu internetowego "kwiaty.html" reprezentowanego przez wspomniany element "link".

Atrybut Lokalny

sizes

Przeznaczenie atrybutu sizes

Atrybut sizes wykorzystany wraz z elementem link pozwala nam określić sugerowany dla przeglądarki internetowej rozmiar, jaki powinna posiadać ikona reprezentowana przez dany element link.

Atrybut "sizes" ma sens tylko wtedy gdy dany element "link" posiada atrybut rel o wartości icon.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu sizes

any

Wartość any oznacza, że ikona reprezentowana przez dany element link może zostać przeskalowana przez przeglądarkę internetową do dowolnego satysfakcjonującego rozmiaru, jeżeli jest to możliwe.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://webkod.pl/files/html/favicon-01.ico" rel="icon" sizes="any">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Ikona reprezentowana przez przykładowy element "link" może zostać przeskalowana przez przeglądarkę internetową do dowolnego satysfakcjonującego rozmiaru, jeżeli jest to możliwe, ponieważ do wspomnianego elementu "link" został dodany atrybut "sizes" wraz z wartością "any".

wzór: WIDTHxHEIGHT

Według zdefiniowanego wzorca wartości możemy określić sugerowany dla przeglądarki internetowej rozmiar, jaki powinna posiadać ikona reprezentowana przez dany element link.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://webkod.pl/files/html/favicon-01.ico" rel="icon" sizes="16x16">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Sugerowanym dla przeglądarki internetowej rozmiarem, jaki powinna posiadać ikona reprezentowana przez przykładowy element "link", jest rozmiar "16" na "16", ponieważ do wspomnianego elementu "link" został dodany atrybut "sizes" wraz z wartością "16x16".

Wyjaśnienie wzorca wartości

Informacje dodatkowe

możemy podać kilka wartości, oddzielonych od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji), dzięki czemu przeglądarka internetowa sama zdecyduje, jaki rozmiar będzie odpowiedni dla ikony reprezentowanej przez dany element link

wartości tworzone przez wszystkie pary składników WIDTH oraz HEIGHT nie mogą powtarzać się, innymi słowy zapis 15x20 15x20 jest błędnym zapisem, natomiast zapis 15x20 20x15 jest prawidłowym zapisem, tak samo jak zapis 15x15 20x20 15x20 20x15

Przykładowe zapisy
  • 16x16
  • 16x16 32x32
  • 16x16 32x32 64x64
WIDTH

Składnik WIDTH danego wzorca wartości określa sugerowaną dla przeglądarki internetowej wartość szerokości, jaką ma posiadać ikona reprezentowana przez dany element link.

Dostępne wartości

dowolna dodatnia liczba całkowita

Wartość domyślna

brak

x

Składnik x danego wzorca wartości oddziela składnik WIDTH od składnika HEIGHT, dzięki czemu przeglądarka internetowa może rozróżnić docelowe składniki WIDTH oraz HEIGHT.

Dostępne wartości

mała litera x lub duża litera X

Wartość domyślna

brak

HEIGHT

Składnik HEIGHT danego wzorca wartości określa sugerowaną dla przeglądarki internetowej wartość wysokości, jaką ma posiadać ikona reprezentowana przez dany element link.

Dostępne wartości

dowolna dodatnia liczba całkowita

Wartość domyślna

brak

Atrybut Globalny

title

Przeznaczenie atrybutu title

Atrybut title wykorzystany wraz z elementem link pozwala nam określić tytuł, jaki powinien posiadać zasób internetowy reprezentowany przez dany element link.

Gdy dany element "link" posiada atrybut rel o wartości stylesheet, wtedy wartość atrybutu "title" danego elementu "link" określa tytuł dla preferowanego (domyślnego) zasobu internetowego posiadającego reguły określające styl wyglądu poszczególnych elementów HTML znajdujących się w zawartości danego dokumentu HTML.

Gdy dany element "link" posiada atrybut rel wraz z następującą kombinacją wartości: stylesheet alternate, wtedy wartość atrybutu "title" danego elementu "link" określa tytuł dla alternatywnego (zamiennego) zasobu internetowego posiadającego reguły określające styl wyglądu poszczególnych elementów HTML znajdujących się w zawartości danego dokumentu HTML.

Atrybut "title" jest atrybutem wymaganym elementu "link", lecz tylko wtedy gdy dany element "link" posiada atrybut rel wraz z następującą kombinacją wartości: stylesheet alternate.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu title

tytuł

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas tytułu.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://webkod.pl/files/html/styl-domyslny-01.css" rel="stylesheet" title="wygląd domyślny">
    <!-- KOD ŹRÓDŁOWY PLIKU: styl-domyslny-01.css >>>>

    body { background-color:orange; }

    -->

    <link href="https://webkod.pl/files/html/styl-alternatywny-01.css" rel="stylesheet alternate" title="wygląd alternatywny - 1">
    <!-- KOD ŹRÓDŁOWY PLIKU: styl-alternatywny-01.css >>>>

    body { background-color:yellow; }

    -->

    <link href="https://webkod.pl/files/html/styl-alternatywny-02.css" rel="stylesheet alternate" title="wygląd alternatywny - 2">
    <!-- KOD ŹRÓDŁOWY PLIKU: styl-alternatywny-02.css >>>>

    body { background-color:pink; }

    -->
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "link" posiadającego atrybut "rel" o wartości "stylesheet" został dodany atrybut "title" wraz z wartością "wygląd domyślny", przykładowy element "link" reprezentujący zasób internetowy "styl-domyslny-01.css" zawiera dodatkową informację dla przeglądarki internetowej o tym, że tytułem zasobu internetowego "styl-domyslny-01.css" jest tytuł "wygląd domyślny".

Gdy dany element "link" posiada atrybut rel wraz z następującą kombinacją wartości: stylesheet alternate, wtedy docelowy ciąg znaków nie może być pustym ciągiem znaków.

Atrybut Lokalny

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem link pozwala nam określić informację o typie MIME, jaki posiada zasób internetowy reprezentowany przez dany element link.

Jeżeli typ MIME określony przez nas za pomocą wartości danego atrybutu "type" nie będzie zgadzał się z typem MIME w rzeczywistości posiadanym przez zasób internetowy reprezentowany przez dany element "link", wtedy docelowy zasób internetowy będzie traktowany przez przeglądarkę internetową jako zasób nieistniejący.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu type

typ MIME

Należy podać ciąg znaków w formie typu MIME.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://webkod.pl/files/html/styl-domyslny-01.css" type="text/css" rel="stylesheet">
    <!-- KOD ŹRÓDŁOWY PLIKU: styl-domyslny-01.css >>>>

    body { background-color:orange; }

    -->
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "link" został dodany atrybut "type" wraz z wartością "text/css", przykładowy element "link" reprezentujący zasób internetowy "styl-domyslny-01.css" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada zasób internetowy "styl-domyslny-01.css", jest typ wskazujący na plik typu CSS.