Dokumentacja HTML z przykładami: Znacznik title

Q: Jak zmienić tytuł strony w JavaScripcie?

Przypisz wartość do document.title, na przykład document.title = '(3) Inbox'. Przeglądarka od razu aktualizuje kartę i właśnie tak aplikacje webowe pokazują liczbę nieprzeczytanych wiadomości.

Q: Czy znacznik title to to samo co atrybut title?

Nie. Element nadaje nazwę całej stronie. Atrybut title, który działa na prawie każdym elemencie, dodaje podpowiedź widoczną po najechaniu kursorem na ten element.

Gdzie umieścić znacznik title

Każda strona potrzebuje jednego elementu <title> wewnątrz <head>. Jego tekst to nazwa strony, którą przeglądarki pokazują na karcie i w zakładkach, a wyszukiwarki zwykle jako nagłówek wyniku:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

Sam tytuł nigdy nie pojawia się na stronie. Ten podgląd działa też wewnątrz strony dokumentacji Coddy, więc karta przeglądarki dalej pokazuje tytuł dokumentacji; mały skrypt wypisuje to, co pokazałaby karta, gdyby otworzyć przykład jako osobny plik. Zmień tekst w <title>, a wiersz się zaktualizuje.

Jak napisać dobry tytuł

Tytuł to często pierwsza rzecz, jaką ktoś czyta o twojej stronie, w wynikach wyszukiwania albo w rzędzie kart. Kilka zasad wystarcza dla większości stron:

Pisz konkretnie i unikalnie. Każda strona w serwisie powinna mieć własny tytuł, który ją opisuje: "Przepis na ciasteczka z czekoladą", a nie "Strona główna" czy "Strona 1".
Ważne słowa daj na początek. Karty są wąskie, a wyniki wyszukiwania obcinają długie tytuły. Trzymaj kluczową frazę w pierwszych mniej więcej 50 do 60 znakach.
Nazwę serwisu dodaj na końcu, oddzieloną | lub :, żeby temat strony był pierwszy.
Pisz dla ludzi. Tytuł napchany powtarzanymi słowami kluczowymi wygląda jak spam, a wyszukiwarki mogą go przepisać.

Ta udawana karta obcina tytuł mniej więcej na szerokości prawdziwej karty. Wypróbuj krótszy lub dłuższy tytuł:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

Gdy nazwa serwisu jest na końcu, obcięta karta nadal pokazuje, o czym jest strona. Odwróć kolejność ("Bake Club | How to...") i każda karta z twojego serwisu zaczynałaby się od tych samych dwóch słów.

Znacznik title, h1 i atrybut title

	Gdzie	Gdzie widać	Zadanie
`<title>`	W `<head>`, raz	Karta, zakładki, wyniki wyszukiwania	Nadaje nazwę stronie
`<h1>`	W `<body>`	Na stronie	Główny widoczny nagłówek
Atrybut `title="..."`	Na dowolnym elemencie	Podpowiedź po najechaniu kursorem	Dodatkowa wskazówka o tym elemencie

Title i <h1> zwykle znaczą to samo, ale title można sformułować pod wyszukiwarki i dodać do niego nazwę serwisu, a nagłówek może być krótszy. Atrybut title, mimo nazwy, nie ma z tym nic wspólnego. Najedź kursorem na podkreślone słowo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

Podpowiedzi z atrybutu title nie pojawiają się na ekranach dotykowych, a czytniki ekranu nie odczytują ich niezawodnie, więc nie umieszczaj ważnych informacji tylko tam.

W title jest tylko tekst

Przeglądarka traktuje wszystko między <title> a </title> jako zwykły tekst. Znaczniki nie są interpretowane, ale odwołania do znaków, takie jak &, są dekodowane, a ciągi białych znaków zlewają się w jedną spację:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

Wynik to Salt & Pepper <b>Bold?</b>: encja zamieniła się w &, trzy spacje w jedną, a znaczniki <b> zostały jako dosłowne znaki. W tytule nie da się niczego wyróżnić.

Zmiana tytułu w JavaScripcie

document.title można odczytywać i zapisywać. Aplikacje webowe używają go, żeby pokazać na karcie liczbę nieprzeczytanych wiadomości albo bieżący stan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

Na prawdziwej stronie karta przeglądarki zmienia się w tej samej chwili co udawana karta tutaj. Wyszukiwarki, które uruchamiają JavaScript, widzą tytuł ustawiony przez skrypt, ale tytuł zapisany w HTML jest pewniejszym wyborem dla wszystkiego, co ma trafić do indeksu.

Częste błędy

Brak tytułu. Przeglądarka pokazuje wtedy adres URL lub nazwę pliku, a strona jest niepoprawnym HTML. Dodaj tytuł do każdej strony, obok znacznika meta viewport w swoim szablonie.
Ten sam tytuł na każdej stronie. Karty, zakładki i wyniki wyszukiwania stają się nie do odróżnienia.
<title> w <body>. Przeglądarki i tak go użyją, ale jego miejsce jest w <head>, a niektóre narzędzia go nie znajdą.
Dwa elementy <title>. Liczy się tylko pierwszy. Usuń pozostałe.
Nazwa serwisu na początku każdego tytułu. Zacznij od tematu strony; nazwa serwisu idzie na koniec.

Najczęściej zadawane pytania

Czym jest znacznik title w HTML?

<title> ustawia nazwę strony. Przeglądarki pokazują ją na karcie i w zakładkach, a wyszukiwarki zwykle wyświetlają ją jako klikalny nagłówek wyniku. Umieszcza się go w <head> i zawiera wyłącznie tekst.

Jak długi powinien być znacznik title?

Wyszukiwarki obcinają długie tytuły według szerokości na ekranie, więc najważniejsze słowa trzymaj w pierwszych mniej więcej 50 do 60 znakach. HTML nie ma sztywnego limitu, ale wszystko za tym punktem może zniknąć za wielokropkiem.

Czym różni się znacznik title od h1?

<title> to metadane: nazywa stronę na kartach i w wynikach wyszukiwania i nie jest widoczny na samej stronie. <h1> to widoczny główny nagłówek w body. Często mówią podobne rzeczy, ale title może zawierać nazwę serwisu i być sformułowany pod wyszukiwarki.

Czy mogę umieścić znaczniki HTML w znaczniku title?

Nie. Element title zawiera tylko tekst. Znaczniki w środku są wyświetlane dosłownie, więc <title>A <b>B</b></title> daje kartę z napisem "A <b>B</b>". Odwołania do znaków, takie jak &, działają.

Jak zmienić tytuł strony w JavaScripcie?

Przypisz wartość do document.title, na przykład document.title = '(3) Inbox'. Przeglądarka od razu aktualizuje kartę i właśnie tak aplikacje webowe pokazują liczbę nieprzeczytanych wiadomości.

Czy znacznik title to to samo co atrybut title?

Nie. Element <title> nadaje nazwę całej stronie. Atrybut title, który działa na prawie każdym elemencie, dodaje podpowiedź widoczną po najechaniu kursorem na ten element.

Powiązane zagadnienia