Znacznik HTMLStruktura dokumentu

<title>

Tytuł dokumentu widoczny na karcie przeglądarki, w zakładkach i jako nagłówek wyniku w wyszukiwarce.

Wyświetlanie
none
Znacznik zamykający
Wymagany
Dozwolona zawartość
Tylko tekst (znaczniki nie są interpretowane)
Na tej stronie

Przykład

#
HTML
<head>
  <meta charset="utf-8">
  <title>Tabele w HTML: kurs krok po kroku | CodeWorlds</title>
</head>

Definicja i zastosowanie

#

Element <title> nadaje stronie tytuł. Nie widać go w treści, ale pojawia się w wielu innych miejscach: na karcie przeglądarki, w historii, jako domyślna nazwa zakładki i zwykle jako klikalny nagłówek wyniku w Google. Czytnik ekranu odczytuje go jako pierwszą informację po otwarciu strony.

Każdy dokument HTML musi mieć dokładnie jeden <title>, umieszczony w <head>. W środku może być wyłącznie tekst. Znaczniki, na przykład <b>, nie zadziałają, tylko wyświetlą się dosłownie. Encje znakowe, takie jak &amp;, są natomiast zamieniane na odpowiednie znaki.

Dobry tytuł jest krótki, unikalny dla każdej podstrony i zaczyna się od tego, co najważniejsze. Nazwę serwisu dopisz na końcu, np. „Tabele w HTML: kurs krok po kroku | CodeWorlds”. Wyszukiwarki ucinają zbyt długie tytuły, więc kluczowe słowa nie powinny czekać na koniec.

Tytuł strony i nagłówek <h1> nie muszą być identyczne. <title> opisuje stronę na zewnątrz, na przykład w wynikach wyszukiwania, a <h1> wita użytkownika, który już na nią wszedł.

Składnia

#
Składnia
<title>Tytuł strony</title>

Atrybuty

#

Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.

Więcej przykładów

#
Zmiana tytułu z poziomu JavaScriptu
HTML
<script>
  const unread = 3;
  document.title = '(' + unread + ') Wiadomości | CodeWorlds';
</script>

Tak aplikacje pokazują na karcie liczbę nieprzeczytanych wiadomości. W aplikacjach jednostronicowych (SPA) aktualizuj tytuł przy każdej zmianie widoku.

Domyślny CSS

#

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS
title {
  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

#
  • Każda podstrona powinna mieć własny, opisowy tytuł. Dziesięć kart o nazwie „Strona główna” to udręka dla kogoś, kto ma ich otwartych wiele naraz.
  • Nie upychaj w tytule listy słów kluczowych. Pisz dla ludzi, a wyszukiwarki to docenią.
  • Jeśli strona pokazuje błąd albo wynik akcji, np. „Nie znaleziono strony” czy „Formularz zawiera błędy”, uwzględnij to w tytule.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.