Semântica de Títulos

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.

  • Davis Zanetti Cabral

    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()

  • Matheus de Oliveira

    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+

  • http://avi.alkalay.net Avi Alkalay

    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()