Outlines of an HTML5 Document | Techbirds

 

In this section, we discuss the lesser known forest elephants.     …this section continues…  

Forest elephants do not live in trees but among them.     …this subsection continues…

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:  

 

In this section, we discuss the lesser known forest elephants.     …this section continues…  

Mongolian gerbils

Mongolian gerbils are cute little mammals.     …this section continues…

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: 

In this section, we discuss the swimming whales.     …this section continues…  

   

In this section, we discuss the lesser known forest elephants.       …this section continues…    

Mongolian gerbils

Hordes of gerbils have spread their range far beyond Mongolia.          …this subsection continues…    

Reptiles

Reptiles are animals with cold blood.           …this subsection continues…

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

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.

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 which is the logical sectioning root of a document, these are often elements that introduce external content to the page:

,
,
,
and

Example:

 

Forest elephants

   

In this section, we discuss the lesser known forest elephants

 

   

Forest elephants do not live in trees but among them. Let’s
       look what scientists are saying in “The Forest Elephant in Borneo“:

   

       

Borneo

The forest element lives in Borneo…

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

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 (

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

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

element. Consequently, the
element is now linked to its nearest or
ancestor.

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

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

      document.createElement(“header” );     document.createElement(“footer” );     document.createElement(“section”);      document.createElement(“aside”  );     document.createElement(“nav”    );     document.createElement(“article”);      document.createElement(“hgroup” );      document.createElement(“time”   );

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 element should be added for this case:

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

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:

      document.createElement(“header” );     document.createElement(“footer” );     document.createElement(“section”);      document.createElement(“aside”  );     document.createElement(“nav”    );     document.createElement(“article”);      document.createElement(“hgroup” );      document.createElement(“time”   );    

     Warning !

     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.

13 total views, 4 views today

Share this Onfacebook-5751934twitter-7926895linkedin-5347503google-7382179

.