Do części <head> dokumentu HTML należą specjalne znaczniki, które dostarczają przeglądarce i wyszukiwarkom istotnych informacji o stronie, ale same w sobie nie są bezpośrednio wyświetlane użytkownikowi w treści witryny. Poniżej omówiono najważniejsze znaczniki umieszczane w sekcji <head>, z przykładami i praktycznymi wskazówkami.
Podstawowe znaczniki sekcji <head> dokumentu HTML
-
<title>
Tytuł strony, wyświetlany na karcie przeglądarki oraz jako nagłówek w wynikach wyszukiwania.
Przykład –
<title>Moja pierwsza strona</title>-
<meta>
Znacznik służący do przekazywania dodatkowych informacji, takich jak opis strony, słowa kluczowe, autor, zestaw znaków czy instrukcje dla robotów wyszukiwarek.
Najczęstsze przykłady –
<meta charset="UTF-8">
<meta name="description" content="Krótki opis zawartości strony">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index,follow">-
<link>
Pozwala na dołączenie zewnętrznych zasobów, takich jak arkusze stylów CSS czy ikony strony (favicon).
Przykład –
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">-
<style>
Pozwala na osadzenie stylów CSS bezpośrednio w dokumencie.
Przykład –
<style>
body { background-color: #f2f2f2; font-family: Arial, sans-serif; }
</style>-
<script>
Znacznik wykorzystywany do osadzania lub odwołania się do skryptów JavaScript, które umożliwiają wykonywanie dynamicznych akcji na stronie.
Przykład –
<script src="script.js"></script>-
<base>
Określa bazowy adres URL dla względnych odnośników na stronie. Używany głównie w dużych projektach lub aplikacjach webowych.
Przykład –
<base href="https://www.example.com/" target="_blank">-
<noscript>
Określa treść wyświetlaną w przypadku, gdy przeglądarka użytkownika nie obsługuje JavaScript.
Przykład –
<noscript>
Twoja przeglądarka nie obsługuje JavaScript. Niektóre funkcje strony mogą nie działać poprawnie.
</noscript>Jak wygląda przykładowa kompletna sekcja <head>?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Poradnik HTML - Znaczniki sekcji head</title>
<meta name="description" content="Kompleksowy poradnik na temat znaczników w sekcji head dokumentu HTML.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png" type="image/png">
<base href="https://www.example.com/">
<style> h1 { color: navy; } </style>
<script>
// Prosty skrypt JavaScript
console.log('Sekcja head załadowana poprawnie.');
</script>
</head>
<body>
<!-- Zawartość strony -->
</body>
</html>Wskazówki praktyczne
- Wszystkie powyższe znaczniki powinny być umieszczone wyłącznie w sekcji
<head>; - Informacje w sekcji
<head>nie są widoczne bezpośrednio na stronie, ale odgrywają kluczową rolę w działaniu witryny (SEO, szybkość ładowania, dostępność); - Na każdej stronie powinien występować tylko jeden znacznik
<title>oraz<base>; - Rzadziej używane (ale możliwe) są też np.
<meta http-equiv>, np. by definiować odświeżanie strony lub przekierowania; - Unikaj umieszczania elementów służących prezentacji treści (np. nagłówków
<h1>, paragrafów<p>) w sekcji<head>– te należą do sekcji<body>.
Znaczniki dedykowane części <head>
- title
- meta
- link
- style
- script
- base
- noscript
Każdy z opisanych znaczników ma określone zastosowanie i pozwala odpowiednio przygotować stronę do działania oraz poprawnie ją zidentyfikować przez użytkownika oraz przeglądarkę.
