<head>
Niewidoczna część dokumentu z metadanymi: tytułem, kodowaniem znaków, opisem, stylami i skryptami.
- Wyświetlanie
- none
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy metadanych:
<title>(obowiązkowy),<meta>,<link>,<style>,<script>,<base>,<noscript>i<template>
Przykład
#<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kurs Python od zera | CodeWorlds</title>
<meta name="description" content="Naucz się Pythona w 30 krótkich lekcjach z zadaniami i podpowiedziami.">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/app.js" defer></script>
</head>Definicja i zastosowanie
#Element <head> to pierwsze dziecko elementu <html>. Umieszczasz w nim informacje o stronie, a nie jej treść: tytuł (<title>), metadane (<meta>), powiązane pliki (<link>), style (<style>), skrypty (<script>) i adres bazowy (<base>). Nic z tego nie pojawia się bezpośrednio na stronie.
Z zawartości nagłówka korzysta wiele programów naraz. Przeglądarka pokazuje tytuł na karcie i wie, jakie style wczytać. Wyszukiwarka bierze stąd tytuł i opis do wyników, a serwisy społecznościowe budują z niego podgląd linku, gdy ktoś go udostępni.
Kolejność ma znaczenie. <meta charset> musi się zmieścić w pierwszych 1024 bajtach pliku, więc wstaw go na samą górę. <base> powinien wyprzedzać wszystkie elementy z adresami, a arkusze stylów dołączaj w nagłówku, żeby strona od pierwszej chwili wyglądała tak, jak powinna.
Jeśli wpiszesz w <head> coś widocznego, na przykład <p> albo <img>, parser uzna, że nagłówek dokumentu właśnie się skończył. Ten element i wszystko, co stoi po nim, trafi do <body>.
Składnia
#<head>
<meta charset="utf-8">
<title>Tytuł strony</title>
</head>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
head {
display: none;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zacznij od
<meta charset="utf-8">, zaraz po nim dodaj znacznik viewport, a dopiero potem tytuł, style i skrypty. <head>i<header>to dwa różne elementy. Pierwszy przechowuje metadane, drugi jest widocznym nagłówkiem strony lub sekcji.- Skrypty w nagłówku oznaczaj atrybutem
defer, żeby nie wstrzymywały wyświetlania strony.
Powiązane hasła
#- <html>Korzeń dokumentu HTML. Wszystkie pozostałe elementy strony znajdują się w jego wnętrzu.
- <title>Tytuł dokumentu widoczny na karcie przeglądarki, w zakładkach i jako nagłówek wyniku w wyszukiwarce.
- <meta>Metadane strony: kodowanie znaków, ustawienia widoku na telefonie, opis dla wyszukiwarek i podgląd linku w serwisach społecznościowych.
- <link>Łączy dokument z zewnętrznym zasobem: arkuszem stylów, ikoną strony, fontem albo inną wersją językową.
- <script>Osadza kod JavaScript w stronie albo wczytuje go z pliku, żeby dodać stronie zachowanie.
- <header>Wstęp do strony lub sekcji: logo, tytuł, nawigacja, dane autora.
Widzisz błąd albo brakuje przykładu? Napisz do nas.