Element <link> w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Opublikowano: Zaktualizowano:

Element <link> w HTML

Element <link> służy do dołączania do dokumentu HTML zewnętrznych zasobów, najczęściej plików CSS. Umieszcza się go w sekcji <head>, ponieważ opisuje on metadane i zasoby potrzebne do poprawnego wyświetlenia strony.

Dołączanie zewnętrznego arkusza CSS

Najczęstszy zapis wygląda tak:

<link rel="stylesheet" type="text/css" href="styl.css">

Znaczenie atrybutów:

  • rel="stylesheet" - określa relację zasobu do dokumentu, czyli informuje, że jest to arkusz stylów,
  • href="styl.css" - wskazuje ścieżkę do pliku CSS,
  • type="text/css" - określa typ MIME pliku; w HTML5 zwykle można go pominąć, ale w pytaniach egzaminacyjnych często występuje.

Gdzie umieścić element <link>?

Poprawne miejsce to sekcja <head>:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Strona</title>
  <link rel="stylesheet" href="styl.css">
</head>
<body>
  <h1>Witaj</h1>
</body>
</html>

Typowe błędy

  • użycie znacznika <meta> zamiast <link>,
  • wpisanie nazwy pliku CSS w niewłaściwym atrybucie,
  • brak atrybutu href,
  • literówka w nazwie pliku lub złe położenie pliku CSS względem HTML.

Na egzaminie INF.03 poprawną odpowiedzią dla dołączenia zewnętrznego arkusza stylów jest zapis z elementem <link rel="stylesheet" href="...">.