O elemento HTML mais importante em um documento Web

A seguir listei alguns elementos HTML e pergunto se você seria capaz de me dizer qual entre eles é o mais importante em um documento Web.

Responda consciente ou dê um ‘chute’ antes de rolar a tela para baixo e ver a resposta.

Listagem de elementos HTML:

  • p
  • blockquote
  • meta
  • h1
  • title
  • div
  • span
  • table
  • acronym
  • iframe

Se você respondeu com certeza, ou respondeu sem muita certeza ou ainda, se ‘chutou’ title, parabéns, você acertou!

O elemento title em HTML foi projetado para descrever um pequeno texto no documento com a finalidade de ser usado:

  • na barra de títulos da janela do documento;
  • em listas de favoritos (bookmarks);
  • nas listas de resultados, pelos sites de busca.

Cada documento HTML deve conter um elemento title colocado na seção head.

O uso do elemento title é para a identificação do conteúdo de uma página.
Assim o texto nele contido deverá descrever sumariamente o assunto tratado na página. Não esquecer que uma página isolada poderá ser acessada sem que o usuário conheça o restante do site e assim o texto que descreve o documento deverá ser suficientemente significativo para ser entendido fora do contexto do site como um todo.

Por exemplo:

<title>Introdução - Primeiros passos</title>

não é uma boa escolha pois contraria o princípio descrito acima.
Primeiros passos do quê? ou para quê?
Melhor seria:

<title>Layout sem tabelas, Introdução - Primeiros passos</title>

Por razões de acessibilidade os agentes de usuário (navegadores, dispositivos móveis, leitores de tela, etc.) devem disponibilizar o conteúdo de title para o usuário.
title pode conter caracteres especiais, devidamente codificados, mas não podem conter qualquer tipo de marcação.
O número máximo ideal de caracteres no texto descritivo de title é de 64 (sessenta e quatro).

Não se esqueça. O elemento HTML mais importante em uma página Web é o seu título title.

Maujor

Exerci o magistério paralelamente a minha carreira profissional por toda uma vida e ao longo destes trinta anos aprendi tanto quanto ensinei. Sou um apaixonado por Web Standards e desenvolvo o site de tutoriais CSS para Web Design.

View Comments

  • Ola´!

    Não sei se é errado mas uso a tag title para fazer aquela caixinha que aparece flutuando quando se passa o mouse sobre um elemento. é melhor do que usar o alt da microsoft que não funciona em todos os borwseres. Mas minha pergunta é: Como alterar a aparência da caixinha flutuante com css. Será que é possível?
    Se puder me responder ficarei agradecido.

    Atenciosamente:
    Marcos
    Torpedos Gratis para Vivo e Claro

  • gostaria de saber que um site de busca tipo o google....
    consegue ler as meta tags que estão dentro de um iframe....

    quem souber me vala por favor.....

    valeu

  • Olá Leandro
    Usar caracteres especiais tais como ç, ã, é, & etc. pode trazer inconsistência na renderização.
    Você poderá obter como resultado um ? ou algo mais estranho, além de poder causar problemas de parseamento e falhas de interpretação em XML.
    Assim, prefira sempre codificar os caracteres especiais.
    Leia: http://www.w3.org/International/questions/qa-escapes

  • Olá Maurício,

    Quando você diz:

    "...title pode conter caracteres especiais, devidamente codificados,..."

    Você quer dizer, que isto é errado:

    <title>Texto sem codificação</title>

    É esta forma é correta:

    <title>Texto sem codificação</title>

    Quais os pós e contra de uma e do outro? Obrigado.

  • Eu calculai que seria a tag meta...
    bola fora :-(
    Não tinha me ligado na importância óbvia da tag title.
    Valeu!

  • Apesar de ter acertado com certeza - não no chute - vou anotar todo o conteúdo do post no meu PDA onde tenho muitas outras, para futuras referências. Está muito bem explicado!
    Maurício, estou estudando - mesmo que por conta própria - standards e seu site (e agora o blog) são minhas referências preferidas, além do artífice da web. Conhece ? Recomendo passar por lá, caso não conheça!

    Farley Rangel

Share
Published by
Maujor

Recent Posts

Teste seu conhecimento #20

Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…

7 anos ago

Teste seu conhecimento #19

Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…

9 anos ago

JavaScript bubbling e capturing

Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…

10 anos ago

HTML5 – W3C versus WHATWG

HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…

10 anos ago

Seria esse o futuro das imagens responsivas?

Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…

10 anos ago

BrazilJS Conf 2013

Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…

11 anos ago