Docs executáveis de HTML: Tag title

Q: Como mudar o título da página com JavaScript?

Atribua um valor a document.title, por exemplo document.title = '(3) Inbox'. O navegador atualiza a aba na hora, que é como os web apps mostram contagens de não lidos.

Q: A tag title é a mesma coisa que o atributo title?

Não. O elemento dá nome à página inteira. O atributo title, que funciona em quase qualquer elemento, adiciona uma dica que aparece quando você passa o mouse sobre esse elemento.

Onde fica a tag title

Toda página precisa de um elemento <title> dentro do <head>. O texto dele é o nome da página que os navegadores mostram na aba e nos favoritos, e que os buscadores normalmente mostram como título do resultado:

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

O title em si nunca aparece dentro da página. Esta prévia também roda dentro da página de docs da Coddy, então a aba do seu navegador continua mostrando o título das docs; o pequeno script imprime o que uma aba mostraria se você abrisse o exemplo como um arquivo próprio. Edite o texto em <title> e a linha é atualizada.

Escrevendo um bom título

O título costuma ser a primeira coisa que uma pessoa lê sobre a sua página, num resultado de busca ou numa fileira de abas. Algumas regras cobrem a maioria das páginas:

Seja específico e único. Cada página de um site deve ter o seu próprio título, que descreva aquela página: "Receita de cookies com gotas de chocolate", e não "Home" ou "Página 1".
Coloque as palavras importantes primeiro. As abas são estreitas e os resultados de busca cortam títulos longos. Mantenha a expressão principal nos primeiros 50 a 60 caracteres, mais ou menos.
Adicione o nome do site no fim, separado por | ou :, para que o assunto da página continue vindo primeiro.
Escreva para pessoas. Um título cheio de palavras-chave repetidas parece spam, e os buscadores podem reescrevê-lo.

Esta aba simulada corta o título mais ou menos na largura de uma aba real. Teste um título mais curto ou mais longo:

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

Com o nome do site no fim, uma aba cortada ainda mostra do que a página trata. Inverta a ordem ("Bake Club | How to...") e toda aba do seu site começaria com as mesmas duas palavras.

Tag title vs h1 vs atributo title

	Onde	Aparece	Função
`<title>`	No `<head>`, uma vez	Aba, favoritos, resultados de busca	Dá nome à página
`<h1>`	No `<body>`	Na página	Título principal visível
Atributo `title="..."`	Em qualquer elemento	Dica ao passar o mouse	Informação extra sobre aquele elemento

O title e o <h1> normalmente têm o mesmo sentido, mas o title pode ser escrito pensando na busca e levar o nome do site, enquanto o título da página pode ser mais curto. O atributo title não tem relação com eles, apesar do nome. Passe o mouse sobre a palavra sublinhada:

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

As dicas do atributo title não aparecem em telas de toque e não são lidas de forma confiável pelos leitores de tela, então não coloque informação importante só ali.

Só texto vai no title

O navegador lê tudo entre <title> e </title> como texto simples. As tags não são interpretadas, mas referências de caractere como & são decodificadas, e sequências de espaços viram um só:

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

O resultado é Salt & Pepper <b>Bold?</b>: a entidade virou &, os três espaços viraram um, e as tags <b> ficaram como caracteres literais. Não dá para dar ênfase num title.

Mudando o título com JavaScript

document.title pode ser lido e escrito. Os web apps o usam para mostrar contagens de não lidos ou o estado atual na aba:

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

Numa página real, a aba do navegador muda no mesmo momento que a aba simulada aqui. Buscadores que executam JavaScript conseguem ver um título definido por script, mas um título escrito no HTML é a escolha confiável para tudo o que deve ser indexado.

Erros comuns

Nenhum título. O navegador usa a URL ou o nome do arquivo, e a página é HTML inválido. Adicione um a toda página, ao lado da tag meta viewport no seu template.
O mesmo título em todas as páginas. Abas, favoritos e resultados de busca ficam impossíveis de diferenciar.
Colocar <title> no <body>. Os navegadores ainda o usam, mas o lugar dele é o <head>, e algumas ferramentas não vão encontrá-lo.
Dois elementos <title>. Só o primeiro conta. Remova os outros.
Começar todo título com o nome do site. Comece pelo assunto da página; o nome do site vai no fim.

Perguntas frequentes

O que é a tag title no HTML?

<title> define o nome da página. Os navegadores o mostram na aba e nos favoritos, e os buscadores normalmente o mostram como o título clicável do resultado. Ele fica dentro do <head> e contém só texto.

Qual deve ser o tamanho da tag title?

Os buscadores cortam títulos longos pela largura de exibição, então mantenha as palavras importantes nos primeiros 50 a 60 caracteres, mais ou menos. Não há limite fixo no HTML, mas o que passar desse ponto pode ficar escondido atrás de reticências.

Qual a diferença entre a tag title e o h1?

<title> é metadado: dá nome à página nas abas e nos resultados de busca e não aparece na própria página. <h1> é o título principal visível no body. Eles costumam dizer coisas parecidas, mas o title pode acrescentar o nome do site e ser escrito pensando na busca.

Posso colocar tags HTML dentro da tag title?

Não. O elemento title contém só texto. As tags dentro dele aparecem literalmente, então <title>A <b>B</b></title> gera uma aba com "A <b>B</b>". Referências de caractere como & funcionam.

Como mudar o título da página com JavaScript?

Atribua um valor a document.title, por exemplo document.title = '(3) Inbox'. O navegador atualiza a aba na hora, que é como os web apps mostram contagens de não lidos.

A tag title é a mesma coisa que o atributo title?

Não. O elemento <title> dá nome à página inteira. O atributo title, que funciona em quase qualquer elemento, adiciona uma dica que aparece quando você passa o mouse sobre esse elemento.

Conceitos relacionados