Semântica de Títulos

Por: Henrique Pereira

Categoria: HTML / CSS / JavaScript

Trabalhar com headings (títulos) é simples e tão necessário em um documento quanto qualquer outra tag. A utilização de títulos é de enorme importância na hora em que os mecanismos de busca, como o Google, vão indexar suas páginas. Escrevem-se títulos da seguinte maneira:


<h1>Exemplo de Título</h1>
<h2>Exemplo de Título</h2>
<h3>Exemplo de Título</h3>
<h4>Exemplo de Título</h4>
<h5>Exemplo de Título</h5>
<h6>Exemplo de Título</h6>


Como qualquer outra tag do XHTML, você pode e deve controlar toda a aparência de um título por CSS. Antes do HTML 4.01 existia o atributo "align" que é hoje inutilizado porque você deve controlar o posicionamento por CSS. Os atributos padrões para headings são somente os seguites: id, class, title, style, dir, lang, xml:lang.

O critério de escolha entre <h1>, <h2>, <h3>, <h4>, <h5>, <h6> é o de importância na página. Desde o título de um artigo que se inicia em uma página, por exemplo, até subtítulos e subtópicos, os títulos podem e devem ser usados ao invés de qualquer outra tag. É muito comum encontrar sites que usam <div> ou <p> como título ao invés dos headings.

Outra coisa a ser lembrada é que título não é um destaque qualquer. Veja por exemplo dois lugares onde você não deve usar títulos. Quando utilizar uma tabela e quiser dar um título a ela, você deve usar <caption> e não headings. <caption> é a tag correta para o título de uma tabela como eu expliquei no post Semântica de Tabelas. Quer dar um título para um conjunto de formulários para o seu site? Não use headings, use <legend>. Essas duas tags são "títulos" respectivamente para tabelas e conjunto de formulários (<filedset>). Quer usar uma imagem como título? Não tem problema, você pode usar uma técnica de CSS, como eu postei anteriormente, e colocar a imagem por estilos e no código fonte manter seus headings como texto para serem indexados pelos mecanismos de busca.

Artigos relacionados:

• Semântica de tabelas
• Semântica de Formulários
• Target Blank
• Language Tags
• Semântica de listagens
• A semântica do span e do div
• Acessibilidade, Validações e Mecanismos de Busca

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!