Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Os seus resultados da pesquisa

    Seções e estrutura de um documento HTML5

    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 (<div>) com Elementos HTML de Cabeçalho (<h1>, <h2>, <h3>, <h4>, <h5>, ou <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:

    1. Elefantes da floresta
   1.1 Habitat

    Os elementos <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 difícil e leva a inúmeros problemas:

    1. O uso do <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<div>é parte  da estrutura da página, definindo uma seção ou uma subsseção?" ou "é apenas um  <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 <div> do algoritmo de estruturação introduzindo um novo elemento, O  <section>, o elemento de Seção do HTML. 
    2. 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 (<article>, <section>, <nav> e <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.
    3. 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 <aside>, permitindo assim que tal seção não seja parte da estrutura principal do documento.
    4. Novamente, no HTML4 pelo fato de todas as seções semânticas com a tag <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: <nav> para coleções de links (tal como uma tabela de conteúdos), <footer> e <header> para informações relacionadas ao site. Perceba que <footer> e <header> não são conteúdos de seção como o <section>, ao invés disso, eles existem para delimitar semanticamente partes de uma seção.

     

    Resumindo, o HTML5 trás 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 <body>  é parte de uma seção. Sections in HTML5 can be nested. Beside the main section, defined by the <body> element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within <body>,  <section>,  <article>,  <aside>, <footer>,  <header>, and <nav> tags. 

    Note: Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>. See Defining Headings in HTML5.

    Exemplo:

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

    This HTML snippet defines two top-level sections:

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

    The first section has three subsections:

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

    This leads to the following structure:

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

    Defining Headings in HTML5

    While the HTML Sectioning elements define the structure of the document, an outline also needs headings to be useful. The basic rule is simple: the first HTML heading element (one of <h1>, <h2>, <h3>, <h4>, <h5>, <h6>) defines the heading of the current section.

    The heading elements have a rank given by the number in the element name, where <h1> has the highest rank, and <h6> has the lowest rank. Relative ranking matters only within a section; the structure of the sections determines the outline, not the heading rank of the sections. For example, this code:

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

    leads to the following outline:

    1. Forest elephants
   1.1 Habitat
2. Mongolian gerbils

    Note that the rank of the heading element (in the example <h1> for the first top-level section, <h2> for the subsection and <h3> for the second top-level section) is not important. (Any rank can be used as the heading of an explicitly-defined section, although this practice is not recommended.)

    Implicit Sectioning

    Because the HTML5 Sectioning Elements aren't mandatory to define an outline, to keep compatibility with the existing web dominated by HTML4, there is a way to define sections without them. This is called implicit sectioning.

    The HTML Headings Elements (<h1> to <h6>) defines a new, implicit, section when they aren't the first heading of their parent, explicit, sections. The way this implicit section is positioned in the outline is defined by its relative rank with the previous heading in their parent section. If it is of a lower rank than the previous heading, it opens a implicit sub-section of the section. This code:

    <section>
  <h1>Forest elephants</h1>  
  <p>In this section, we discuss the lesser known forest elephants.
     ...this section continues...
  <h3 class="implicit subsection">Habitat</h3>
    <p>Forest elephants do not live in trees but among them.
       ...this subsection continues...
</section>

    leading to the following outline:

    1. Forest elephants
   1.1 Habitat (implicitly defined by the h3 element)

    If it is of the same rank as the previous heading, it closes the previous section (which may have been explicit!) and opens a new implicit one at the same level: 

    <section>
  <h1>Forest elephants</h1>  
  <p>In this section, we discuss the lesser known forest elephants.
     ...this section continues...
  <h1 class="implicit section">Mongolian gerbils</h1>
  <p>Mongolian gerbils are cute little mammals.
     ...this section continues...
</section>

    leading to the following outline: 

    1. Forest elephants
2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)

    If it is of a higher rank than the previous heading, it closes the previous section and opens a new implicit one at the higher level:

    <body>
  <h1>Mammals</h1>
  <h2>Whales</h2>
  <p>In this section, we discuss the swimming whales.
     ...this section continues...
  <section>
    <h3>Forest elephants</h3>  
    <p>In this section, we discuss the lesser known forest elephants.
      ...this section continues...
    <h3>Mongolian gerbils</h3>
      <p>Hordes of gerbils have spread their range far beyond Mongolia.
         ...this subsection continues...
    <h2>Reptiles</h2>
      <p>Reptiles are animals with cold blood.
          ...this subsection continues...
  </section>
</body>

    leading to the following outline:

    1. Mammals
   1.1 Whales (implicitly defined by the h2 element)
   1.2 Forest elephants (explicitly defined by the section element)
   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
   1.4 Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)

    This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

    An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at <h1> for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

    Overriding Implicit Sectioning

     Sometimes, a section needs to have several headings. A few usual cases are:

    • a section about a book, or a movie, that has a secondary title: 
      <section>
  <h1>Justine</h1>
  <h2>Les Malheurs de la vertu</h2>
</section>

      leads to the following outline:

      1. Justine
   1.1 Les Malheurs de la vertu
    • the secondary heading may be used for a tag list: 
      <section>
  <h1>Section and outlines of a document</h1>
  <h2>HTML, HTML5, Sections, Outlines</h2>
</section>

      leads to the following outline:

      1. Section and outlines of a document
   1.1 HTML, HTML5, Sections, Outlines

    Due to the implicit sectioning, this is not possible without the help of the HTML Headings Group Element (<hgroup> introduced in HTML5). It hides all headings from the outline, except the first one, allowing an override of the implicit sectioning. With this element the secondary book example:

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

    leads to the following outline:

    1. Justine

    Sectioning roots

     A sectioning root is an HTML element that can have its own outline, but the sections and headings inside them do not contribute to the outline of their ancestor. Beside <body> which is the logical sectioning root of a document, these are often elements that introduce external content to the page: <blockquote>, <details>, <fieldset>, <figure> and <td>.

    Example:

    <section>
  <h1>Forest elephants</h1> 
  <section>
    <h2>Introduction</h2>
    <p>In this section, we discuss the lesser known forest elephants
  </section>
  <section>
    <h2>Habitat</h2>
    <p>Forest elephants do not live in trees but among them. Let's
       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":
    <blockquote>
       <h1>Borneo
       <p>The forest element lives in Borneo...
    </blockquote>
  </section>
</section>

    This example results in the following outline:

    1. Forest elephants
   1.1 Introduction
   1.2 Habitat

    This outline doesn't contain the internal outline of the <blockquote> element, which, being an external citation, is a sectioning root and isolates its internal outline.

    Sections outside the outline

     HTML5 introduces four new elements that allow defining sections that don't belong to the main outline of a web document:

    1. The HTML Aside Section Element (<aside>) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. The HTML Navigational Section Element (<nav>) defines a section that contains navigation links. There can be several of them in a document, for example, one with page internal links, like a table of content, and another one with site navigational links. These links are not part of the main flow and outline and can be typically initially not rendered by screen reader and similar assistive technology.
    3. The HTML Header Section Element (<header>) defines a page header, typically containing the logo and name of the site and possibly a horizontal menu. Despite its name, it is not necessarily positioned at the beginning of the page.
    4. The HTML Footer Section Element (<footer>) defines a page footer, typically containing the copyright and legal noticed and sometimes some links. Despite its name, it is not necessarily positioned at the bottom of the page.

    Addresses and publication time in sectioning elements

    The author of a document often wants to publish some contact information, such the author's name and address. HTML4 allowed this via the <address> element, which has been extended in HTML5.

    A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the <article> element. Consequently, the <address> element is now linked to its nearest <body> or <article> ancestor.

    Similarly, the new HTML5 <time> element, with its pubdate boolean attribute set, represents the publication date associated to the whole document, respectively to the article, related to its nearest <body> or <article> ancestor.

    Using HTML5 Elements in Non-HTML5 Browsers

    Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM interface and they only need a specific CSS styling as unknown elements are styled as display:inline by default:

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

    Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the <time> element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

    This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:

    <!--[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]-->

    This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit <noscript> element should be added for this case:

    <noscript>
   <strong>Warning !</strong>
   Because your browser does not support HTML5, some elements are simulated using JScript.
   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
</noscript>

    This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

    <!--[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.

    HTML5 Documentation
    HTML
    JavaScript
    CSS

     

    Etiquetas do documento e colaboradores

     Colaboradores desta página: edercampelo, IgorGoncalves, dann, netoguimaraes, Stutz.D, eduardodx, AluisioASG
     Última atualização por: edercampelo,