--- title: Seções e estrutura de um documento HTML5 slug: Sections_and_Outlines_of_an_HTML5_document translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---

Importante: Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou user agents de tecnologia assistiva, apesar disso o algorítmo é implementado em outro software como em verificadores de conformidade. Assim, ao algorítmo de estrutura não pode ser confiada a entrega da estrutura do documento para os usuários. Autores são aconselhados a usar níveis de cabeçalho (h1-h6) para transmitir a estrutura do documento.

A especificação HTML5 traz diversos novos elementos aos desenvolvedores web, permitindo-os descrever a estrutura de um documento web com semânticas padronizadas. Este documento descreve esses elementos e como utilizá-los para definir a estrutura desejada para qualquer documento.

Estrutura de um documento em HTML4

A estrutura de um documento, ou seja, a estrutura semântica do que está entre <body> e </body>, é fundamental para a apresentação da página ao usuário. O HTML4 usa a noção de seções e subseções de um documento para descrever sua estrutura. Uma seção é definida por um Elemento HTML de Divisão ({{ HTMLElement("div") }}) com Elementos HTML de Cabeçalho ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, ou {{ HTMLElement("h6") }}) dentro de si, definindo seu título. As relações desses elementos levam à estrutura do documento.

Então a seguinte marcação:

<div class="section" id="elefantes-da-floresta" >
<h1>Elefantes da floresta</h1>
<p>Nesta seção, discutiremos os poucos conhecidos elefantes da floresta.
...esta seção continua...
<div class="subsection" id="floresta-habitat">
<h2>Habitat</h2>
<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
...esta subseção continua...
</div>
</div>

leva à seguinte estrutura (sem os marcadores 1. e 1.1 de nível) :

1. Elefantes da floresta
   1.1 Habitat

Os elementos {{ HTMLElement("div") }} não são obrigatórios para definir uma nova seção. A mera presença de um Elemento de Cabeçalho HTML é suficiente para implicar uma nova seção. Portanto,

<h1>Elefantes da floresta</h1>
<p>Nesta seção, discutiremos os pouco conhecidos elefantes da floresta.
...esta seção continua...
<h2>Habitat</h2>
<p>Os elefantes da floresta não vivem em árvores mas sim entre elas.
...esta subseção continua...
<h2>Dieta</h2>
<h1>Esquilo da mongólia</h1>

leva à:

1. Elefantes da floresta
   1.1 Habitat
   1.2 Dieta
2. Esquilo da mongólia

Problemas resolvidos pelo HTML5

A definição HTML 4 da estrutura de um documento e seu algoritmo de estruturação implícita é muito irregular e leva a inúmeros problemas:

O uso do {{HTMLElement("div")}} para definir seções semânticas, sem definir valores específicos para o atributo class torna a automação do algoritmo de saída inviável ("Este{{HTMLElement("div")}}é parte da estrutura da página, definindo uma seção ou uma subsseção?" ou "é apenas um {{HTMLElement("div")}} representativo, usado apenas para definição de estilo?"). Em outras palavras, a perspectiva do HTML4 é muito imprecisa em relação a o que é uma seção e como seu escopo é definido. Geração automática de estrutura é importante, especialmente para tecnologias assistivas, que são apropriadas para adaptar a forma de apresentação da informação para os usuários de acordo com a estrutura do documento. O HTML5 elimina a necessidade dos elementos {{HTMLElement("div")}} do algoritmo de estruturação introduzindo um novo elemento, O {{HTMLElement("section")}}, o elemento de Seção do HTML.
Mesclar diversos documentos é uma tarefa complicada: a inclusão de um subdocumento em um documento principal significa pequenas alterações nos elementos de cabeçalho de modo que a estrutura geral do novo documento continue sólida. Isso é resolvido no HTML5 com a introdução dos elementos de seção ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} e {{HTMLElement("aside")}}), que são sempre subseções das seções ancestrais mais próximas, independentemente das seções criadas pelos elementos de cabeçalhos internos de cada subseção.
No HTML4, toda seção é parte da estrutura do documento. Mas documentos não lineares são frequentes. Um documento pode ter seções especiais contendo informações que não fazem parte, a não ser que seja relatado, do conteúdo principal, como um bloco de avisos ou uma caixa de explicação. O HTML5 introduz o elemento {{HTMLElement("aside")}}, permitindo assim que tal seção não seja parte da estrutura principal do documento.
Novamente, no HTML4 pelo fato de todas as seções semânticas com a tag {{HTMLElement("div")}} fazerem parte da estrutura do documento, não há formas de haver seções que contenham informações relacionadas não ao documento em si, mas ao site no geral, como logos, menus, tabelas de conteúdos, copyright ou avisos legais. Com esse propósito, o HTML5 introduz três novos elementos: {{HTMLElement("nav")}} para coleções de links (tal como uma tabela de conteúdos), {{HTMLElement("footer")}} e {{HTMLElement("header")}} para informações relacionadas ao site. Perceba que {{HTMLElement("footer")}} e {{HTMLElement("header")}} não são conteúdos de seção como o {{HTMLElement("section")}}, ao invés disso, eles existem para delimitar semanticamente partes de uma seção.

Resumindo, o HTML5 traz precisão às divisões do documento em seções e aos recursos de cabeçalho, permitindo que a estrutura seja previsível e possa ser usada para melhorar a experiência do usuário.

The HTML5 Outline Algorithm

Definindo seções em HTML5

Todo conteúdo que está dentro do elemento {{ HTMLElement("body") }} é parte de uma seção. Seções em HTML5 podem ser encaixadas(aninhadas). Com base na seção principal, definida pelo elemento {{ HTMLElement("body") }}, section os limites são definidos tanto explicitamente ou implicitamente. Explicitly-defined sections are the content within {{ HTMLElement("body") }}, {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("header") }}, and {{ HTMLElement("nav") }} tags.

Nota: Cada seção pode ter sua própria hierarquia de cabeçalho {{ HTMLElement("h1") }}. Veja D efinindo cabeçalhos com HTML5.

Exemplo:

<section>
  <h1>Elefantes da floresta</h1>
  <section>
    <h1>Introdução</h1>
    <p>Nesta seção, nós discutimos os menores elefantes florestais conhecidos.<p>
  </section>
  <section>
    <h1>Habitat</h1>
    <P>Elefantes florestais não vivem em árvores mas entre eles.</p>
  </section>
  <aside>
    <p>Bloco publicitário</p>
  </aside>
</section>
<footer>
  <p>(c) 2010 O Exemplo de empresa</p>
</footer>

Esse snippet HTML define duas seções de nível superior:

 <section>
  <h1> Elefantes da floresta </h1>
  <section>
    <h1> Introdução </h1>
    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.</p>
  </section>
  <section>
    <h1> Habitat </h1>
    <p>Os elefantes da floresta não vivem em árvores, mas entre eles.</p>
  </section>
  <aside>
    <p> bloco de publicidade</p>
  </aside>
</section>
<footer>
  <p> (c) 2010 A empresa exemplo</p>
</footer>

A primeira seção possui três subseções:

<section>
   <h1>Forest elephants</h1>
   <section>
     <h1>Introduction</h1>
     <p>In this section, we discuss the lesser known forest elephants.
   </section>
   <section>
     <h1>Habitat</h1>
     <P>Forest elephants do not live in trees but among them.
   </section>
   <aside>
     <p>advertising block
   </aside>
 </section>
 <footer>
   <p>(c) 2010 The Example company
 </footer>

Isso leva à seguinte estrutura:

1. Forest elephants
   1.1 Introduction
   1.2 Habitat
   1.3 Section (aside)

Definindo cabeçalho com HTML5

Enquanto os elementos de corte em HTML definem a estrutura do documento, um esboço também precisa de títulos para ser útil. A regra básica é simples: o primeiro elemento de cabeçalho HTML (um de {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) define o cabeçalho da seção atual.

Os elementos de cabeçalho têm uma classificação fornecida pelo número no nome do elemento, onde {{HTMLElement ("h1")}} tem a classificação mais alta e {{HTMLElement ("h6")}}} tem a classificação mais baixa. A classificação relativa é importante apenas dentro de uma seção; a estrutura das seções determina o contorno, não a classificação do cabeçalho das seções. Por exemplo, este código:

<section>
  <h1>Forest elephants</h1>
  <p>In this section, we discuss the lesser known forest elephants.
     ...this section continues...
  <section>
     <h2>Habitat</h2>
     <p>Forest elephants do not live in trees but among them.
        ...this subsection continues...
  </section>
</section>
<section>
  <h3>Mongolian gerbils</h3>
  <p>In this section, we discuss the famous mongolian gerbils.
     ...this section continues...
</section>

leva ao seguinte esboço:

1. Elefantes da floresta
   1.1 Habitat
2. Gerbos da Mongólia

Observe que a classificação do elemento de cabeçalho (no exemplo {{HTMLElement ("h1")}}} para a primeira seção de nível superior, {{HTMLElement ("h2")}} para a subseção e {{HTMLElement ("h3 ")}} para a segunda seção de nível superior) não é importante. (Qualquer classificação pode ser usada como cabeçalho de uma seção definida explicitamente, embora essa prática não seja recomendada.)

Seção implícita

Como os Elementos de Seção HTML5 não são obrigatórios para definir um esboço, para manter a compatibilidade com a Web existente dominada pelo HTML4, existe uma maneira de definir seções sem eles. Isso é chamado de corte implícito.

Os elementos de cabeçalhos HTML ({{HTMLElement ("h1")}} a {{HTMLElement ("h6")}}) definem uma nova seção implícita quando eles não são o primeiro cabeçalho de suas seções pai, explícitas. A maneira como esta seção implícita é posicionada no contorno é definida por sua classificação relativa com o cabeçalho anterior na seção pai. Se tiver uma classificação inferior à do título do cabeçalho anterior, abrirá uma subseção implícita da seção. Este código:

<section>
  <h1> Elefantes da floresta </h1>
  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
    ... esta seção continua ...
  <h3 class = "subseção implícita"> Habitat </h3>
    <p>Os elefantes da floresta não vivem em árvores, mas entre elas.
      ... esta subseção continua ...</p>
</section>

levando ao seguinte esboço:

1. Elefantes da floresta
   1.1 Habitat (definido implicitamente pelo elemento h3)

Se for da mesma classificação que o título do cabeçalho anterior, fecha a seção anterior (que pode ter sido explícita!) e abre uma nova implícita no mesmo nível:

<section>
  <h1> Elefantes da floresta </h1>
  <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
    ... esta seção continua ...
  <h1 class = "seção implícita"> Gerbos da Mongólia </h1>
  <p>Os gerbos da Mongólia são pequenos mamíferos fofos.
    ... esta seção continua ...</p>
</section>

levando ao seguinte esboço:

1. Elefantes da floresta
2. Gerbos da Mongólia (implicitamente definidos pelo elemento h1, que fechou a seção anterior ao mesmo tempo)

Se tiver uma classificação mais alta que o título do cabeçalho anterior, fecha a seção anterior e abre uma nova implícita no nível mais alto:

<body>
  <h1> Mamíferos </h1>
  <h2> Baleias </h2>
  <p> Nesta seção, discutimos as baleias nadadoras.
    ... esta seção continua ...</p>
  <section>
    <h3> Elefantes da floresta </h3>
    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos.
      ... esta seção continua ...</p>
    <h3> Gerbos da Mongólia </h3>
      <p> Hordas de gerbos se espalharam muito além da Mongólia.
        ... esta subseção continua ...</p>
    <h2> Répteis </h2>
      <p>Répteis são animais com sangue frio.
        ... esta subseção continua ...</p>
  </section>
</body>

levando ao seguinte esboço:

1. Mamíferos
   1.1 Baleias (definidos implicitamente pelo elemento h2)
   1.2 Elefantes da floresta (definidos explicitamente pelo elemento de seção)
   1.3 Gerbos da Mongólia (implicitamente definidos pelo elemento h3, que fecha a seção anterior ao mesmo tempo)
   1.4 Répteis (definidos implicitamente pelo elemento h2, que fecha a seção anterior ao mesmo tempo)

Este não é o esquema que se pode esperar olhando rapidamente para as tags de cabeçalho. Para tornar sua marcação compreensível por humanos, é uma boa prática usar tags explícitas para abrir e fechar seções e corresponder a classificação do cabeçalho ao nível de aninhamento de seção pretendido. No entanto, isso não é exigido pela especificação do HTML5. Se você achar que os navegadores estão processando o esboço do documento de maneiras inesperadas, verifique se há seções que estão implicitamente fechadas pelos elementos de cabeçalho.

Uma exceção à regra geral de que a classificação do cabeçalho deve corresponder ao nível de aninhamento de seção é para seções que podem ser reutilizadas em vários documentos. Por exemplo, uma seção pode ser armazenada em um CMS (Content Management System) e montada em documentos em tempo de execução. Nesse caso, uma boa prática é começar em {{HTMLElement ("h1")}} para o nível de cabeçalho superior da seção reutilizável. O nível de aninhamento da seção reutilizável será determinado pela hierarquia da seção do documento em que ela aparece. Tags de seção explícitas ainda são úteis nesse caso.

Sobrepondo seções implícitas

Às vezes, uma seção precisa ter vários títulos. Alguns casos comuns são:

uma seção sobre um livro ou filme que possui um título secundário:

<section>
  <h1> Justine </h1>
  <h2> Os Infortúnios da Virtude </h2>
</section>

leva ao seguinte esboço:

1. Justine
   1.1 Os Infortúnios da Virtude

o cabeçalho secundário pode ser usado para uma lista de tags:

<section>
  <h1> Seção e esboços de um documento </h1>
  <h2> HTML, HTML5, seções, contornos </h2>
</section>

levando ao seguinte esboço:

1. Seção e linhas gerais de um documento
   1.1 HTML, HTML5, Seções, Esboços

Devido ao corte implícito, isso não é possível sem a ajuda do Elemento do Grupo de Cabeçalhos HTML ({{HTMLElement ("hgroup")}} introduzido no HTML5). Ele oculta todos os títulos de cabeçalhos do esboço, exceto o primeiro, permitindo uma substituição do corte implícito. Com esse elemento, o exemplo do livro secundário:

<section>
  <hgroup>
    <h1>Justine</h1>
    <h2>Les Malheurs de la vertu</h2>
  </hgroup>
</section>

leads to the following outline:

1. Justine

Caminhos de seção

Uma raiz de seção é um elemento HTML que pode ter seu próprio esboço, mas as seções e os títulos de cabeçalho dentro deles não contribuem para o esboço de seus ancestrais. Ao lado de {{HTMLElement ("body")}}, que é a raiz de seção lógica de um documento, geralmente são elementos que introduzem conteúdo externo na página: {{HTMLElement ("blockquote")}}, {{HTMLElement ("detalhes ")}}, {{HTMLElement (" fieldset ")}}, {{HTMLElement (" figura ")}} e {{HTMLElement (" td ")}}.

Exemplo:

<section>
  <h1> Elefantes da floresta </h1>
  <section>
    <h2> Introdução </h2>
    <p> Nesta seção, discutiremos os elefantes da floresta menos conhecidos</p>
  </section>
  <section>
    <h2> Habitat </h2>
    <p>Os elefantes da floresta não vivem em árvores, mas entre eles. Vamos
      veja o que os cientistas estão dizendo em "<cite> O elefante da floresta em Bornéu </cite>":
    <blockquote>
      <h1> Bornéu</h1>
      <p> O elemento florestal vive em Bornéu ...</p>
    </blockquote>
  </section>
</section>

Este exemplo resulta no seguinte esboço:

1. Elefantes da floresta
   1.1 Introdução
   1.2 Habitat

Este esboço não contém o esboço interno do elemento {{HTMLElement ("blockquote")}}, que, sendo uma citação externa, é uma raiz de seção e isola seu esboço interno.

Seções de fora da estrutura

O HTML5 apresenta quatro novos elementos que permitem definir seções que não pertencem ao esquema principal de um documento da web:

O elemento HTML Aside Section ({{HTMLElement ("apart")}})) define uma seção que, embora relacionada ao elemento principal, não pertence ao fluxo principal, como uma caixa de explicação ou um anúncio. Ele tem seu próprio esboço, mas não pertence ao principal.
O elemento de seção de navegação HTML ({{HTMLElement ("nav")}}) define uma seção que contém links de navegação. Pode haver vários deles em um documento, por exemplo, um com links internos da página, como uma tabela de conteúdo, e outro com links de navegação no site. Esses links não fazem parte do fluxo e estrutura de tópicos principais e geralmente não podem ser renderizados inicialmente pelo leitor de tela e tecnologia assistida semelhante.
O elemento da seção de cabeçalho HTML ({{HTMLElement ("header")}}) define um cabeçalho da página, geralmente contendo o logotipo e o nome do site e, possivelmente, um menu horizontal. Apesar do nome, ele não está necessariamente posicionado no início da página.
O elemento HTML da seção do rodapé ({{HTMLElement ("rodapé")}}) define um rodapé da página, normalmente contendo os direitos autorais e legais observados e algumas vezes alguns links. Apesar do nome, ele não está necessariamente posicionado na parte inferior da página.

Endereços e horário de publicação nos elementos de seção

O autor de um documento geralmente deseja publicar algumas informações de contato, como o nome e o endereço do autor. O HTML4 permitiu isso por meio do elemento {{HTMLElement ("address")}}, que foi estendido no HTML5.

Um documento pode ser feito de seções diferentes de diferentes autores. Uma seção de outro autor que não a da página principal é definida usando o elemento {{HTMLElement ("article")}}. Consequentemente, o elemento {{HTMLElement ("address")}} agora está vinculado ao seu ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

Da mesma forma, o novo elemento HTML5 {{HTMLElement ("time")}}, com seu conjunto de atributos booleanos {{htmlattrxref ("pubdate", "time")}}, representa a data de publicação associada ao documento inteiro, respectivamente ao artigo, relacionado ao ancestral mais próximo {{HTMLElement ("body")}} ou {{HTMLElement ("article")}}.

Usando elementos HTML5 em navegadores não-HTML5

Os elementos de seções e títulos devem funcionar na maioria dos navegadores não HTML5. Embora não sejam suportados, eles não precisam de uma interface DOM (Document Object Model) especial e precisam apenas de um estilo CSS específico, pois elementos desconhecidos são estilizados como display: inline por padrão:

section, article, aside, footer, header, nav, hgroup {
  display:block;
}

É claro que o Desenvolvedor Web pode estilizá-los de maneira diferente, mas lembre-se de que em um navegador que não dar suporte ao HTML5, o estilo padrão é diferente do esperado para esses elementos. Observe também que o elemento {{HTMLElement ("time")}} não foi incluído, porque o estilo padrão para ele em um navegador que não suporta HTML5 é o mesmo que em um navegador compatível com HTML5.

Esse método tem sua limitação, pois alguns navegadores não permitem o estilo de elementos não suportados. Que é o caso do Internet Explorer (versão 8 e anterior), que precisa de um script específico para permitir isso:

<!--[if lt IE 9]>
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section");
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article");
    document.createElement("hgroup" );
    document.createElement("time"   );
  </script>
<![endif]-->

Esse script significa que, no caso do Internet Explorer (8 e versões anteriores), o script deve ser ativado para exibir os elementos de seção e títulos do HTML5 corretamente. Caso contrário, eles não serão exibidos, o que pode ser problemático, pois esses elementos provavelmente definem a estrutura da página inteira. É por isso que um elemento explícito {{HTMLElement ("noscript")}} deve ser adicionado para este caso:

<noscript>
  <strong> Aviso! </strong>
  Como o seu navegador não suporta HTML5, alguns elementos são simulados usando o JScript.
  Infelizmente, seu navegador desativou o script. Ative-o para exibir esta página.
</noscript>

Isso leva ao código a seguir para permitir o suporte das seções e elementos dos cabeçalhos HTML5 em navegadores que não suportam HTML5, mesmo para o Internet Explorer (8 e versões anteriores), com um plano b adequado para o caso em que este último navegador está configurado para não usar scripts :

<!--[if lt IE 9]>
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section");
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article");
    document.createElement("hgroup" );
    document.createElement("time"   );
  </script>
  <noscript>
     <strong>Aviso !</strong>
     Seu navegador web não suporta HTML5, e devido a isso alguns recursos são simulados usando JScript.
     Infelizmente seu navegador desativou a execução de scripts. Por favor ative esse recurso para que esta página seja exibida corretamente.
  </noscript>
<![endif]-->

Conclusão

Os novos elementos de seção e cabeçalho introduzidos no HTML5 trazem consigo a habilidade de descrever a estrutura de um documento web de modo padronizado. Eles trazem uma grande vantagem para pessoas com navegadores HTML5 e que precisam da estrutura para ajudá-las a entender a página, por exemplo pessoas que utilizam alguma tecnologia assistiva. Esses novos elementos semânticos são simples de usar e, com pouquíssimo trabalho, podem funcionar também em navegadores não-HTML5. Portanto eles devem ser utilizados sem restrição.

{{ languages( {"es": "/es/Secciones_y_esquema_de_un_documento_HTML_5", "ja": "ja/Sections_and_Outlines_of_an_HTML5_document"}) }}