initial commit

2 files changed, 518 insertions, 0 deletions

diff --git a/files/pt-pt/web/guide/html/categorias_de_conteudo/index.html b/files/pt-pt/web/guide/html/categorias_de_conteudo/index.html
new file mode 100644
index 0000000000..9a7c08ee9a
--- /dev/null
+++ b/files/pt-pt/web/guide/html/categorias_de_conteudo/index.html
@@ -0,0 +1,175 @@
+---
+title: Categorias de conteúdo
+slug: Web/Guide/HTML/Categorias_de_conteudo
+tags:
+  - Avançado
+  - Guía
+  - HTML
+  - HTML5
+  - Web
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p><span class="seoSummary">Every <a href="/en-US/docs/Web/HTML">HTML</a> element is a member of one or more <strong>content categories</strong>, which group elements that share characteristics.</span> This is a loose grouping (it doesn't actually create a relationship among elements of these categories), but they help define and describe the categories' shared behavior and their associated rules, especially when you come upon their intricate details. It's also possible for elements to not be a member of <em>any</em> of these categories.</p>
+
+<p>There are three types of content categories:</p>
+
+<ul>
+ <li>Main content categories, which describe common rules shared by many elements.</li>
+ <li>Form-related content categories, which describe rules common to form-related elements.</li>
+ <li>Specific content categories, which describe rare categories shared only by a few elements, sometimes only in a specific context.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:</strong> A more detailed discussion of these content categories and their comparative functionalities is beyond the scope of this article; for that, you may wish to read the <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">relevant portions of the HTML specification</a>.</p>
+</div>
+
+<p><a href="/@api/deki/files/6244/=Content_categories_venn.png"><img alt="A Venn diagram showing how the various content categories interrelate. The following sections explain these relationships in text." class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></p>
+
+<h2 id="Main_content_categories">Main content categories</h2>
+
+<h3 id="Metadata_content">Metadata content</h3>
+
+<p>Elements belonging to the <em>metadata content</em> category modify the presentation or the behavior of the rest of the document, set up links to other documents, or convey other <em>out of band</em> information.</p>
+
+<p>Elements belonging to this category are {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} and {{HTMLElement("title")}}.</p>
+
+<h3 id="Flow_content">Flow content</h3>
+
+<p>Elements belonging to the flow content category typically contain text or embedded content. They are: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} and Text.</p>
+
+<p>A few other elements belong to this category, but only if a specific condition is fulfilled:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, if it is a descendant of a {{HTMLElement("map")}} element</li>
+ <li>{{HTMLElement("link")}}, if the <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop">itemprop</a> attribute is present</li>
+ <li>{{HTMLElement("meta")}}, if the <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop"><strong>itemprop</strong></a> attribute is present</li>
+ <li>{{HTMLElement("style")}}, if the {{htmlattrxref("scoped","style")}} attribute is present</li>
+</ul>
+
+<h3 id="Sectioning_content">Sectioning content</h3>
+
+<p>Elements belonging to the sectioning content model create a <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">section in the current outline</a> that defines the scope of {{HTMLElement("header")}} elements, {{HTMLElement("footer")}} elements, and <a href="#Heading_content">heading content</a>.</p>
+
+<p>Elements belonging to this category are {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} and {{HTMLElement("section")}}.</p>
+
+<div class="note">
+<p>Do not confuse this content model with the <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a> category, which isolates its content from the regular outline.</p>
+</div>
+
+<h3 id="Heading_content">Heading content</h3>
+
+<p>Heading content defines the title of a section, whether marked by an explicit <a href="#Sectioning_content">sectioning content</a> element, or implicitly defined by the heading content itself.</p>
+
+<p>Elements belonging to this category are {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} and {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p>Though likely to contain heading content, the {{HTMLElement("header")}} is not heading content itself.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> The {{HTMLElement("hgroup")}} element was removed from the W3C HTML specification prior to HTML 5 being finalized, but is still part of the WHATWG specification and is at least partially supported by most browsers.</p>
+</div>
+
+<h3 id="Phrasing_content">Phrasing content</h3>
+
+<p>Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.</p>
+
+<p>Elements belonging to this category are {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} and plain text (not only consisting of white spaces characters).</p>
+
+<p>A few other elements belong to this category, but only if a specific condition is fulfilled:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, if it contains only phrasing content</li>
+ <li>{{HTMLElement("area")}}, if it is a descendant of a {{HTMLElement("map")}} element</li>
+ <li>{{HTMLElement("del")}}, if it contains only phrasing content</li>
+ <li>{{HTMLElement("ins")}}, if it contains only phrasing content</li>
+ <li>{{HTMLElement("link")}}, if the <a href="/en-US/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> attribute is present</li>
+ <li>{{HTMLElement("map")}}, if it contains only phrasing content</li>
+ <li>{{HTMLElement("meta")}}, if the <a href="/en-US/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> attribute is present</li>
+</ul>
+
+<h3 id="Embedded_content">Embedded content</h3>
+
+<p>Embedded content imports another resource or inserts content from another mark-up language or namespace into the document. Elements that belong to this category include: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="Interactive_content">Interactive content</h3>
+
+<p>Interactive content includes elements that are specifically designed for user interaction. Elements that belong to this category include: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br>
+ Some elements belong to this category only under specific conditions:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, if the {{htmlattrxref("controls", "audio")}} attribute is present</li>
+ <li>{{HTMLElement("img")}}, if the {{htmlattrxref("usemap", "img")}} attribute is present</li>
+ <li>{{HTMLElement("input")}}, if the {{htmlattrxref("type", "input")}} attribute is not in the hidden state</li>
+ <li>{{HTMLElement("menu")}}, if the {{htmlattrxref("type", "menu")}} attribute is in the toolbar state</li>
+ <li>{{HTMLElement("object")}}, if the {{htmlattrxref("usemap", "object")}} attribute is present</li>
+ <li>{{HTMLElement("video")}}, if the {{htmlattrxref("controls", "video")}} attribute is present</li>
+</ul>
+
+<h3 id="Palpable_content">Palpable content</h3>
+
+<p>Content is palpable when it's neither empty or hidden; it is content that is rendered and is substantive. Elements whose model is flow content or phrasing content should have at least one node which is palpable.</p>
+
+<h3 id="Form-associated_content">Form-associated content</h3>
+
+<p>Form-associated content comprises elements that have a form owner, exposed by a <strong>form</strong> attribute. A form owner is either the containing {{HTMLElement("form")}} element or the element whose id is specified in the <strong>form</strong> attribute.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>This category contains several sub-categories:</p>
+
+<dl>
+ <dt id="Form_listed">listed</dt>
+ <dd>Elements that are listed in the <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
+ <dt id="Form_labelable">labelable</dt>
+ <dd>Elements that can be associated with {{HTMLElement("label")}} elements. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
+ <dt id="Form_submittable">submittable</dt>
+ <dd>Elements that can be used for constructing the form data set when the form is submitted. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
+ <dt id="Form_resettable">resettable</dt>
+ <dd>Elements that can be affected when a form is reset. Contains {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Secondary_categories">Secondary categories</h2>
+
+<p>There are some secondary classifications of elements that can be useful to be aware of as well.</p>
+
+<h3 id="Script-supporting_elements">Script-supporting elements</h3>
+
+<p><strong>Script-supporting elements</strong> are elements which don't directly contribute to the rendered output of a document. Instead, they serve to support scripts, either by containing or specifying script code directly, or by specifying data that will be used by scripts.</p>
+
+<p>The script-supporting elements are:</p>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{HTMLElement("template")}}</li>
+</ul>
+
+<h2 id="Transparent_content_model">Transparent content model</h2>
+
+<p>If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.</p>
+
+<p>For example, the {{HTMLElement("del")}} and {{HTMLELement("ins")}} elements are transparent:</p>
+
+<pre>&lt;p&gt;We hold these truths to be &lt;del&gt;&lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;self-evident&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>If those elements were removed, this fragment would still be valid HTML (if not correct English).</p>
+
+<pre>&lt;p&gt;We hold these truths to be &lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt; self-evident.&lt;/p&gt;
+</pre>
+
+<h2 id="Outros_modelos_de_conteúdo">Outros modelos de conteúdo</h2>
+
+<p>Seção raiz.</p>
diff --git a/files/pt-pt/web/guide/html/utilizar_estruturas_e_seccoes_de_html/index.html b/files/pt-pt/web/guide/html/utilizar_estruturas_e_seccoes_de_html/index.html
new file mode 100644
index 0000000000..fd11f62887
--- /dev/null
+++ b/files/pt-pt/web/guide/html/utilizar_estruturas_e_seccoes_de_html/index.html
@@ -0,0 +1,343 @@
+---
+title: Utilizar estruturas e secções de HTML
+slug: Web/Guide/HTML/Utilizar_estruturas_e_seccoes_de_HTML
+tags:
+  - Avançado
+  - Estruturas
+  - Exemplo
+  - Guía
+  - HTML
+  - HTML5
+  - Resumo
+  - Secções
+  - Sinopse
+  - Web
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<div class="warning">
+<p><strong>Importante</strong>: atualmente, não existem implementações conhecidas do algoritmo de estrutura nos navegadores gráficos ou agentes de utilizador da tecnologia assistiva, embora o algoritmo esteja implementado noutro software, tal como verificadores de conformidade . Assim, o algoritmo de <a href="http://www.w3.org/TR/html5/sections.html#outline">estrutura</a> não pode ser invocado para transmitir a estrutura do documento aos utilizadores. Recomenda-se que os autores utilizem <a href="http://www.w3.org/TR/html5/sections.html#rank">rank</a> (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) para transmitir a estrutura do documento.</p>
+</div>
+
+<p>The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with standard semantics. This document describes these elements and how to use them to define the desired outline for any document.</p>
+
+<h2 id="Estrutura_de_um_documento_em_HTML_4">Estrutura de um documento em HTML 4</h2>
+
+<p>A estrutura de um documento, por exemplo, a estrutura de semântica do que está entre <code>&lt;body&gt;</code> e <code>&lt;/body&gt;</code>, é fundamental para apresentar a página ao utilizador. HTML4 uses the notion of sections and sub-sections of a document to describe its structure. A section is defined by a ({{HTMLElement("div")}}) element with heading elements ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, or {{HTMLElement("h6")}}) within it, defining its title. The relationships of these elements leads to the structure of the document and its outline.</p>
+
+<p>So the following mark-up:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:xml">&lt;div class="section" id="forest-elephants" &gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;div class="subsection" id="forest-habitat" &gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>leads to the following outline (without the implicit level numbers displayed):</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+</pre>
+
+<p>The {{HTMLElement("div")}} elements aren't mandatory to define a new section. The mere presence of a heading element is enough to imply a new section. Therefore,</p>
+
+<pre class="brush:xml">&lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h2&gt;Habitat&lt;/h2&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  &lt;h2&gt;Diet&lt;/h2&gt;
+&lt;h1&gt;Mongolian gerbils&lt;/h1&gt;
+</pre>
+
+<p>leads to the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+</pre>
+
+<h2 id="Problemas_resolvidos_pelo_HTML5">Problemas resolvidos pelo HTML5</h2>
+
+<p>The HTML 4 definition of the structure of a document and its implied outlining algorithm is very rough and leads to numerous problems:</p>
+
+<ol>
+ <li>Usage of {{HTMLElement("div")}} for defining semantic sections, without defining specific values for the <strong>class</strong> attributes makes the automation of the outlining algorithm impossible ("Is that {{HTMLElement("div")}} part of the outline of the page, defining a section or a subsection?" Or "is it only a presentational {{HTMLElement("div")}}, only used for styling?"). In other terms, the HTML4 spec is very imprecise on what is a section and how its scope is defined. Automatic generation of outlines is important, especially for <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">assistive technology</a>, that are likely to adapt the way they present information to the users according to the structure of the document. HTML5 removes the need for {{HTMLElement("div")}} elements from the outlining algorithm by introducing a new element, {{HTMLElement("section")}}, the HTML Section Element.</li>
+ <li>Merging several documents is hard: inclusion of a sub-document in a main document means changing the level of the HTML Headings Element so that the outline is kept. This is solved in HTML5 as the newly introduced sectioning elements ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} and {{HTMLElement("aside")}}) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.</li>
+ <li>In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the {{HTMLElement("aside")}} element allowing such sections to not be part of the main outline.</li>
+ <li>Again, in HTML4, because every section is part of the document outline, there is no way to have sections containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three new elements: {{HTMLElement("nav")}} for collections of links, such as a table of contents, {{HTMLElement("footer")}} and {{HTMLElement("header")}} for site-related information. Note that {{HTMLElement("header")}} and {{HTMLElement("footer")}} are not sectioning content like {{HTMLElement("section")}}, rather, they exist to semantically mark up parts of a section.</li>
+</ol>
+
+<p>More generally, HTML5 brings precision to the sectioning and heading features, allowing document outlines to be predictable and used by the browser to improve the user experience.</p>
+
+<h2 id="O_algoritmo_de_estrutura_de_HTML5">O algoritmo de estrutura de HTML5</h2>
+
+<p>Let's consider the algorithms  underlying the way HTML handles sections and outlines.</p>
+
+<h3 id="Definir_secções">Definir secções</h3>
+
+<p>All content lying inside the {{HTMLElement("body")}} element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the {{HTMLElement("body")}} element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} tags. </p>
+
+<div class="note">Each section can have its own heading hierarchy. Therefore, even a nested section can have an {{HTMLElement("h1")}}. See {{anch("Defining headings")}}</div>
+
+<p>Let's look at an example — here we have a document with a top level section and a footer defined. Inside the top level section we have three subsections, defined by two {{htmlelement("section")}} elements and an {{htmlelement("aside")}} element:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;aside&gt;
+    &lt;p&gt;advertising block&lt;/p&gt;
+  &lt;/aside&gt;
+
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>This leads to the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+</pre>
+
+<h3 id="Definir_cabeçalhos">Definir cabeçalhos</h3>
+
+<p>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 {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) defines the heading of the current section.</p>
+
+<p>The heading elements have a <em>rank</em> given by the number in the element name, where {{HTMLElement("h1")}} has the <em>highest</em> rank, and {{HTMLElement("h6")}} has the <em>lowest</em> 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, consider this code:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+  &lt;p&gt;In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+&lt;/section&gt;</pre>
+
+<p>This creates the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils</pre>
+
+<p>Note that the rank of the heading element (in the example {{HTMLElement("h1")}} for the first top-level section, {{HTMLElement("h2")}} for the subsection and {{HTMLElement("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.)</p>
+
+<h3 id="Implicit_sectioning">Implicit sectioning</h3>
+
+<p>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 <em>implicit sectioning</em>.</p>
+
+<p>The heading elements ({{HTMLElement("h1")}} to {{HTMLElement("h6")}}) define 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 its parent section. If it is of a lower rank than the previous heading, it opens an implicit sub-section of the section. This code:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h3 class="implicit subsection"&gt;Habitat&lt;/h3&gt;
+  &lt;p&gt;Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+&lt;/section&gt;</pre>
+
+<p>leading to the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Habitat <em>(implicitly defined by the h3 element)</em>
+</pre>
+
+<p>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: </p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  &lt;h1 class="implicit section"&gt;Mongolian gerbils&lt;/h1&gt;
+  &lt;p&gt;Mongolian gerbils are cute little mammals.
+    ...this section continues...
+&lt;/section&gt;</pre>
+
+<p>leading to the following outline: </p>
+
+<pre>1. Forest elephants
+2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em>
+</pre>
+
+<p>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:</p>
+
+<pre class="brush:xml">&lt;body&gt;
+  &lt;h1&gt;Mammals&lt;/h1&gt;
+  &lt;h2&gt;Whales&lt;/h2&gt;
+  &lt;p&gt;In this section, we discuss the swimming whales.
+    ...this section continues...
+  &lt;section&gt;
+    &lt;h3&gt;Forest elephants&lt;/h3&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
+      &lt;p&gt;Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    &lt;h2&gt;Reptiles&lt;/h2&gt;
+      &lt;p&gt;Reptiles are animals with cold blood.
+          ...this section continues...
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p>leading to the following outline:</p>
+
+<pre>1. Mammals
+   1.1 Whales <em>(implicitly defined by the h2 element)</em>
+   1.2 Forest elephants <em>(explicitly defined by the section element)</em>
+   1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em>
+2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em>
+</pre>
+
+<p>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.</p>
+
+<p>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 {{HTMLElement("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.</p>
+
+<h3 id="Sectioning_roots"><a name="sectioning_root">Sectioning roots</a></h3>
+
+<p> A <a id="sectioning root" name="sectioning root">sectioning root</a> is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Beside {{HTMLElement("body")}} which is the logical sectioning root of a document, these are often elements that introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} and {{HTMLElement("td")}}.</p>
+
+<p>Example:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;Forest elephants&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Introduction&lt;/h2&gt;
+    &lt;p&gt;In this section, we discuss the lesser known forest elephants&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "&lt;cite&gt;The Forest Elephant in Borneo&lt;/cite&gt;":&lt;/p&gt;
+    &lt;blockquote&gt;
+       &lt;h1&gt;Borneo&lt;/h1&gt;
+       &lt;p&gt;The forest element lives in Borneo...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>This example results in the following outline:</p>
+
+<pre>1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat</pre>
+
+<p>This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.</p>
+
+<h3 id="Sections_outside_the_outline">Sections outside the outline</h3>
+
+<p> HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:</p>
+
+<ol>
+ <li>The HTML Aside Section Element ({{HTMLElement("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.</li>
+ <li>The HTML Navigational Section Element ({{HTMLElement("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 contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.</li>
+</ol>
+
+<h3 id="Cabeçalhos_e_Rodapés">Cabeçalhos e Rodapés</h3>
+
+<p>HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:</p>
+
+<ol>
+ <li>The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.</li>
+ <li>The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.</li>
+</ol>
+
+<p>These do not create new sections in the outline, rather, they mark up content inside sections of the page.</p>
+
+<h2 id="Addresses_in_sectioning_elements">Addresses in sectioning elements</h2>
+
+<p>The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.</p>
+
+<p>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 {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.</p>
+
+<h2 id="Utilizar_elementos_de_HTML5_nos_navegadores_não_HTML5">Utilizar elementos de HTML5 nos navegadores não HTML5</h2>
+
+<p>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 <code>display:inline</code> by default:</p>
+
+<pre class="brush: css">article, aside, footer, header, hgroup, nav, section {
+  display:block;
+}
+</pre>
+
+<p>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 {{HTMLElement("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.</p>
+
+<p>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:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("hgroup");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  &lt;/script&gt;
+&lt;![endif]--&gt;
+</pre>
+
+<p>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 {{HTMLElement("noscript")}} element should be added inside the {{HTMLElement("head")}} element for this case:</p>
+
+<pre class="brush:xml">&lt;noscript&gt;
+  &lt;p&gt;&lt;strong&gt;This web page requires JavaScript to be enabled.&lt;/strong&gt;&lt;/p&gt;
+  &lt;p&gt;JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.&lt;/p&gt;
+  &lt;p&gt;&lt;a href="https://goo.gl/koeeaJ"&gt;How to enable JavaScript?&lt;/a&gt;&lt;/p&gt;
+&lt;/noscript&gt;
+</pre>
+
+<p>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:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt; &lt;script&gt;
+  document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("hgroup");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");   &lt;/script&gt; &lt;![endif]--&gt; &lt;noscript&gt;
+  &lt;p&gt;&lt;strong&gt;This web page requires JavaScript to be enabled.&lt;/strong&gt;&lt;/p&gt;
+  &lt;p&gt;JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.&lt;/p&gt;
+  &lt;p&gt;&lt;a href="https://goo.gl/koeeaJ"&gt;How to enable JavaScript?&lt;/a&gt;&lt;/p&gt;
+&lt;/noscript&gt; &lt;![endif]--&gt;
+</pre>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>The new semantic elements introduced in HTML5 bring the ability to describe the structure and the outline of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.</p>
+
+<div>{{HTML5ArticleTOC()}}</div>