atrybuty
informacje techniczne
interpretacja
opis atrybutów

Autor publikacji: Virtual Patriot - Administrator

link

Data publikacji: Kwiecień 09 2016
Ostatnio edytowano: Październik 01 2019

Zobacz również: w3.org - the link element (HTML5)

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

zawartość metadata

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

atrybut href
atrybut rel
atrybut title (w przypadku gdy dany element link posiada atrybut rel o wartości stylesheet alternate)

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`

tak

Nie interpretuje atrybutu sizes.

tak

Nie interpretuje atrybutu sizes.

tak

Nie interpretuje atrybutu sizes.

tak

Nie interpretuje atrybutu sizes.

tak

Interpretuje atrybut crossorigin, lecz od wersji "11".

Nie interpretuje atrybutu sizes.

tak

Nie interpretuje atrybutu sizes.

Opis atrybutów elementu `link`

opis ogólny (atrybuty lokalne)

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.

opis ogólny (atrybuty lokalne)

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="https://webkod.pl/files/html/styl-domyslny-01.css" rel="stylesheet">
    <!-- KOD ŹRÓDŁOWY PLIKU - styl-domyslny-01.css -->
    <!-- body { background-color:orange; } -->
  </head>
  <body>

    <h1>Owoce</h1>

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

  </body>
</html>

Rezultat

Zobacz rezultat: przykład atrybutu href - element link

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 "https://webkod.pl/files/html/styl-domyslny-01.css", dlatego do wspomnianego elementu "link" został dodany atrybut "href" wraz z wartością "https://webkod.pl/files/html/styl-domyslny-01.css".

opis ogólny (atrybuty lokalne)

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.

opis ogólny (atrybuty lokalne)

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="https://webkod.pl/files/html/styl-domyslny-01.css" media="all and (min-width:800px)" rel="stylesheet">
    <!-- KOD ŹRÓDŁOWY PLIKU - styl-domyslny-01.css -->
    <!-- body { background-color:orange; } -->
  </head>
  <body>

    <h1>Owoce</h1>

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

  </body>
</html>

Rezultat

Zobacz rezultat: przykład atrybutu media - element link

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)".

opis ogólny (atrybuty lokalne)

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.

search

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.

opis ogólny (atrybuty lokalne)

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="https://webkod.pl/files/html/favicon-01.ico" rel="icon" sizes="any">
  </head>
  <body>

    <h1>Owoce</h1>

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

  </body>
</html>

Rezultat

Zobacz rezultat: przykład atrybutu sizes o wartości any - element link

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="https://webkod.pl/files/html/favicon-01.ico" rel="icon" sizes="16x16">
  </head>
  <body>

    <h1>Owoce</h1>

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

  </body>
</html>

Rezultat

Zobacz rezultat: przykład atrybutu sizes o wartości 16x16 - element link

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

                WIDTHxHEIGHT

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.

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.

opis ogólny (atrybuty globalne)

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="https://webkod.pl/files/html/styl-domyslny-01.css" rel="stylesheet" title="wygląd domyślny">
    <!-- KOD ŹRÓDŁOWY PLIKU - styl-domyslny-01.css -->
    <!-- body { background-color:orange; } -->

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

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

    <h1>Owoce</h1>

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

  </body>
</html>

Rezultat

Zobacz rezultat: przykład atrybutu title - element link

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 "https://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.

opis ogólny (atrybuty lokalne)

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="https://webkod.pl/files/html/styl-domyslny-01.css" type="text/css" rel="stylesheet">
    <!-- KOD ŹRÓDŁOWY PLIKU - styl-domyslny-01.css -->
    <!-- body { background-color:orange; } -->
  </head>
  <body>

    <h1>Owoce</h1>

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

  </body>
</html>

Rezultat

Zobacz rezultat: przykład atrybutu type - element link

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 "https://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.