Semântica de Títulos
Por: Henrique C. Pereira
Publicado em Friday 09 September 2005 às 15:59Categoria: HTML/CSS/JScript
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.
Comentários dos leitores
Este artigo possui 6 comentários
Muito legal o site e os textos.
Só uma errata:
(…) de formulários (). (…)
O correto não seria fieldset? ;)
abraços!
Pingback: Para que servem as estruturas aninhadas? » Revolução
Belo artigo, me esclareceu um pouco melhor as idéias…
Mas ainda tenho uma dúvida (posso perguntar aqui?), por exemplo, num site, tenho o "título" do site, e tenho no conteúdo dele o(s) "título(s)" dos textos, artigos, postes, etc…
Seria semântico usar para ambos os títulos a tag H1?
Ou no título do site (aquele que aparece em toda página igual) eu não devo usar as tags Hx?
Ou ainda, devo colocar H1 no título do site e H2 nos demais? Ou o inverso, já que o título do site, na minha opinião, não se torna mais importante sem o conteúdo?
Desculpe o monte de pergunta, mas a resposta é uma só, né?
Fico feliz se puder me mandar um e-mail respondendo, ou postar algo sobre o assunto no blog (o que já não acho tão importante)…
Vlw cara, vc é fera…t+
Henrique, no último parágrafo, onde vc diz "< filedset >", acho que quis dizer "< fieldset >".
Pingback: » Tableless, o termo maldito ? | Igor Escobar // Blog | Desenvolvimento, Tecnologia e Informação, na ponta do lápis.
Pingback: Tableless, o termo maldito ? « Igor Escobar // Blog