Tutoriais CSS | Web Standards | Acessibilidade

Estrutura de cabeçalhos em uma página Web

Publicado em: 2006-04-1 — 23.489 visualizacoes

Logo WaSPedia

Esta matéria foi publicada originariamente na WaSPedia

O HTML contempla 6 níveis de cabeçalho para uso em um documento:
São os elementos H1, H2, H3, H4, H5, H6.

Proponho algumas questões que você leitor, provavelmente já deve ter feito a si mesmo.
Vamos a elas:

Posso usar mais de um H1 (cabeçalho nível 1) em uma mesma página?
E para os demais níveis H2, H3, H4, H5, H6 quantos posso usar em uma mesma página?
Posso omitir um nível entre dois outros, p. ex. H1-H3-H4?
Posso omitir o H1 (cabeçalho nível 1) e começar a página com H2 (cabeçalho nível 2)?
Posso construir uma página sem qualquer cabeçalho?
Posso construir uma página que contenha somente vários H1 (cabeçalho nível 1)?

São questões interessantes e relevantes para uma correta estruturação e funcionamento da página.

Vamos introduzir aqui um elemento HTML estranho ao assunto da matéria, mas que considero diretamente envolvido com ele, principalmente no sentido de não se fazer confusão ou interpretação equivocada com ele.
Trata-se do elemento TITLE do documento.
Vamos redobrar o cuidado de não confundir o elemento TITLE do documento com o Cabeçalho ou Título de uma seção do documento.
Por vezes a tradução direta do termo inglês title para o português título embora correta, poderá induzir a erros.
Cabeçalho ou Título de uma seção do documento em português vem da tradução do termo heading em inglês.
Resumindo: o elemento TITLE não é um cabeçalho no sentido estrito da palavra. É sim o título da página sendo indispensável e único no documento.
Títulos, sub-títulos, sub-sub-títulos,… são os elementos (headings) H1, H2, H3, H4, H5, H6.
Convencionamos então que para nos referir ao elemento TITLE usaremos os termos: título da página ou título do documento;
e para os elementos H1, H2, H3, H4, H5, H6 usaremos cabeçalho ou simplesmente título.

Que estrutura de cabeçalhos adotam os consagrados autores Web?

A seguir vamos examinar fragmentos do código fonte das páginas Web desenvolvidas por 3 consagrados autores, entusiastas e divulgadores das Web Standards, com a finalidade de verificar 3 diferentes maneiras de estruturar os cabeçalhos.

Site do W3C

A Home Page tem o seguinte código:


...
<body>

<h1 id="logo">
<img alt="The..(W3C)" height="48" width="315" src="/..." />
</h1>

<h2 id="slogan">Leading the Web to Its Full Potential...</h2>

<div>
...

O autor usou 1 H1, 15 H2 e 9 H3. No fluxo do documento aparece em primeiro lugar o elemento H1 seguido por elementos H2 e aninhados a estes os elementos H3.

Os cabeçalhos estão estruturados da seguinte maneira:

H1
  H2
  ...
  H2
    H3
    ...
    H3
  H2
  H2
  ...

Site Mezzoblue

A Home Page tem o seguinte fragmento de código:

...
<body class="homePage sidebarplease">
<div id="container">
<div id="intro">
<div id="pageHeader">

<h2><a href="/">mezzoblue</a></h2>
  
<h3>Design, Typography, ...Canada</h3>
  
<h4><abbr title="International ...;ISSN</abbr> 1708-0789</h4>

</div>
<hr class="hide" />
............
<div id="pagebody">
<div id="mainContent">
 
<h1>Recent Articles</h1>
 
 <div class="post ">
...

O autor usou 1 H1, 4 H2, 9 H3, e 2 H4. No fluxo do documento aparece em primeiro lugar o elemento H2 seguido pelos elementos H3 e H4 e na sequência aparece o elementos H1.

Os cabeçalhos estão estruturados da seguinte maneira:

  H2
    H3
      H4
H1
    ...
    H3
    H3  
      H4
      H4
  ...
  H2
  H2
  ...

As páginas individuais para os artigos segue a mesma estrutura.

Site A List Apart

A Home Page tem o seguinte fragmento de código:


<body class="" onload="">
<ul id="navbar">
....
/ul>

<h1 id="masthead">

<a href="/"><img src="/pix/... Apart:..." /></a>
</h1>

...
<div id="main">
<div id="content" class="column">

<h3 class="ishinfo">
March <b>07, 2006</b>
</h3>
...
<h4 class="title">
<a href="/articles/...Friction">Flywheels, ... Friction</a>
</h4>

<h5 class="byline">
by<a href="/authors/u/nickusborne">Nick Usborne</a>
</h5>
...

O autor usou 1 H1, 0 H2, 4 H3, 3 H4 e 2 H5. No fluxo do documento aparece em primeiro lugar o elemento H1 seguido pelos elementos H3 H4 e H5.

Os cabeçalhos estão estruturados da seguinte maneira:

Aqui convém notar que o autor omite o cabeçalho H2.

As páginas individuais para artigos têm o seguinte fragmento de código:


<body class="articles" onload="">
<ul id="navbar">
...
</ul>

<h1 id="masthead">
<a href="/"><img src="/pix/... Apart ..." /></a>
</h1>

<div id="ish">
...
</div>

<h1 class="title">
<a href="/articles/flywheelsandfriction">Flyw...ction</a>
</h1>

<h3 class="byline">by  
<a href="/authors/u/nickusborne">Nick Usborne</a>
</h3>

<ul id="metastuff">
...

O autor usou 2 H1, 10 H2, e 4 H3 No fluxo do documento aparece em primeiro lugar o elemento H1 seguido por outro elemento H1 que por sua vez é seguido pelo elemento H3.

Os cabeçalhos estão estruturados da seguinte maneira:

H1
H1
    H3
 H2
...
    H3
 H2  
 H2
 ...
 ...

Aqui convém notar que o autor usa dois cabeçalhos H1.

E agora? Qual é o certo?

Pelos levantamentos e pesquisas em códigos fonte que andei fazendo, selecionei os 3 sites tomados como exemplo e acredito que representam a maioria dos Web Sites Standards.
Algumas variações em torno das 3 estruturas poderão ser encontradas, mas não encontrei uma estrutura radicalmente contrária às apresentadas.

Analisando as estruturas apresentadas e tomando-as como válidas sob o ponto de vista das Web Standards você seria capaz de responder às 6 questões propostas no início da matéria?.

Consultemos a “Bíblia”

Consultando a seção para headings do documento Especificações para HTML 4.01do W3C extraí os seguintes textos que transcrevo traduzidos:

"Existem 6 níveis de cabeçalhos; começando com H1 (o mais importante) até H6 (o de menor importância)."

"O cabeçalho destina-se a fornecer uma breve descrição do conteúdo da seção que o sucede."

"Alguns consideram uma má prática ‘pular’ níveis de cabeçalho. Aceitam a sequência H1, H2, H1 mas não aceitam a sequência H1, H3, H1" pois aqui ‘pulou-se’ o nível H2"

A terceira citação em particular, combinada com as duas anteriores, responde às questões formuladas.
Ali o texto sugere que a estrutura de cabeçalhos depende exclusivamente do autor.
Você é livre para escolher a estrutura que considerar mais adequada ao seu documento.
Use quantos H1 forem necessários no seu documento, mas lembre-se que é fundamental considerar que existe uma hierarquia de importância dos 6 níveis.
Faça suas escolhas de cabeçalhos baseado na importância dos conteúdos da página e não confunda seus leitores e as tecnologias que acessam sua página com marcações impróprias à importância do conteúdo.
Na maioria das vezes, os conteúdos tendem a fluir em uma sequência na página, que acabam resultando em uma estrutura tipo "arrumadinha" com níveis menos importantes aninhados e seguindo-se a níveis mais importantes, contudo isto não é uma regra rígida, você decide a estrutura de cabeçalhos da sua página.

Atualizado em:2006-04-03 01:19 GMT

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-04-1 (sábado). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/04/01/estr-cabe/trackback no seu site.

11 comentários na matéria: “Estrutura de cabeçalhos em uma página Web”

Maurílio Silveira disse: 2017 - 07 - 4 4:21 GMT
Belíssima aula muito boa mesmo é sempre bom revisar para que ta meio enferrujado igual a mim. Muito bom saber as estruturas de cabeçalhos adotadas por consagrados autores web! Abç Maujor
wdlazaro disse: 2011 - 12 - 25 20:21 GMT
A minha maior dúvida em relação ás heading tags era em relação á sua hierarquia, valeu amigo, ajudou muito!
William disse: 2011 - 04 - 5 22:00 GMT
Nossa, sempre achei que só pudesse usar um unico H1 nas páginas, vivendo e aprendendo…
Bento Gonçalves disse: 2009 - 02 - 18 16:39 GMT
Grande Maujor, sempre solucionando minhas duvidas!!!
abraços!
Só nao gostei do nofollow no site! hehe
Romulo disse: 2009 - 01 - 14 13:03 GMT
Estou validando um site e por mais simples que fosse isso vinha me causando dor de cabeça. Porém quando fui validar novamente apareceu o seguinte erro: “Utilize elementos de cabeçalho de forma lógica, organizando o conteúdo de acordo com uma hierarquia.” Gostaria de saber o que posso fazer?
Tio_Wlad disse: 2007 - 07 - 2 19:17 GMT
++ Importante, Sir Google deixou de dar importancia a meta tags e parece ter uma certa facinação pelos elementos textuais colocados notadamente em h1 e h2. Já gostava da estruturação, agora ama o conteúdo também.
Acácio Arouche disse: 2007 - 03 - 31 17:22 GMT
Conclui-se que a estrutura 1,2 … 6 refere-se a caracteristicas (tamanho) do cabeçalho e não a sua ordem. No lay-out de uma pagina o tamanho é um indicativo de importância, mas temos outros como ordem, negrito, cor, contexto…
obrigado pelo seu trabalho de estudo e divulgação.
Acácio
João Ximenes disse: 2006 - 04 - 8 12:01 GMT
Muito bom! Também tenho muitas dúvidas em relação ao uso dos .
Uma delas, é se eu posso zerar o ‘nível’ em cada q eu crio.

Partindo do ponto de s são divisões, ou seções, dentro de uma mesma página, cada uma receberia seu ? Ou sigo a ordem da página como um todo??

Mas mt bom o artigo, muitas dúvidas já forma sanadas.

Abraços!
Lucas Alves disse: 2006 - 04 - 3 18:32 GMT
Muito bom artigo parabens.
Michael disse: 2006 - 04 - 3 1:01 GMT
Muito boa matéria, vale a pena ler e reler…
Felipe Ranieri disse: 2006 - 04 - 2 18:30 GMT
Bastante interessante, confesso que antes de chegar ao fim do artigo tive muitas dúvidas para responder às questões.
Abraços Maujor.