Semântica de Títulos
Por:
Sexta-feira 09 Setembro 2005 às 15:59Categoria: 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 Formulários
- Semântica de tabelas
- Target Blank
- Semântica de listagens
- Hyperlinks
- Language Tags
- Introdução a Semântica Web
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!
O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.
# 1° Davis Zanetti Cabral Quinta-feira 13 Outubro 2005 às 12:22GMT
Muito legal o site e os textos.
Só uma errata:
(…) de formulários (). (…)
O correto não seria fieldset? ;)
abraços!