Ostatnio edytowany:

a

Autor: Virtual Patriot

Przeznaczenie elementu a

Element a reprezentuje klikalny odnośnik prowadzący do zasobu internetowego, którego adres określa wartość atrybutu href danego elementu a. Ponadto 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 dany element a.

Jeżeli element a nie posiada atrybutu href, wtedy wspomniany element a reprezentuje (wraz ze swoją zawartością) miejsce, w którym mógłby pojawić się klikalny odnośnik.

Dodatkowe techniczne informacje 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="http://webkod.pl/kurs-html/krok-po-kroku/progres/wprowadzenie-do-kursu-html">Darmowy kurs języka HTML</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 zawartość interaktywna jako element potomek

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

składnia HTML

<a> ... </a>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline

Dodatkowe domyślne reguły CSS elementu a

a {
  text-decoration:underline;
}

a:link {
  color:#00F;
}

a:visited {
  color:#551A8B;
}

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

a:active {
  color:#F00;
}

Interpretacja elementu a

Firefox

tak

Google Chrome

tak

Safari

tak

Nie interpretuje atrybutu download.

Opera

tak

Internet Explorer

tak

Nie interpretuje atrybutu download.

Edge

tak

Opis atrybutów elementu a

download

Przeznaczenie atrybutu download

Atrybut download wykorzystany wraz z elementem a określa nazwę, jaką powinien posiadać zasób internetowy, który może zostać pobrany na nasze urządzenie końcowe za pośrednictwem danego elementu 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="http://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

Zasób internetowy "plik-01.rar" reprezentowany przez przykładowy element "a", po pobraniu na nasze urządzenie końcowe za pośrednictwem wspomnianego elementu "a" będzie posiadał nazwę "plik rar - zdjęcie lwa.rar", ponieważ do wspomnianego elementu "a" został dodany atrybut "download" wraz z wartością "plik rar - zdjęcie lwa.rar".

We wspomnianej nazwie warto również uwzględnić rozszerzenie pliku, aby ułatwić naszemu urządzeniu końcowemu rozpoznanie typu zasobu internetowego, które zostanie pobrane.

href

Przeznaczenie atrybutu href

Atrybut href wykorzystany wraz z elementem a określa adres zasobu internetowego, który powinien być reprezentowany przez dany element a.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu href

URI

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

Przykładowy Kod HTML

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

    <p>
      <a href="http://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, który powinien być reprezentowany przez przykładowy element "a" jest zasób internetowy znajdujący się pod adresem "http://webkod.pl/kurs-html/tagi/tabela/element-table", dlatego do wspomnianego elementu "a" został dodany atrybut "href" wraz z wartością "http://webkod.pl/kurs-html/tagi/tabela/element-table".

hreflang

Przeznaczenie atrybutu hreflang

Atrybut hreflang wykorzystany wraz z elementem a określa informację o bazowym języku, jaki posiada zasób internetowy 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="http://www.w3.org/TR/html5/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" wspomniany element "a" reprezentujący zasób internetowy znajdujący się pod adresem "http://www.w3.org/TR/html5/tabular-data.html" zawiera dodatkową informację dla przeglądarki internetowej o tym, że bazowym językiem, jaki posiada wspomniany zasób internetowy jest język angielski.

rel

Przeznaczenie atrybutu rel

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

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

Możemy podać kilka wartości oddzielonych od siebie przynajmniej jednym znakiem spacji, jeżeli będzie miało to sens.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu rel

alternate

Wartość alternate oznacza, że dany element a reprezentuje alternatywny (zamienny) zasób internetowy 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>

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

    <footer>
      Zobacz również: <a href="owoce.xml" rel="alternate">owoce - wersja xml</a>.
    </footer>

  </body>
</html>

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

Jeżeli dany element "a" posiada atrybut type o wartości "application/rss+xml" lub o wartości "application/atom+xml", wtedy wspomniany element "a" reprezentuje alternatywny (zamienny) zasób internetowy danego dokumentu HTML lub jego poszczególnych części w postaci RSS.

author

Wartość author oznacza, że dany element a reprezentuje zasób internetowy zawierający informacje o autorze lub o autorach danego dokumentu HTML lub poszczególnych części wspomnianego dokumentu HTML.

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="http://webkod.pl/files/html/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>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "author" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "a" zawiera informacje o autorze treści reprezentowanej przez zawartość elementu "article", który to element "article" jest pierwszym w kolejności odszukanym elementem przodkiem typu "article" wspomnianego elementu "a".

Jeżeli jednym z elementów przodków danego elementu "a" jest element article, wtedy informacje o autorze odnoszą się do treści reprezentowanej przez zawartość wspomnianego elementu article (pierwszego w kolejności).

bookmark

Wartość bookmark oznacza, że dany element a reprezentuje niezmienny, bezpośredni odnośnik (tzw. permalink), który odnosi się do treści reprezentowanej przez zawartość elementu article (lub każdego innego elementu HTML tworzącego sekcję zawartości), który jest pierwszym w kolejności odszukanym elementem przodkiem wspomnianego elementu 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 id="ulubiony-owoc">
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <footer>
          Bezpośredni odnośnik do artykułu: <a href="http://webkod.pl/owoce.html#ulubiony-owoc" rel="bookmark">http://webkod.pl/owoce.html#ulubiony-owoc</a>.
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "bookmark" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że wspomniany element "a" reprezentuje bezpośredni odnośnik do treści reprezentowanej przez zawartość elementu "article", który to element "article" jest pierwszym w kolejności odszukanym elementem przodkiem typu "article" wspomnianego elementu "a".

help

Wartość help oznacza, że dany element a reprezentuje zasób internetowy, który pełni rolę informacji pomocniczych o treści reprezentowanej przez zawartość elementu HTML, który jest elementem rodzicem wspomnianego elementu 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> (<a href="https://pl.wikipedia.org/wiki/Czere%C5%9Bnia" rel="help">czereśnia?</a>).</p>
        <img src="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "help" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "a" zawiera dodatkowe informacje pomocnicze o treści reprezentowanej przez zawartość elementu rodzica wspomnianego elementu "a".

license

Wartość license oznacza, że dany element a reprezentuje zasób internetowy, który pełni rolę informacji o tym, na jakiej licencji opiera się treść reprezentowana przez zawartość elementu main 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>

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

      <p>
        <small>Artykuły znajdujące się na tej stronie internetowej opierają 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" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "a" zawiera informacje o tym, na jakiej licencji opiera się treść reprezentowana przez zawartość elementu "main" występującego w zawartości danego dokumentu HTML.

next

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

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="http://webkod.pl/files/html/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>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "next" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "a" jest następnym w kolejności zasobem internetowym w danej serii.

nofollow

Wartość nofollow oznacza, że dany element a reprezentuje zasób internetowy, który z różnych względów nie jest potwierdzonym, zaufanym, sprawdzonym przez autora danego dokumentu HTML zasobem internetowym. Wartość nofollow może również oznaczać, że dany element a został dołączony do zawartości danego dokumentu HTML, ponieważ głównie wynika to 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>

    <main>
      <article>
        <h2>Mój ulubiony owoc</h2>
        <p>Moim ulubionym owocem jest <b>czereśnia</b>.</p>
        <img src="http://webkod.pl/files/html/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://pl.wikipedia.org/wiki/Czere%C5%9Bnia" rel="nofollow">czereśni</a>.
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "nofollow" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "a" nie jest sprawdzonym przez autora danego dokumentu HTML zasobem internetowym.

noreferrer

Wartość noreferrer oznacza, że gdy użytkownik kliknie na dany element a w celu przeniesienia się do zasobu internetowego reprezentowanego przez wspomniany element a, informacje o adresie URL dokumentu HTML, w którym znajdował się wspomniany element a (tzw. informacje HTTP REFERER) nie zostaną wysłane przez przeglądarkę internetową użytkownika do docelowego serwera, na którym znajduje się zasób internetowy reprezentowany przez wspomniany 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="http://webkod.pl/files/html/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://pl.wikipedia.org/wiki/Czere%C5%9Bnia" rel="noreferrer">czereśni</a>.
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "noreferrer" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że w momencie kliknięcia na wspomniany element "a" informacje HTTP REFERER nie powinny zostać wysłane przez wspomnianą przeglądarkę internetową do serwera, na którym znajduje się zasób internetowy reprezentowany przez wspomniany element "a".

prefetch

Wartość prefetch oznacza, że zasób internetowy reprezentowany przez dany element a powinien znaleźć się w pamięci podręcznej przeglądarki internetowej (tzw. CACHE), ponieważ istnieje duże prawdopodobieństwo, że użytkownik odwiedzający dany dokument HTML będzie wkrótce potrzebował wspomnianego zasobu internetowego.

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="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <footer>
          Zobacz również: <a href="warzywa.html" rel="prefetch">Warzywa</a>.
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "prefetch" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "a" powinien znaleźć się w pamięci podręcznej wspomnianej przeglądarki internetowej.

prev

Wartość prev oznacza, że dany dokument HTML jest częścią serii, dlatego zasób internetowy reprezentowany przez dany element a jest poprzednim w kolejności zasobem internetowym w danej serii.

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="http://webkod.pl/files/html/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>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "prev" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "a" jest poprzednim w kolejności zasobem internetowym w danej serii.

Wartość search oznacza, że dany element a reprezentuje zasób internetowy (np. typu OpenSearch), który zawiera informacje, które mogą zostać wykorzystane w celu przeszukania treści reprezentowanej przez zawartość danego dokumentu HTML lub treści reprezentowanej przez zawartość zasobów internetowych powiązanych ze wspomnianym dokumentem HTML.

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="http://webkod.pl/files/html/owoc-01.png" alt="zdjęcie czereśni">
        <p>Ponieważ uwielbiam ten czereśniowy smak.</p>

        <aside>
          <a href="szukaj-owoce.xml" rel="search">Szukaj</a>
        </aside>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "search" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "a" może zostać wykorzystany przez jeden z mechanizmów przeglądarki internetowej w celu przeszukania treści reprezentowanej przez zawartość danego dokumentu HTML.

tag

Wartość tag oznacza, że zasób internetowy reprezentowany przez dany element a odnosi się również do treści reprezentowanej przez zawartość dokumentu HTML, w którym znajduje się wspomniany 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="http://webkod.pl/files/html/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://pl.wikipedia.org/wiki/Czere%C5%9Bnia" rel="tag">czereśni</a>.
        </footer>
      </article>
    </main>

  </body>
</html>

Ponieważ do przykładowego elementu "a" został dodany atrybut "rel" wraz z wartością "tag" wspomniany element "a" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "a" odnosi się również do treści reprezentowanej przez zawartość danego dokumentu HTML.

target

Przeznaczenie atrybutu target

Atrybut target wykorzystany wraz z elementem a określa kontekst (miejsce) wczytania się zasobu internetowego reprezentowanego 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. Na przykład 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="http://webkod.pl/files/html/zwierze-01.png" target="_blank">kliknij, aby zobaczyć zdjęcie lwa</a>
    </p>

  </body>
</html>

Rezultat

Po kliknięciu na przykładowy element "a" zasób internetowy reprezentowany przez wspomniany 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="http://webkod.pl/files/html/a-target-parent.html"></iframe>
    <!-- KOD HTML PLIKU - a-target-parent.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut target - wartość _parent</title>
        </head>
        <body>

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

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Przykładowy element "a" znajduje się w elemencie "iframe", którego kontekstem rodzicem w tym wypadku jest aktualne okno przeglądarki internetowej, ponadto po kliknięciu na wspomniany element "a" zasób internetowy reprezentowany przez wspomniany element "a" zostanie wczytany do kontekstu rodzica wspomnianego elementu "iframe", 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 aktualny kontekst przeglądarki internetowej, do którego należy dany element a. Na przykład na aktualne okno przeglądarki internetowej (aktualną zakładkę) lub aktualny element iframe.

Przykładowy Kod HTML

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

    <iframe src="http://webkod.pl/files/html/a-target-self.html"></iframe>
    <!-- KOD HTML PLIKU - a-target-self.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut target - wartość _self</title>
        </head>
        <body>

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

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Aktualnym kontekstem przykładowego elementu "a" jest element "iframe", w którym to elemencie "iframe" znajduje się wspomniany element "a", ponadto po kliknięciu na wspomniany element "a" zasób internetowy reprezentowany przez wspomniany element "a" zostanie wczytany do wspomnianego 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="http://webkod.pl/files/html/a-target-top.html"></iframe>
    <!-- KOD HTML PLIKU - a-target-top.html -->
    <!--
      <!DOCTYPE HTML>
      <html>
        <head>
          <title>Atrybut target - wartość _top</title>
        </head>
        <body>

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

        </body>
      </html>
    -->

  </body>
</html>

Rezultat

Przykładowy element "a" znajduje się w elemencie "iframe", którego najdalszym kontekstem przodkiem w tym wypadku jest aktualne okno przeglądarki internetowej, ponadto po kliknięciu na wspomniany element "a" zasób internetowy reprezentowany przez wspomniany element "a" zostanie wczytany do kontekstu najdalszego przodka wspomnianego elementu "iframe", 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="http://webkod.pl/files/html/zwierze-01.png" target="ramka-1">kliknij, aby zobaczyć zdjęcie lwa</a>
    </p>

  </body>
</html>

Rezultat

Po kliknięciu na przykładowy element "a" zasób internetowy reprezentowany przez wspomniany 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 danym 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 wspomniany element object reprezentuje zasób internetowy w postaci dokumentu HTML.

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem a określa informację o typie MIME, jaki posiada zasób internetowy 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="http://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" wspomniany element "a" reprezentujący zasób internetowy znajdujący się pod adresem "http://webkod.pl/files/html/zwierze-01.png" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada wspomniany zasób internetowy jest typ wskazujący na plik typu PNG.