Co to jest <head> w HTML?
W HTML, element <head> jest sekcją dokumentu, która zawiera informacje o stronie (metadane) i ustawienia, które nie są bezpośrednio wyświetlane na stronie. Wewnątrz tagu <head> umieszczamy różne elementy, takie jak tytuł strony, odwołania do stylów CSS, skrypty JavaScript, metadane, a także inne zasoby, które są potrzebne do prawidłowego działania strony.
Składnia i zawartość tagu <head>
Tag <head> zwykle zawiera następujące elementy:
- Tytuł strony (
<title>) – Określa tytuł strony, który jest wyświetlany na pasku przeglądarki lub na karcie. - Metadane (
<meta>) – Informacje o stronie, takie jak kodowanie znaków, słowa kluczowe do SEO, opis strony, itp. - Linki do zewnętrznych plików CSS (
<link>) – Łącze do plików CSS, które definiują wygląd strony. - Skrypty JavaScript (
<script>) – Łącze do zewnętrznych plików JavaScript lub skrypty umieszczone bezpośrednio w HTML. - Inne zasoby – Takie jak ikony, czcionki czy pliki XML.
Przykład użycia <head> w HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<!-- Określenie kodowania znaków -->
<meta charset="UTF-8">
<!-- Opis strony -->
<meta name="description" content="Strona o HTML i tagu head">
<!-- Słowa kluczowe dla wyszukiwarek -->
<meta name="keywords" content="HTML, head, przykład, metadane, tag">
<!-- Autor strony -->
<meta name="author" content="Twoje Imię">
<!-- Ustawienia widoczności na urządzeniach mobilnych -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tytuł strony -->
<title>Przykład tagu head w HTML</title>
<!-- Łącze do zewnętrznego pliku CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Łącze do ikony strony (favicon) -->
<link rel="icon" href="favicon.ico">
<!-- Skrypt JavaScript -->
<script src="script.js"></script>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>Strona zawiera przykład tagu <head> w HTML.</p>
</body>
</html>
Wyjaśnienie poszczególnych elementów:
<meta charset="UTF-8">– Określa kodowanie znaków używane w dokumencie. "UTF-8" jest najbardziej powszechnym kodowaniem, które obsługuje wszystkie znaki z różnych języków.<meta name="description" content="...">– Podaje opis strony, który może być wykorzystywany przez wyszukiwarki do wyświetlania jej opisu w wynikach wyszukiwania.<meta name="keywords" content="...">– Określa słowa kluczowe, które mogą pomóc wyszukiwarkom w klasyfikacji strony.<meta name="author" content="...">– Określa autora strony.<meta name="viewport" content="width=device-width, initial-scale=1.0">– Ustawia, jak strona będzie wyświetlana na urządzeniach mobilnych, umożliwiając responsywność.<title>– Określa tytuł strony, który pojawia się na karcie przeglądarki.<link rel="stylesheet" href="styles.css">– Łącze do zewnętrznego pliku CSS, który definiuje wygląd strony.<link rel="icon" href="favicon.ico">– Łącze do ikony strony (tzw. favicon), która pojawia się na karcie przeglądarki.<script src="script.js"></script>– Łącze do zewnętrznego pliku JavaScript, który może zawierać skrypty strony.