Semântica de Títulos

Por: Henrique C. Pereira

Publicado em Friday 09 September 2005 às 15:59

Categoria: 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

  1. Davis Zanetti Cabral Thursday 13 October 2005 às 09:22

    Muito legal o site e os textos.

    Só uma errata:

    (…) de formulários (). (…)

    O correto não seria fieldset? ;)

    abraços!

  2. Pingback: Para que servem as estruturas aninhadas? » Revolução

  3. Matheus de Oliveira #1° Tuesday 19 June 2007 às 15:42

    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+

  4. Avi Alkalay #2° Saturday 27 October 2007 às 09:20

    Henrique, no último parágrafo, onde vc diz "< filedset >", acho que quis dizer "< fieldset >".

  5. Pingback: » Tableless, o termo maldito ? | Igor Escobar // Blog | Desenvolvimento, Tecnologia e Informação, na ponta do lápis.

  6. Pingback: Tableless, o termo maldito ? « Igor Escobar // Blog

Deixe seu comentário:

Observação: Todos os campos obrigatórios estão marcados com um asterisco (*).

  1. As seguintes tags podem ser inseridas nos comentários: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Sobre este blog

Meu nome é Henrique C. Pereira e o Revolução Etc é o meu blog pessoal. Eu trabalho com design de interfaces, dispositivos móveis, planejamento de soluções web, arquitetura da informação, programação de interfaces, acessibilidade, padrões web, e-commerce e outras coisas relacionadas.
Leia mais sobre o autor.