Guida HTML interattiva: Tag title

Q: Come cambio il titolo della pagina con JavaScript?

Assegna un valore a document.title, per esempio document.title = '(3) Inbox'. Il browser aggiorna subito la scheda, ed è così che le web app mostrano il numero di messaggi non letti.

Q: Il tag title è la stessa cosa dell'attributo title?

No. L'elemento dà il nome all'intera pagina. L'attributo title, che funziona su quasi ogni elemento, aggiunge un suggerimento (tooltip) che compare quando passi il mouse sopra quell'elemento.

Dove va il tag title

Ogni pagina ha bisogno di un elemento <title> dentro <head>. Il suo testo è il nome della pagina che i browser mostrano nella scheda e nei preferiti, e che i motori di ricerca di solito mostrano come titolo del risultato:

<!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>

Il titolo in sé non compare mai dentro la pagina. Questa anteprima gira anche all'interno della pagina della documentazione di Coddy, quindi la scheda del tuo browser continua a mostrare il titolo della documentazione; il piccolo script stampa ciò che mostrerebbe una scheda se aprissi l'esempio come file a sé. Modifica il testo in <title> e la riga si aggiorna.

Scrivere un buon titolo

Il titolo è spesso la prima cosa che una persona legge della tua pagina, in un risultato di ricerca o in una fila di schede. Poche regole bastano per la maggior parte delle pagine:

Sii specifico e unico. Ogni pagina di un sito dovrebbe avere un proprio titolo che la descriva: "Ricetta dei biscotti con gocce di cioccolato", non "Home" o "Pagina 1".
Metti prima le parole importanti. Le schede sono strette e i risultati di ricerca tagliano i titoli lunghi. Tieni la frase chiave nei primi 50-60 caratteri circa.
Aggiungi il nome del sito alla fine, separato da | o :, così l'argomento della pagina resta in testa.
Scrivilo per le persone. Un titolo pieno di parole chiave ripetute sembra spam, e i motori di ricerca potrebbero riscriverlo.

Questa scheda simulata taglia il titolo più o meno alla larghezza di una scheda vera. Prova un titolo più corto o più lungo:

<!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>

Con il nome del sito alla fine, una scheda tagliata mostra comunque di cosa parla la pagina. Inverti l'ordine ("Bake Club | How to...") e ogni scheda del tuo sito comincerebbe con le stesse due parole.

Tag title vs h1 vs attributo title

	Dove	Dove si vede	Compito
`<title>`	In `<head>`, una volta	Scheda, preferiti, risultati di ricerca	Dà il nome alla pagina
`<h1>`	In `<body>`	Nella pagina	Intestazione principale visibile
Attributo `title="..."`	Su qualsiasi elemento	Tooltip al passaggio del mouse	Indicazione in più su quell'elemento

Il title e l'<h1> di solito hanno lo stesso significato, ma il title può essere formulato per la ricerca e contenere il nome del sito, mentre l'intestazione può essere più breve. L'attributo title non c'entra nulla, nonostante il nome. Passa il mouse sulla parola sottolineata:

<!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>

I tooltip dell'attributo title non compaiono sugli schermi touch e gli screen reader non li leggono in modo affidabile, quindi non mettere informazioni importanti solo lì.

In un title va solo testo

Il browser legge tutto ciò che sta tra <title> e </title> come testo semplice. I tag non vengono interpretati, ma i riferimenti a caratteri come & vengono decodificati, e le sequenze di spazi si riducono a un solo spazio:

<!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>

Il risultato è Salt & Pepper <b>Bold?</b>: l'entità è diventata &, i tre spazi sono diventati uno e i tag <b> sono rimasti come caratteri letterali. In un title non si può mettere enfasi.

Cambiare il titolo con JavaScript

document.title si può leggere e scrivere. Le web app lo usano per mostrare nella scheda il numero di messaggi non letti o lo stato attuale:

<!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>

In una pagina vera la scheda del browser cambia nello stesso istante della scheda simulata qui. I motori di ricerca che eseguono JavaScript possono vedere un titolo impostato da uno script, ma un titolo scritto nell'HTML è la scelta affidabile per tutto ciò che deve essere indicizzato.

Errori comuni

Nessun title. Il browser ripiega sull'URL o sul nome del file, e la pagina non è HTML valido. Aggiungine uno a ogni pagina, accanto al tag meta viewport nel tuo template.
Lo stesso titolo su ogni pagina. Schede, preferiti e risultati di ricerca diventano impossibili da distinguere.
Mettere <title> in <body>. I browser lo usano lo stesso, ma il suo posto è in <head>, e alcuni strumenti non lo troveranno.
Due elementi <title>. Conta solo il primo. Togli gli altri.
Iniziare ogni titolo con il nome del sito. Apri con l'argomento della pagina; il nome del sito va alla fine.

Domande frequenti

Cos'è il tag title in HTML?

<title> imposta il nome della pagina. I browser lo mostrano nella scheda e nei preferiti, e i motori di ricerca di solito lo mostrano come titolo cliccabile del risultato. Va dentro <head> e contiene solo testo.

Quanto deve essere lungo il tag title?

I motori di ricerca tagliano i titoli lunghi in base alla larghezza sullo schermo, quindi tieni le parole importanti nei primi 50-60 caratteri circa. In HTML non c'è un limite rigido, ma tutto ciò che va oltre quel punto può finire nascosto dietro i puntini di sospensione.

Che differenza c'è tra il tag title e h1?

<title> è un metadato: dà il nome alla pagina nelle schede e nei risultati di ricerca e non viene mostrato dentro la pagina. <h1> è l'intestazione principale visibile nel body. Spesso dicono cose simili, ma il title può aggiungere il nome del sito ed essere formulato per la ricerca.

Posso mettere tag HTML dentro il tag title?

No. L'elemento title contiene solo testo. I tag al suo interno vengono mostrati alla lettera, quindi <title>A <b>B</b></title> dà una scheda con scritto "A <b>B</b>". I riferimenti a caratteri come & invece funzionano.

Come cambio il titolo della pagina con JavaScript?

Assegna un valore a document.title, per esempio document.title = '(3) Inbox'. Il browser aggiorna subito la scheda, ed è così che le web app mostrano il numero di messaggi non letti.

Il tag title è la stessa cosa dell'attributo title?

No. L'elemento <title> dà il nome all'intera pagina. L'attributo title, che funziona su quasi ogni elemento, aggiunge un suggerimento (tooltip) che compare quando passi il mouse sopra quell'elemento.

Concetti correlati