Autor publikacji
Virtual Patriot - Administrator

a

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu a

Gdy element a posiada atrybut href, wtedy element a reprezentuje klikalny odnośnik prowadzący do zasobu internetowego, którego adres określa wartość atrybutu href.

Gdy element a nie posiada atrybutu href, wtedy element a reprezentuje miejsce, w którym mógłby pojawić się klikalny odnośnik prowadzący do określonego zasobu internetowego.

Treść reprezentowana przez zawartość elementu a powinna zawierać klarowną wskazówkę o tym, jakie informacje są reprezentowane przez zasób internetowy, do którego prowadzi lub do którego mógłby prowadzić klikalny odnośnik reprezentowany przez dany element a.

Dodatkowe artykuły związane z elementem a

Informacje techniczne o elemencie a

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst frazowany

Przykładowy Kod HTML

<p>
  <a href="https://webkod.pl">Darmowy kurs języka HTML i języka CSS</a>
</p>

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

kontekst wewnętrzny

kontekst wewnętrzny elementu rodzica, lecz nie następujące elementy HTML jako elementy potomkowie: a, elementy HTML należące do kategorii zawartość interaktywna

Przykładowy Kod HTML

<ol>
  <li>
    <a href="#rozdział-1">
      <p>Rozdział - 1</p>
      <img src="obrazek-01.png" alt="Elementy HTML">
    </a>
  </li>

  <li>
    <a href="#rozdział-2">
      <p>Rozdział - 2</p>
      <img src="obrazek-02.png" alt="Atrybuty HTML">
    </a>
  </li>

  <li>
    <a href="#rozdział-3">
      <p>Rozdział - 3</p>
      <img src="obrazek-03.png" alt="Kategorie HTML">
    </a>
  </li>
</ol>

Kontekstem wewnętrznym przykładowych elementów "a" są wyłącznie elementy HTML, które są prawidłowym kontekstem wewnętrznym dla elementu rodzica każdego z poszczególnych elementów "a", którym to elementem rodzicem w tym wypadku jest element "li". Ponadto elementami potomkami wspomnianych elementów "a" nie są elementy HTML, które są zakazanymi elementami potomkami elementu "a", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "p" oraz element "img", jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "a".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<a> ... </a>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline

Przypuszczalnie domyślne reguły CSS elementu a

a[href] {
  text-decoration:underline;
  cursor:pointer;
}

a[href]:link {
  color:#00E;
}

a[href]:visited {
  color:#551A8B;
}

a[href]:focus {
  outline-width:1px;
  outline-style:dotted;
}

a[href]:active {
  color:#F00;
}

Interpretacja elementu a

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Nie interpretuje atrybutu download oraz referrerpolicy.

Nie interpretuje wartości noopener atrybutu rel.

Edge

tak

Opis atrybutów elementu a

Atrybut Lokalny

download

Przeznaczenie atrybutu download

Atrybut download wykorzystany wraz z elementem a pozwala nam określić nazwę, jaką powinien posiadać zasób internetowy, który od tej pory może zostać pobrany na nasze urządzenie końcowe za pośrednictwem klikalnego odnośnika reprezentowanego przez dany element a.

Atrybut "download" ma sens tylko wtedy gdy dany element "a" posiada atrybut href.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu download

nazwa

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

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p>
      <a href="https://webkod.pl/files/html/plik-01.rar" download="plik rar - zdjęcie lwa.rar">kliknij, aby pobrać zdjęcie lwa na własne urządzenie końcowe</a>
    </p>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "a" został dodany atrybut "download" wraz z wartością "plik rar - zdjęcie lwa.rar", zasób internetowy "plik-01.rar", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", od tej pory może zostać pobrany na nasze urządzenie końcowe za pośrednictwem klikalnego odnośnika reprezentowanego przez wspomniany element "a", dodatkowo po pobraniu na nasze urządzenie końcowe zasób internetowy "plik-01.rar" będzie posiadał nazwę "plik rar - zdjęcie lwa.rar".

Atrybut Lokalny

href

Przeznaczenie atrybutu href

Atrybut href wykorzystany wraz z elementem a pozwala nam określić adres zasobu internetowego, do którego chcemy, aby prowadził klikalny odnośnik reprezentowany przez dany element a.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu href

URL

Należy podać 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>
  </head>
  <body>

    <p>
      <a href="https://webkod.pl/kurs-html/tagi/tabela/element-table">kliknij, aby zobaczyć listę elementów HTML tworzących tabelę HTML</a>
    </p>

  </body>
</html>

Rezultat

Zasobem internetowym, do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", jest zasób internetowy "element-table" znajdujący się pod adresem "https://webkod.pl/kurs-html/tagi/tabela/element-table", ponieważ do wspomnianego elementu "a" został dodany atrybut "href" wraz z wartością "https://webkod.pl/kurs-html/tagi/tabela/element-table".

Atrybut Lokalny

hreflang

Przeznaczenie atrybutu hreflang

Atrybut hreflang wykorzystany wraz z elementem a pozwala nam określić informację o języku, jaki posiada zasób internetowy, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Atrybut "hreflang" ma sens tylko wtedy gdy dany element "a" posiada atrybut href.

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>
  </head>
  <body>

    <p>
      <a href="https://www.w3.org/TR/html52/tabular-data.html" hreflang="en">kliknij, aby zobaczyć listę elementów HTML tworzących tabelę HTML <small>wersja angielska</small></a>
    </p>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "a" został dodany atrybut "hreflang" wraz z wartością "en", przykładowy element "a" reprezentujący klikalny odnośnik prowadzący do zasobu internetowego "tabular-data.html" zawiera dodatkową informację dla przeglądarki internetowej o tym, że językiem, jaki posiada zasób internetowy "tabular-data.html", jest język angielski.

Atrybut Lokalny

referrerpolicy

Przeznaczenie atrybutu referrerpolicy

Atrybut referrerpolicy wykorzystany wraz z elementem a 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, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

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 gdy użytkownik kliknie na klikalny odnośnik reprezentowany przez dany element a.

Atrybut "referrerpolicy" ma sens tylko wtedy gdy dany element "a" posiada atrybut href.

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>
  </head>
  <body>

    <p>
      <a href="http://inna-strona.pl" referrerpolicy="no-referrer">klikalny odnośnik</a>
    </p>

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a" znajdujący 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", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", nie zostanie przekazana żadna informacja o adresie "http://moja-strona.pl/plik-strony" dokumentu HTML, ponieważ do wspomnianego elementu "a" 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, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a, 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>
  </head>
  <body>

    <p>
      <a href="http://inna-strona.pl" referrerpolicy="no-referrer-when-downgrade">klikalny odnośnik</a>
    </p>

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a" znajdujący 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", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", nie zostanie przekazana żadna informacja o adresie "https://moja-strona.pl/plik-strony?x=8" dokumentu HTML, ponieważ do wspomnianego elementu "a" 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>
  </head>
  <body>

    <p>
      <a href="http://inna-strona.pl" referrerpolicy="origin">klikalny odnośnik</a>
    </p>

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a" znajdujący 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", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "a" 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, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a, 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>
  </head>
  <body>

    <p>
      <a href="https://moja-strona.pl" referrerpolicy="origin-when-cross-origin">klikalny odnośnik</a>
    </p>

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a" znajdujący 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", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "a" 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, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a, 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>
  </head>
  <body>

    <p>
      <a href="https://moja-strona.pl" referrerpolicy="same-origin">klikalny odnośnik</a>
    </p>

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a" znajdujący 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", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "a" 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, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a, 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>
  </head>
  <body>

    <p>
      <a href="http://inna-strona.pl" referrerpolicy="strict-origin">klikalny odnośnik</a>
    </p>

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a" znajdujący 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", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/", ponieważ do wspomnianego elementu "a" 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, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a, 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, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a, 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>
  </head>
  <body>

    <p>
      <a href="http://moja-strona.pl" referrerpolicy="strict-origin-when-cross-origin">klikalny odnośnik</a>
    </p>

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a" znajdujący 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", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie przekazana informacja w postaci ciągu znaków "http://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "a" 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>
  </head>
  <body>

    <p>
      <a href="http://inna-strona.pl" referrerpolicy="unsafe-url">klikalny odnośnik</a>
    </p>

  </body>
</html>

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a" znajdujący 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", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie przekazana informacja w postaci ciągu znaków "https://moja-strona.pl/plik-strony?x=8", ponieważ do wspomnianego elementu "a" 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 a pozwala nam określić relację pomiędzy dokumentem HTML, w którego zawartości znajduje się dany element a, a zasobem internetowym, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Atrybut "rel" ma sens tylko wtedy gdy dany element "a" posiada atrybut href.

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, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

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

    <footer>
      Wersja PDF: <a href="owoce.pdf" rel="alternate">owoce</a>.
    </footer>

  </body>
</html>

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

author

Wartość author oznacza, że treść reprezentowana przez zawartość najbliższego elementu przodka będącego elementem article danego elementu a posiada swojego autora, o którym można dowiedzieć się więcej z zasobu internetowego, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Jeżeli element a nie posiada elementu przodka będącego elementem article, wtedy mowa tu o autorze danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

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

      <footer>
        Autor artykułu: <a href="wydawca-jan-kowalski.html" rel="author">Jan Kowalski</a>.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "author", przykładowy element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść reprezentowana przez zawartość najbliższego elementu przodka będącego elementem "article" przykładowego elementu "a" posiada swojego autora, o którym można dowiedzieć się więcej z zasobu internetowego "wydawca-jan-kowalski.html", do którego prowadzi klikalny odnośnik reprezentowany przez wspomniany element "a".

bookmark

Wartość bookmark oznacza, że treść reprezentowana przez zawartość najbliższego elementu przodka będącego elementem article danego elementu a jest treścią, do której odnosi się niezmienny oraz bezpośredni klikalny odnośnik (tzw. permalink) znajdujący się w zawartości zasobu internetowego, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Jeżeli element a nie posiada elementu przodka będącego elementem article, wtedy mowa tu o najbliższym elemencie przodku będącym elementem HTML tworzącym dowolną sekcję zawartości.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

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

      <footer>
        Poznaj moje pozostałe <a href="ulubione-rosliny.html" rel="bookmark">ulubione rośliny</a>.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "bookmark", przykładowy element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść reprezentowana przez zawartość najbliższego elementu przodka będącego elementem "article" przykładowego elementu "a" jest treścią, do której odnosi się niezmienny oraz bezpośredni klikalny odnośnik znajdujący się w zawartości zasobu internetowego "ulubione-rosliny.html", do którego prowadzi klikalny odnośnik reprezentowany przez wspomniany element "a".

external

Wartość external oznacza, że dany dokument HTML nie należy do tej samej strony internetowej, co zasób internetowy, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

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

      <footer>
        Zobacz więcej informacji o <a href="https://wikipedia.org/czeresnia.html" rel="external">czereśni</a>.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "external", przykładowy element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML nie należy do strony internetowej "https://wikipedia.org", na której znajduje się zasób internetowy "czeresnia.html", do którego prowadzi klikalny odnośnik reprezentowany przez wspomniany element "a".

help

Wartość help oznacza, że dla treści reprezentowanej przez zawartość elementu rodzica danego elementu a istnieją dodatkowe informacje pomocnicze, o których można dowiedzieć się więcej z zasobu internetowego, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest <b>czereśnia</b> (<a href="https://wikipedia.org/czeresnia.html" rel="help">czereśnia?</a>).</p>
      <img src="https://webkod.pl/owoc-01.png" alt="zdjęcie czereśni">
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </article>

  </body>
</html>

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

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, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

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

      <p>
        <small>Artykuł znajdujący się na tej stronie internetowej opiera się na <a href="licencja-mit.html" rel="license">Licencji MIT</a>.</small>
      </p>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "license", przykładowy element "a" 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", do którego prowadzi klikalny odnośnik reprezentowany przez wspomniany element "a".

next

Wartość next oznacza, że dany dokument HTML jest częścią serii, natomiast zasób internetowy, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a, 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>
  </head>
  <body>

    <h1>Owoce</h1>

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

    <nav>
      <ol>
        <li>
          <a href="warzywa.html" rel="prev">warzywa</a>
        </li>

        <li>
          <a href="kwiaty.html" rel="next">kwiaty</a>
        </li>
      </ol>
    </nav>

  </body>
</html>

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

nofollow

Wartość nofollow oznacza, że autor danego dokumentu HTML nie gwarantuje tego, że zasób internetowy, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a, jest potwierdzonym, zaufanym, sprawdzonym zasobem internetowym.

Wartość nofollow może również oznaczać, że prowadzący do zasobu internetowego klikalny odnośnik reprezentowany przez dany element a został dodany do zawartości danego dokumentu HTML, ponieważ wynika to głównie z różnych komercyjnych umów pomiędzy przynajmniej dwoma osobami lub organizacjami.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

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

      <footer>
        Zobacz więcej informacji o <a href="https://wikipedia.org/czeresnia.html" rel="nofollow">czereśni</a>.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "nofollow", przykładowy element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że autor danego dokumentu HTML nie gwarantuje tego, że zasób internetowy "czeresnia.html", do którego prowadzi klikalny odnośnik reprezentowany przez wspomniany element "a", jest potwierdzonym, zaufanym, sprawdzonym zasobem internetowym.

noopener

Wartość noopener oznacza, że w momencie kliknięcia na klikalny odnośnik reprezentowany przez dany element a informacje o oknie przeglądarki internetowej, do którego został wczytany dany dokument HTML, nie będą zapamiętywane jako wartość właściwości opener obiektu window nowo utworzonego okna przeglądarki internetowej, do którego zostanie wczytany zasób internetowy, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Mowa tu wyłącznie o elemencie a, którego wartością atrybutu target jest wartość _blank.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

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

      <footer>
        Zobacz więcej informacji o <a href="https://wikipedia.org/czeresnia.html" target="_blank" rel="noopener">czereśni</a>.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "a" posiadającego atrybut "target" o wartości "_blank" został dodany atrybut "rel" wraz z wartością "noopener", przykładowy element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że w momencie kliknięcia na klikalny odnośnik reprezentowany przez przykładowy element "a" informacje o oknie przeglądarki internetowej, do którego został wczytany dany dokument HTML, nie powinny być zapamiętywane jako wartość właściwości "opener" obiektu "window" nowo utworzonego okna przeglądarki internetowej, do którego zostanie wczytany zasób internetowy "czeresnia.html", do którego prowadzi klikalny odnośnik reprezentowany przez wspomniany element "a".

noreferrer

Wartość noreferrer oznacza, że w momencie kliknięcia na klikalny odnośnik reprezentowany przez dany element a informacja o adresie danego dokumentu HTML (tzw. informacja HTTP REFERER) nie będzie przekazywana przez przeglądarkę internetową do serwera, na którym znajduje się zasób internetowy, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

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

      <footer>
        Zobacz więcej informacji o <a href="https://wikipedia.org/czeresnia.html" rel="noreferrer">czereśni</a>.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "noreferrer", przykładowy element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że w momencie kliknięcia na klikalny odnośnik reprezentowany przez przykładowy element "a" informacja o adresie danego dokumentu HTML nie powinna być przekazywana przez przeglądarkę internetową do serwera o nazwie "https://wikipedia.org", na którym znajduje się zasób internetowy "czeresnia.html", do którego prowadzi klikalny odnośnik reprezentowany przez wspomniany element "a".

prev

Wartość prev oznacza, że dany dokument HTML jest częścią serii, natomiast zasób internetowy, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a, 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>
  </head>
  <body>

    <h1>Owoce</h1>

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

    <nav>
      <ol>
        <li>
          <a href="warzywa.html" rel="prev">warzywa</a>
        </li>

        <li>
          <a href="kwiaty.html" rel="next">kwiaty</a>
        </li>
      </ol>
    </nav>

  </body>
</html>

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

tag

Wartość tag oznacza, że dla treści reprezentowanej przez zawartość danego dokumentu HTML istnieją dodatkowe informacje, o których można dowiedzieć się więcej z zasobu internetowego, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

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

      <footer>
        Zobacz więcej informacji o <a href="https://wikipedia.org/czeresnia.html" rel="tag">czereśni</a>.
      </footer>
    </article>

  </body>
</html>

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

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 a.

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>
  </head>
  <body>

    <h1>Owoce</h1>

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

    <nav>
      <ol>
        <li>
          <a href="warzywa.html" rel="prev">warzywa</a>
        </li>

        <li>
          <a href="kwiaty.html" rel="next nofollow">kwiaty</a>
        </li>
      </ol>
    </nav>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z następującą kombinacją wartości: "next nofollow", przykładowy element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że dany dokument HTML jest częścią serii, natomiast zasób internetowy "kwiaty.html", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", jest następnym w kolejności zasobem internetowym w danej serii, w stosunku do danego dokumentu HTML, dodatkowo przykładowy element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że autor danego dokumentu HTML nie gwarantuje tego, że zasób internetowy "kwiaty.html", do którego prowadzi klikalny odnośnik reprezentowany przez wspomniany element "a", jest potwierdzonym, zaufanym, sprawdzonym zasobem internetowym.

Atrybut Lokalny

rev

Przeznaczenie atrybutu rev

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

Atrybut "rev" ma sens tylko wtedy gdy dany element "a" posiada atrybut href.

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>
  </head>
  <body>

    <h1>Owoce</h1>

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

    <nav>
      <ol>
        <li>
          <a href="warzywa.html" rev="next" rel="prev">warzywa</a>
        </li>

        <li>
          <a href="kwiaty.html" rev="prev" rel="next">kwiaty</a>
        </li>
      </ol>
    </nav>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rev" wraz z wartością "prev", przykładowy element "a" 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", do którego prowadzi klikalny odnośnik reprezentowany przez wspomniany element "a".

Atrybut Lokalny

target

Przeznaczenie atrybutu target

Atrybut target wykorzystany wraz z elementem a pozwala nam określić docelowy kontekst (miejsce), gdzie powinien zostać wczytany zasób internetowy, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Docelowe wczytanie się zasobu internetowego nastąpi w momencie gdy użytkownik kliknie na klikalny odnośnik reprezentowany przez dany element a.

Atrybut "target" ma sens tylko wtedy gdy dany element "a" posiada atrybut href.

Wartość domyślna

_self (gdy pominęliśmy atrybut)

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

Wartości atrybutu target

_blank

Wartość _blank wskazuje na nowy kontekst przeglądarki internetowej, na nowe miejsce, np. na nowe okno przeglądarki internetowej (nową zakładkę).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p>
      <a href="https://webkod.pl/files/html/zwierze-01.png" target="_blank">kliknij, aby zobaczyć zdjęcie lwa</a>
    </p>

  </body>
</html>

Rezultat

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie wczytany do nowego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "a" został dodany atrybut "target" wraz z wartością "_blank".

_parent

Wartość _parent wskazuje na kontekst rodzica kontekstu przeglądarki internetowej, do którego należy dany element a.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/a-target-parent.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: a-target-parent.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut target - wartość _parent</title>
      </head>
      <body>

        <p>
          <a href="https://webkod.pl/files/html/zwierze-01.png" target="_parent">kliknij, aby zobaczyć zdjęcie lwa</a>
        </p>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "a", jest element "iframe", którego kontekstem rodzicem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "a" został dodany atrybut "target" wraz z wartością "_parent".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "a", nie posiada kontekstu rodzica, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

_self

Wartość _self wskazuje na kontekst przeglądarki internetowej, do którego należy dany element a, np. na aktualne okno przeglądarki internetowej (aktualną zakładkę) lub na aktualny element iframe.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/a-target-self.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: a-target-self.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut target - wartość _self</title>
      </head>
      <body>

        <p>
          <a href="https://webkod.pl/files/html/zwierze-01.png" target="_self">kliknij, aby zobaczyć zdjęcie lwa</a>
        </p>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "a", jest element "iframe", dlatego w momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie wczytany do elementu "iframe", ponieważ do wspomnianego elementu "a" został dodany atrybut "target" wraz z wartością "_self".

_top

Wartość _top wskazuje na kontekst najdalszego przodka kontekstu przeglądarki internetowej, do którego należy dany element a.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe src="https://webkod.pl/files/html/a-target-top.html"></iframe>
    <!-- KOD ŹRÓDŁOWY PLIKU: a-target-top.html >>>>

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Atrybut target - wartość _top</title>
      </head>
      <body>

        <p>
          <a href="https://webkod.pl/files/html/zwierze-01.png" target="_top">kliknij, aby zobaczyć zdjęcie lwa</a>
        </p>

      </body>
    </html>

    -->

  </body>
</html>

Rezultat

Kontekstem przeglądarki internetowej, do którego należy przykładowy element "a", jest element "iframe", którego najdalszym kontekstem przodkiem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "a" został dodany atrybut "target" wraz z wartością "_top".

Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "a", nie posiada kontekstu najdalszego przodka, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.

iframe name

Należy podać wartość atrybutu name interesującego nas elementu iframe, dzięki czemu interesujący nas element iframe stanie się docelowym kontekstem.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <iframe name="ramka-1"></iframe>

    <p>
      <a href="https://webkod.pl/files/html/zwierze-01.png" target="ramka-1">kliknij, aby zobaczyć zdjęcie lwa</a>
    </p>

  </body>
</html>

Rezultat

W momencie gdy użytkownik zdecyduje się na kliknięcie na klikalny odnośnik reprezentowany przez przykładowy element "a", zasób internetowy "zwierze-01.png", do którego prowadzi klikalny odnośnik reprezentowany przez przykładowy element "a", zostanie wczytany do elementu "iframe", który posiada atrybut "name" o wartości "ramka-1", ponieważ do wspomnianego elementu "a" został dodany atrybut "target" wraz z wartością "ramka-1".

Jeżeli w kontekście przeglądarki internetowej, do którego należy dany element "a" lub w kontekście rodzicu lub w kontekście przodku, nie znajduje się element iframe o wartości atrybutu name, którą podaliśmy, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _blank.

Możemy podać również wartość atrybutu name interesującego nas elementu object, lecz tylko wtedy gdy interesujący nas element object reprezentuje zasób internetowy pochodzący z technologii HTML.

Atrybut Lokalny

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem a pozwala nam określić informację o typie MIME, jaki posiada zasób internetowy, do którego prowadzi klikalny odnośnik reprezentowany przez dany element a.

Atrybut "type" ma sens tylko wtedy gdy dany element "a" posiada atrybut href.

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>
  </head>
  <body>

    <p>
      <a href="https://webkod.pl/files/html/zwierze-01.png" type="image/png">kliknij, aby zobaczyć zdjęcie lwa</a>
    </p>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "a" został dodany atrybut "type" wraz z wartością "image/png", przykładowy element "a" reprezentujący klikalny odnośnik prowadzący do zasobu internetowego "zwierze-01.png" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada zasób internetowy "zwierze-01.png", jest typ wskazujący na plik typu PNG.