mozilla

Compare Revisions

Sections and Outlines of an HTML5 Document

Change Revisions

Revision 31509:

Revision 31509 by Gieron on

Revision 31510:

Revision 31510 by GlitchMr on

Title:
Sections and Outlines of an HTML5 Document
Sections and Outlines of an HTML5 Document
Slug:
Sections_and_Outlines_of_an_HTML5_document
Sections_and_Outlines_of_an_HTML5_document
Tags:
HTML, HTML5
HTML, HTML5
Content:

Revision 31509
Revision 31510
n67      <li>Usage of {{ HTMLElement("div") }} for defining semanticn67      <li>Usage of {{ HTMLElement("div") }} for defining semantic
> sections, without defining specific values for the <strong>class> sections, without defining specific values for the <strong>class
></strong> attributes makes the automation of the outlining algori></strong> attributes makes the automation of the outlining algori
>thm impossible ("Is that {{ HTMLElement("div") }} part of the out>thm impossible ("Is that {{ HTMLElement("div") }} part of the out
>line of the page, defining a section or a subsection?" Or "is it >line of the page, defining a section or a subsection?" Or "is it 
>only a presentational {{ HTMLElement("div") }}, only used for sty>only a presentational {{ HTMLElement("div") }}, only used for sty
>ling?"). In other terms, the HTML4 spec is very imprecise on what>ling?"). In other terms, the HTML4 spec is very imprecise on what
> is a section and how its scope is defined. Automatic generation > is a section and how its scope is defined. Automatic generation 
>of outlines is important, especially for <a class=" external" hre>of outlines is important, especially for <a class="external" href
>f="http://en.wikipedia.org/wiki/Assistive_technology" title="http>="http://en.wikipedia.org/wiki/Assistive_technology" title="http:
>://en.wikipedia.org/wiki/Assistive_technology">assistive technolo>//en.wikipedia.org/wiki/Assistive_technology">assistive technolog
>gy</a>, that are likely to adapt the way they present information>y</a>, that are likely to adapt the way they present information 
> to the users according to the structure of the document. HTML5 r>to the users according to the structure of the document. HTML5 re
>emoves the need for {{ HTMLElement("div") }} elements from the ou>moves the need for {{ HTMLElement("div") }} elements from the out
>tlining algorithm by introducing a new element, {{ HTMLElement("s>lining algorithm by introducing a new element, {{ HTMLElement("se
>ection") }}, the HTML&nbsp;Section Element.>ction") }}, the HTML&nbsp;Section Element.
n69      <li>Merging several documents is hard: inclusion of a sub-dn69      <li>Merging several documents is hard: inclusion of a sub-d
>ocument in a main document means changing the level of the HTML H>ocument in a main document means changing the level of the HTML H
>eadings Element so that the outline is kept. This is solved in HT>eadings Element so that the outline is kept. This is solved in HT
>ML5 as the newly introduced sectioning elements ({{ HTMLElement(">ML5 as the newly introduced sectioning elements ({{ HTMLElement("
>article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav")>article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav")
> }} and {{ HTMLElement("aside") }}) are always subsections of the> }} and {{ HTMLElement("aside") }}) are always subsections of the
>ir nearest ancestor section, regardless of what sections are crea>ir nearest ancestor section, regardless of what sections are crea
>ted by internal headings.<em><br></em>>ted by internal headings.<br>
n104    &lt;h1&gt;<span><span>Habitat</span><span class="tag">&lt;/</n104    &lt;h1&gt;<span><span>Habitat</span><span class="tag">&lt;/</
>span><span class="tag-name">h1</span><span class="tag">&gt;<br>  >span><span class="tag-name">h1</span><span class="tag">&gt;
>  </span></span><span><span class="tag">&lt;</span><span class="t 
>ag-name">P</span><span class="tag">&gt;</span><span>Forest elepha 
>nts do not live in trees but among them. <br>  &lt;/section&gt;<b 
>r>  &lt;aside&gt;<br>    &lt;p&gt;advertising block<br>  &lt;/asi 
>de&gt;<br>&lt;/section&gt;<br>&lt;footer&gt;<br>  &lt;p&gt;(c) 20 
>10 The Example company<br>&lt;/footer&gt;</span></span>  
105    </span></span><span><span class="tag">&lt;</span><span class=
 >"tag-name">P</span><span class="tag">&gt;</span><span>Forest elep
 >hants do not live in trees but among them. 
106  &lt;/section&gt;
107  &lt;aside&gt;
108    &lt;p&gt;advertising block
109  &lt;/aside&gt;
110&lt;/section&gt;
111&lt;footer&gt;
112  &lt;p&gt;(c) 2010 The Example company
113&lt;/footer&gt;</span></span> 
n110<span style="color: red;"> &lt;section&gt;   <br>  &lt;h1&gt;Foren119<span style="color: red;"> &lt;section&gt;   
>st elephants&lt;/h1&gt;    <br>  &lt;section&gt;     <br>    &lt; 
>h1&gt;Introduction&lt;/h1&gt;     <br>    &lt;p&gt;In this sectio 
>n, we discuss the lesser known forest elephants.<br>  &lt;/sectio 
>n&gt;   <br>  &lt;section&gt;     <br>    &lt;h1&gt;<span><span>H 
>abitat</span><span class="tag">&lt;/</span><span class="tag-name" 
>>h1</span><span class="tag">&gt;<br>    </span></span><span><span 
> class="tag">&lt;</span><span class="tag-name">P</span><span clas 
>s="tag">&gt;</span><span>Forest elephants do not live in trees bu 
>t among them. <br>  &lt;/section&gt;<br>   &lt;aside&gt;<br>    & 
>lt;p&gt;advertising block<br>  &lt;/aside&gt;<br>&lt;/section&gt; 
><br></span><span style="color: green;">&lt;footer&gt;<br>  &lt;p& 
>gt;(c) 2010 The Example company<br>&lt;/footer&gt;</span></span>< 
>/span> 
120  &lt;h1&gt;Forest elephants&lt;/h1&gt;    
121  &lt;section&gt;     
122    &lt;h1&gt;Introduction&lt;/h1&gt;     
123    &lt;p&gt;In this section, we discuss the lesser known forest 
 >elephants.
124  &lt;/section&gt;   
125  &lt;section&gt;     
126    &lt;h1&gt;<span><span>Habitat</span><span class="tag">&lt;/</
 >span><span class="tag-name">h1</span><span class="tag">&gt;
127    </span></span><span><span class="tag">&lt;</span><span class=
 >"tag-name">P</span><span class="tag">&gt;</span><span>Forest elep
 >hants do not live in trees but among them. 
128  &lt;/section&gt;
129   &lt;aside&gt;
130    &lt;p&gt;advertising block
131  &lt;/aside&gt;
132&lt;/section&gt;
133</span><span style="color: green;">&lt;footer&gt;
134  &lt;p&gt;(c) 2010 The Example company
135&lt;/footer&gt;</span></span></span>
n116<span style="color: grey;">&lt;section&gt;<br>   &lt;h1&gt;Forestn141<span style="color: grey;">&lt;section&gt;
> elephants&lt;/h1&gt;<br> </span><span style="color: red;">  &lt; 
>section&gt;     <br>     &lt;h1&gt;Introduction&lt;/h1&gt;     <b 
>r>     &lt;p&gt;In this section, we discuss the lesser known fore 
>st elephants.<br>   &lt;/section&gt;   <br> </span><span style="c 
>olor: green;">  &lt;section&gt;     <br>     &lt;h1&gt;<span><spa 
>n>Habitat</span><span class="tag">&lt;/</span><span class="tag-na 
>me">h1</span><span class="tag">&gt;<br>     </span></span><span>< 
>span class="tag">&lt;</span><span class="tag-name">P</span><span  
>class="tag">&gt;</span><span>Forest elephants do not live in tree 
>s but among them. <br>   &lt;/section&gt;<br>  </span><span style 
>="color: blue;"> &lt;aside&gt;<br>     &lt;p&gt;advertising block 
><br>   &lt;/aside&gt;<br> </span><span style="color: grey;">&lt;/ 
>section&gt;<br> &lt;footer&gt;<br>   &lt;p&gt;(c) 2010 The Exampl 
>e company<br> &lt;/footer&gt;</span></span></span> 
142   &lt;h1&gt;Forest elephants&lt;/h1&gt;
143 </span><span style="color: red;">  &lt;section&gt;     
144     &lt;h1&gt;Introduction&lt;/h1&gt;     
145     &lt;p&gt;In this section, we discuss the lesser known forest
 > elephants.
146   &lt;/section&gt;   
147 </span><span style="color: green;">  &lt;section&gt;     
148     &lt;h1&gt;<span><span>Habitat</span><span class="tag">&lt;/<
 >/span><span class="tag-name">h1</span><span class="tag">&gt;
149     </span></span><span><span class="tag">&lt;</span><span class
 >="tag-name">P</span><span class="tag">&gt;</span><span>Forest ele
 >phants do not live in trees but among them. 
150   &lt;/section&gt;
151  </span><span style="color: blue;"> &lt;aside&gt;
152     &lt;p&gt;advertising block
153   &lt;/aside&gt;
154 </span><span style="color: grey;">&lt;/section&gt;
155 &lt;footer&gt;
156   &lt;p&gt;(c) 2010 The Example company
157 &lt;/footer&gt;</span></span></span>
n1262. Section (footer<span id="Problems_Solved_by_HTML5">)<br> </span1672. Section (footer<span id="Problems_Solved_by_HTML5">)
>n> 
168 </span>
n140  &lt;p&gt;In this section, we discuss the lesser known forest eln182  &lt;p&gt;In this section, we discuss the lesser known forest el
>ephants. <span style="font-style: italic;"><br>     </span><em>..>ephants. 
>.this section continues...</em> 
183<span style="font-style: italic;">     </span><em>...this section
 > continues...</em>
n143     &lt;p&gt;Forest elephants do not live in trees but among then186     &lt;p&gt;Forest elephants do not live in trees but among the
>m.<span style="font-style: italic;"><br>        </span><em>...thi>m.
>s subsection continues...</em> 
187<span style="font-style: italic;">        </span><em>...this subs
 >ection continues...</em>
n148  &lt;p&gt;In this section, we discuss the famous mongolian gerbin192  &lt;p&gt;In this section, we discuss the famous mongolian gerbi
>ls. <span style="font-style: italic;"><br>     </span><em>...this>ls. 
> section continues...</em> 
193<span style="font-style: italic;">     </span><em>...this section
 > continues...</em>
n174  &lt;p&gt;In this section, we discuss the lesser known forest eln219  &lt;p&gt;In this section, we discuss the lesser known forest el
>ephants.<span style="font-style: italic;"><br>     </span><em>...>ephants.
>this section continues...</em> 
220<span style="font-style: italic;">     </span><em>...this section
 > continues...</em>
n176    &lt;p&gt;Forest elephants do not live in trees but among themn222    &lt;p&gt;Forest elephants do not live in trees but among them
>.<span style="font-style: italic;"><br>       </span><em>...this >.
>subsection continues...</em> 
223<span style="font-style: italic;">       </span><em>...this subse
 >ction continues...</em>
n192  &lt;p&gt;In this section, we discuss the lesser known forest eln239  &lt;p&gt;In this section, we discuss the lesser known forest el
>ephants.<span style="font-style: italic;"><br>     </span><em>...>ephants.
>this section continues...</em> 
240<span style="font-style: italic;">     </span><em>...this section
 > continues...</em>
n194  &lt;p&gt;Mongolian gerbils are cute little mammals.<span style=n242  &lt;p&gt;Mongolian gerbils are cute little mammals.
>"font-style: italic;"><br>     </span><em>...this section continu 
>es...</em> 
243<span style="font-style: italic;">     </span><em>...this section
 > continues...</em>
n315    &lt;h2&gt;<span><span>Habitat</span><span class="tag">&lt;/</n364    &lt;h2&gt;<span><span>Habitat</span><span class="tag">&lt;/</
>span><span class="tag-name">h2</span><span class="tag">&gt;<br>  >span><span class="tag-name">h2</span><span class="tag">&gt;
>  </span></span><span><span class="tag">&lt;</span><span class="t 
>ag-name">p</span><span class="tag">&gt;</span><span>Forest elepha 
>nts do not live in trees but among them. Let's<br>       look wha 
>t scientists are saying:<br>    &lt;blockquote cite="The Forest E 
>lephant in Borneo"&gt;<br>       &lt;h1&gt;Borneo<br>       &lt;p 
>&gt;The forest element lives in Borneo...<br>    &lt;/blockquote& 
>gt;<br>  &lt;/section&gt;<br>&lt;/section&gt;</span></span> 
365    </span></span><span><span class="tag">&lt;</span><span class=
 >"tag-name">p</span><span class="tag">&gt;</span><span>Forest elep
 >hants do not live in trees but among them. Let's
366       look what scientists are saying:
367    &lt;blockquote cite="The Forest Elephant in Borneo"&gt;
368       &lt;h1&gt;Borneo
369       &lt;p&gt;The forest element lives in Borneo...
370    &lt;/blockquote&gt;
371  &lt;/section&gt;
372&lt;/section&gt;</span></span>
n374&lt;!--[if IE]&gt;n431&lt;!--[if lt IE 9]&gt;
n376    <code class="js">document.createElement(<span class="js__strin433    <code class="js">document.createElement(<span class="js__stri
>ng">"header"</span> );<br>    document.createElement(<span class=>ng">"header"</span> );
>"js__string">"footer" </span>);<br>    document.createElement(<sp 
>an class="js__string">"section"</span>); <br>    document.createE 
>lement(<span class="js__string">"aside"</span>  );<br>    documen 
>t.createElement(<span class="js__string">"nav"</span>    );<br>   
>  document.createElement(<span class="js__string">"article"</span 
>>); <br>    document.createElement(<span class="js__string">"hgro 
>up"</span> ); <br>    document.createElement(<span class="js__str 
>ing">"time"</span>   );<br>  &lt;/script&gt;<br></code><code clas 
>s="html"><span class="html__ie_style">&lt;![endif]--&gt;</span></ 
>code> 
434    document.createElement(<span class="js__string">"footer" </sp
 >an>);
435    document.createElement(<span class="js__string">"section"</sp
 >an>); 
436    document.createElement(<span class="js__string">"aside"</span
 >>  );
437    document.createElement(<span class="js__string">"nav"</span> 
 >   );
438    document.createElement(<span class="js__string">"article"</sp
 >an>); 
439    document.createElement(<span class="js__string">"hgroup"</spa
 >n> ); 
440    document.createElement(<span class="js__string">"time"</span>
 >   );
441  &lt;/script&gt;
442</code><code class="html"><span class="html__ie_style">&lt;![endi
 >f]--&gt;</span></code>
n392&lt;!--[if IE]&gt;n458&lt;!--[if lt IE 9]&gt;
t394    <code class="js">document.createElement(<span class="js__strit460    <code class="js">document.createElement(<span class="js__stri
>ng">"header"</span> );<br>    document.createElement(<span class=>ng">"header"</span> );
>"js__string">"footer" </span>);<br>    document.createElement(<sp 
>an class="js__string">"section"</span>); <br>    document.createE 
>lement(<span class="js__string">"aside"</span>  );<br>    documen 
>t.createElement(<span class="js__string">"nav"</span>    );<br>   
>  document.createElement(<span class="js__string">"article"</span 
>>); <br>    document.createElement(<span class="js__string">"hgro 
>up"</span> ); <br>    document.createElement(<span class="js__str 
>ing">"time"</span>   );<br>  &lt;/script&gt;</code> 
395<code class="html"><span class="html__ie_style">  &lt;noscript&gt461    document.createElement(<span class="js__string">"footer" </sp
>;<br>     &lt;strong&gt;Warning !&lt;/strong&gt;<br>     Because >an>);
>your browser does not support HTML5, some elements are simulated  
>using JScript.<br>     Unfortunately your browser has disabled sc 
>ripting. Please enable it in order to display this page.<br>  &lt 
>;/noscript&gt;</span></code> 
462    document.createElement(<span class="js__string">"section"</sp
 >an>); 
463    document.createElement(<span class="js__string">"aside"</span
 >>  );
464    document.createElement(<span class="js__string">"nav"</span> 
 >   );
465    document.createElement(<span class="js__string">"article"</sp
 >an>); 
466    document.createElement(<span class="js__string">"hgroup"</spa
 >n> ); 
467    document.createElement(<span class="js__string">"time"</span>
 >   );
468  &lt;/script&gt;</code>
469<code class="html"><span class="html__ie_style">  &lt;noscript&gt
 >;
470     &lt;strong&gt;Warning !&lt;/strong&gt;
471     Because your browser does not support HTML5, some elements a
 >re simulated using JScript.
472     Unfortunately your browser has disabled scripting. Please en
 >able it in order to display this page.
473  &lt;/noscript&gt;</span></code>

Back to History