Ostatnio edytowany:

link

Autor: Virtual Patriot

Przeznaczenie elementu link

Element link reprezentuje zasób internetowy, który chcemy aby został powiązany z dokumentem HTML. Wspomnianym zasobem internetowym może być plik CSS, plik HTML, plik graficzny w formie ikony oraz różne inne typy plików.

Dodatkowe techniczne informacje 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 -->
      </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="inny-plik-01.css" rel="stylesheet">
        </noscript>
      </head>
    
      <body>
        <!-- miejsce na pozostały kod części BODY -->
      </body>
    </html>

    Kontekstem zewnętrznym pierwszego przykładowego elementu "link" jest element "head". Wspomniany element "head" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst metadata. 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 wspomniane konteksty zewnętrzne, czyli element "head" oraz element "noscript", są prawidłowymi kontekstami zewnętrznymi dla poszczególnych elementów "link".

kontekst wewnętrzny
  • brak
wymagane elementy dzieci
  • brak
wymagane atrybuty
składnia HTML
  • <link>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • zawsze
CSS display
  • none

Dodatkowe 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 sizes.

Edge

tak

Nie interpretuje atrybutu sizes.

Opis atrybutów elementu link

crossorigin

Przeznaczenie atrybutu crossorigin

Atrybut crossorigin wykorzystany wraz z elementem link określa, 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.

href

Przeznaczenie atrybutu href

Atrybut href wykorzystany wraz z elementem link określa adres zasobu internetowego, który powinien 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="http://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, który powinien być reprezentowany przez przykładowy element "link" jest zasób internetowy "styl-domyslny-01.css" znajdujący się pod adresem "http://webkod.pl/files/html/styl-domyslny-01.css", dlatego do wspomnianego elementu "link" został dodany atrybut "href" wraz z wartością "http://webkod.pl/files/html/styl-domyslny-01.css".

hreflang

Przeznaczenie atrybutu hreflang

Atrybut hreflang wykorzystany wraz z elementem link określa informację o bazowym 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" wspomniany 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 bazowym językiem, jaki posiada wspomniany zasób internetowy jest język angielski.

media

Przeznaczenie atrybutu media

Atrybut media wykorzystany wraz z elementem link określa typ media, dla którego 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="http://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 media (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)".

rel

Przeznaczenie atrybutu rel

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

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 link 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>
    <link href="owoce.xml" rel="alternate">
  </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 "rel" wraz z wartością "alternate" wspomniany element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "link" jest alternatywnym zasobem internetowym danego dokumentu HTML.

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

author

Wartość author oznacza, że dany element link 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>
    <link href="wydawca-jan-kowalski.html" rel="author">
  </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 "rel" wraz z wartością "author" wspomniany element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "link" zawiera informacje o autorze treści reprezentowanej przez zawartość danego dokumentu HTML.

help

Wartość help oznacza, że dany element link reprezentuje zasób internetowy, który pełni rolę informacji pomocniczych o treści reprezentowanej przez zawartość danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <link href="https://pl.wikipedia.org/wiki/Czere%C5%9Bnia" rel="help">
  </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 "rel" wraz z wartością "help" wspomniany element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "link" zawiera dodatkowe informacje pomocnicze o treści reprezentowanej przez zawartość danego dokumentu HTML.

icon

Wartość icon oznacza, że dany element link reprezentuje zasób internetowy w postaci ikony dla danego dokumentu 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>
    </article>

  </body>
</html>

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

license

Wartość license oznacza, że dany element link 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>
    <link href="licencja-mit.html" rel="license">
  </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 "rel" wraz z wartością "license" wspomniany element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "link" 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 link 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>
    <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>
    </article>

  </body>
</html>

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

prefetch

Wartość prefetch oznacza, że zasób internetowy reprezentowany przez dany element link 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>
    <link href="kwiaty.html" rel="prefetch">
  </head>
  <body>

    <h1>Owoce</h1>

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

      <footer>
        Zobacz również: <a href="kwiaty.html">Kwiaty</a>.
      </footer>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "prefetch" wspomniany element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "link" 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 link 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>
    <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>
    </article>

  </body>
</html>

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

Wartość search oznacza, że dany element link 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>
    <link href="szukaj-owoce.xml" rel="search">
  </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 "rel" wraz z wartością "search" wspomniany element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "link" może zostać wykorzystany przez jeden z mechanizmów przeglądarki internetowej w celu przeszukania treści reprezentowanej przez zawartość danego dokumentu HTML.

stylesheet

Wartość stylesheet oznacza, że dany element link reprezentuje zasób internetowy w postaci pliku (np. pliku CSS) zawierającego reguły określające styl wyglądu poszczególnych elementów HTML występujących 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>
    </article>

  </body>
</html>

Ponieważ do przykładowego elementu "link" został dodany atrybut "rel" wraz z wartością "stylesheet" wspomniany element "link" zawiera dodatkową informację dla przeglądarki internetowej o tym, że zasób internetowy reprezentowany przez wspomniany element "link" jest plikiem zawierającego reguły określające styl wyglądu poszczególnych elementów HTML występujących w zawartości danego dokumentu HTML.

Jeżeli wartością atrybutu "rel" danego elementu "link" jest również wartość alternate, wtedy wspomniany element "link" reprezentuje alternatywny (zamienny) zasób internetowy posiadający reguły określające styl wyglądu poszczególnych elementów HTML występujących w zawartości danego dokumentu HTML.

sizes

Przeznaczenie atrybutu sizes

Atrybut sizes wykorzystany wraz z elementem link określa 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="http://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 dokumentu HTML 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="http://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 ikony dokumentu HTML reprezentowanej 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

Ważne

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

Przykładowe zapisy

16x16

16x16 32x32

16x16 32x32 64x64

WIDTH

Wymagany 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

x

Wymagany 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ć wspomniane składniki WIDTH oraz HEIGHT.

HEIGHT

Wymagany 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

title

Przeznaczenie atrybutu title

Atrybut title wykorzystany wraz z elementem link określa tytuł dla zasobu internetowego reprezentowanego przez dany element link.

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

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

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="http://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="http://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="http://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" wspomniany element "link" reprezentujący zasób internetowy znajdujący się pod adresem "http://webkod.pl/files/html/styl-domyslny-01.css" zawiera dodatkową informację dla przeglądarki internetowej o tym, że tytułem zasobu internetowego reprezentowanego przez wspomniany element "link" jest tytuł "wygląd domyślny".

Gdy dany element "link" posiada atrybut rel o wartości stylesheet alternate, wtedy wspomniany ciąg znaków nie może być pustym ciągiem znaków.

type

Przeznaczenie atrybutu type

Atrybut type wykorzystany wraz z elementem link określa 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 posiadanym przez zasób internetowy reprezentowany przez dany element "link", wtedy wspomniany 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="http://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" wspomniany element "link" reprezentujący zasób internetowy znajdujący się pod adresem "http://webkod.pl/files/html/styl-domyslny-01.css" 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 CSS.