5.02.2011

Suddenly Feel VERY SEMANTIC (Latest Dangerous Minds' Marc Campbell Ripoff)




FEELING VERY SEMANTIC!

Re: Dangerous Minds'

Marc Campbell

More to come after I get organized

for what Should be the most HTML5 HUMILIATION Penned YET!
to get a start check out the tag I created for the sleaziest blogger in blogdom upon first being alerted to a baby plagiarist's pattern in the making
The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with standard semantics.
element with HTML Heading Elements
Marc Campbell: You are without a doubt the biggest sleazeball who ever owned a computer and pretended to blog.
The relationships of these HTML Dividing and HTML Heading Elements leads to the structure of the document and its outline. So the following mark-up: 01
02

You have been following my blog and my uploaded videos

(this one from 2007, located on 123video.nl under my user account 'mrjyn') for over a year now.in response to Marc Campbell's posting to Dangerous Minds from 5.1.11

06

07Every time I visit this site to TRY to enjoy it, I'm punched in the face by Marc Campbell's sleazy, disrespectful plagiarism



(and subsequent REcollection of my very 'one of a kind' videos to this blog's Vimeo).
I have finally decided to institute something on my blog which I should have done upon initial discovery.
08 ...this subsection continues... 09
10
leads to the following outline: 1. Marc Campbell, Dangerous Minds 1.1 Plagiarism, The
elements aren't mandatory to define a new section. The mere presence of an HTML Heading Element is enough to imply a new section. Therefore, 1
2
In this section, we discuss . 3 ...this section continues ... 4
5

Latest Dangerous Minds' Marc Campbell Ripoff



Instead, I notified the founder of this blog, whereupon I received a disingenuous apology from Marc Campbell via YouTube mail stating,


. 6 ...this subsection continues... 7

8This time, I'm going to take every opportunity that I have (having just celebrated 4000000 views in a year, I can think of a few) to publicly embarrass you and jeopardize the reputation of everyone associated with this blog.

(It appears they aren't concerned with authenticity either).

Look for your very own page titled with yours and this blog's name, documenting the scores of posts and videos which you have continued to crank out via some unexplainable pathology, homoerotic infatuation, or what I'm guessing is behavior perfectly describing 'the laziest, most unimaginative, unethical blogger who ever pretended to blog'.

Mongolian gerbils

leads to the following outline: 1. Forest elephants 1.1 Habitat 1.2 Diet 2. Mongolian gerbils Problems Solved by HTML5 The HTML 4 definition of the structure of a document and its implied outlining algorithm is very rough and leads to numerous problems: Usage of
for defining semantic sections, without defining specific values for the class attributes makes the automation of the outlining algorithm impossible ("Is that
part of the outline of the page, defining a section or a subsection?" Or "is it only a presentational
, 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 assistive technology, 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
elements from the outlining algorithm by introducing a new element, , the HTML Section Element. 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 ( , , and ) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings. Because each HTML Heading Element is part of the outline, it is not possible to describe a subtitle or secondary title (e.g.,

Justine

Les Malheurs de la Vertu

creates the outline 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduces the element that hides all the heading elements except the first one of the highest rank (e.g.,

Justine

Les Malheurs de la Vertu

creates the outline 1. Justine). 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 element allowing such sections to not be part of the main outline. Again, in HTML4, because every section is part of the document outline, there is no way to have section 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 specific sections elements: for collections of links, such as a table of contents, and for site-related information. 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. The HTML5 Outline Algorithm Defining Sections in HTML5 All content lying inside the element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the element, sections limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within , , , , , , and tags. Example: 01 02

Suddenly Feel VERY SEMANTIC (Latest Dangerous Minds' Marc Campbell Ripoff)

03 04

Introduction

05
In this section, we discuss the lesser known forest elephants 06
07 08

Habitat

09
Forest elephants do not live in trees but among them. 10
11 12
advertising block 13
14 15 16
(c) 2010 The Example company 17
This HTML snippet defines two top-level sections:

Forest elephants

Introduction

In this section, we discuss the lesser known forest elephants

Habitat

Forest elephants do not live in trees but among them.
advertising block
(c) 2010 The Example company
The first section has three subsections:

Forest elephants

Introduction

In this section, we discuss the lesser known forest elephants

Habitat

Forest elephants do not live in trees but among them.
advertising block
(c) 2010 The Example company
This leads to the following structure: 1. Section 1.1 Section 1.2 Section 1.3 Section (aside) 2. Section (footer 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 trivial: the first HTML heading element (one of

,

,

,

,

,
) defines the heading of the current section. The heading elements have a rank given by the number in the element name, where

has the highest rank, and

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

Forest elephants

03
In this section, we discuss the lesser known forest elephants. 04 ...this section continues... 05
06

Habitat

07
Forest elephants do not live in trees but among them. 08 ...this subsection continues... 09
10 11 12

Mongolian gerbils

13
In this section, we discuss the famous mongolian gerbils. 14 ...this section continues... 15
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

for the first top-level section,

for the subsection and

for the second top-level section) is not important: though less clear and not recommended, any rank can be used as the heading of an explicitly-defined section. 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 (

to

) 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: 1 2

Forest elephants

3
In this section, we discuss the lesser known forest elephants. 4 ...this section continues... 5

Habitat

6
Forest elephants do not live in trees but among them. 7 ...this subsection continues... 8
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: 1 2

Forest elephants

3
In this section, we discuss the lesser known forest elephants. 4 ...this section continues... 5

Mongolian gerbils

6
Mongolian gerbils are cute little mammals. 7 ...this section continues... 8
leading to the following outline: 1. Forest elephants 2. Mongolian gerbile (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: 01 02

Mammals

03

Whales

04
In this section, we discuss the swimming whales. 05 ...this section continues... 06
07

Forest elephants

08
In this section, we discuss the lesser known forest elephants. 09 ...this section continues... 10

Mongolian gerbils

11
Forest elephants do not live in trees but among them. 12 ...this subsection continues... 13

Reptiles

14
Reptiles are animals with cold blood. 15 ...this subsection continues... 16
17 leading to the following outline: 1. Mammals 1.1 Whales 1.1.1 Forest elephants 1.1.2 Mongolian gerbils 1.2 Reptiles 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: 1 2

Justine

3

Les Malheurs de la vertu

4 leads to the following outline: 1. Justine 1.1 Les Malheurs de la vertu the secondary heading may be used for a tag list: 1 2

Section and outlines of a document

3

HTML, HTML5, Sections, Outlines

4 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 ( introduced in HTML5. It hides all headings from the outside, except the first one, allowing an override the implicit sectioning. With this element the secondary book example: 1 2 3

Justine

4

Les Malheurs de la vertu

5 6 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 which is the logical sectioning root of a document, these are elements that introduced external content added to the page:
, , , and . Example: 01 02

Forest elephants

03 04

Introduction

05
In this section, we discuss the lesser known forest elephants 06
07 08

Habitat

09
Forest elephants do not live in trees but among them. Let's 10 look what scientists are saying: 11
12

Borneo 13

The forest element lives in Borneo... 14
15 16 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: 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. 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. 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. 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: 1 section, article, aside, footer, header, nav, hgroup { 2 display:block; 3 } 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: 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: 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: The new sections and headings 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 understanding the page, for instance people needing the help of some assistant 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.
The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics. This document describes these elements and how to use them to define the desired outline for any document.

Structure of a Document in HTML 4

The structure of a document, i.e., the semantic struture of what is between <body> and </body>, is fundamental to presenting the page to the user. HTML4 uses the notion of sections and sub-sections of a document to describe its structure. A section is defined by an HTML Dividing ( <div>) element with HTML Heading Elements ( <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>) within it, defining its title. The relationships of these HTML Dividing and HTML Heading Elements leads to the structure of the document and its outline.
So the following mark-up:
01 <DIV class="section" id="forest-elephants" >
02 <H1>Forest elephants</H1>
03 <P>In this section, we discuss the lesser known forest elephants.
04 ...this section continues...
05 <DIV class="subsection" id="forest-habitat" >
06 <H2>Habitat</H2>
07 <P>Forest elephants do not live in trees but among them.
08 ...this subsection continues...
09 </DIV>
10 </DIV>
leads to the following outline:
1. Forest elephants
   1.1 Habitat
The <div> elements aren't mandatory to define a new section. The mere presence of an HTML Heading Element is enough to imply a new section. Therefore,
1 <H1>Forest elephants</H1>
2 <P>In this section, we discuss the lesser known forest elephants.
3 ...this section continues...
4 <H2>Habitat</H2>
5 <P>Forest elephants do not live in trees but among them.
6 ...this subsection continues...
7 <H2>Diet</H2>
8 <H1>Mongolian gerbils</H1>
leads to the following outline:
1. Forest elephants
   1.1 Habitat
   1.2 Diet
2. Mongolian gerbils

Problems Solved by HTML5

The HTML 4 definition of the structure of a document and its implied outlining algorithm is very rough and leads to numerous problems:
  1. Usage of <div> for defining semantic sections, without defining specific values for the class attributes makes the automation of the outlining algorithm impossible ("Is that <div> part of the outline of the page, defining a section or a subsection?" Or "is it only a presentational <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 assistive technology, 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 <div> elements from the outlining algorithm by introducing a new element, <section>, the HTML Section Element.
  2. 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 ( <article>, <section>, <nav> and <aside>) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.
  3. Because each HTML Heading Element is part of the outline, it is not possible to describe a subtitle or secondary title (e.g., <h1>Justine</h1><h2>Les Malheurs de la Vertu</h2> creates the outline 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduces the <hgroup> element that hides all the heading elements except the first one of the highest rank (e.g., <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> creates the outline 1. Justine).
  4. 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 <aside> element allowing such sections to not be part of the main outline.
  5. Again, in HTML4, because every section is part of the document outline, there is no way to have section 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 specific sections elements: <nav> for collections of links, such as a table of contents, <footer> and <header> for site-related information.
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.

The HTML5 Outline Algorithm

Defining Sections in HTML5

All content lying inside the <body> element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the <body> element, sections limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within <body>, <section>, <article>, <aside>, <footer>, <header>, and <nav> tags.
Example:
01 <section>
02 <h1>Forest elephants</h1>
03 <section>
04 <h2>Introduction</h2>
05 <p>In this section, we discuss the lesser known forest elephants
06 </section>
07 <section>
08 <h2>Habitat</h2>
09 <P>Forest elephants do not live in trees but among them.
10 </section>
11 <aside>
12 <p>advertising block
13 </aside>
14 </section>
15 <footer>
16 <p>(c) 2010 The Example company
17 </footer>
This HTML snippet defines two top-level sections:
<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.   </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>          <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.    </section>   <aside>     <p>advertising block   </aside> </section> <footer>   <p>(c) 2010 The Example company </footer>
This leads to the following structure:
1. Section
   1.1 Section
   1.2 Section
   1.3 Section (aside)
2. Section (footer

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 trivial: 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:
01 <section>
02 <h1>Forest elephants</h1>
03 <p>In this section, we discuss the lesser known forest elephants.
04 ...this section continues...
05 <section>
06 <h2>Habitat</h2>
07 <p>Forest elephants do not live in trees but among them.
08 ...this subsection continues...
09 </section>
10 </section>
11 <section>
12 <h3>Mongolian gerbils</h3>
13 <p>In this section, we discuss the famous mongolian gerbils.
14 ...this section continues...
15 </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: though less clear and not recommended, any rank can be used as the heading of an explicitly-defined section.

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:
1 <section>
2 <h1>Forest elephants</h1>
3 <p>In this section, we discuss the lesser known forest elephants.
4 ...this section continues...
5 <h3 class="implicit subsection">Habitat</h3>
6 <p>Forest elephants do not live in trees but among them.
7 ...this subsection continues...
8 </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:
1 <section>
2 <h1>Forest elephants</h1>
3 <p>In this section, we discuss the lesser known forest elephants.
4 ...this section continues...
5 <h1 class="implicit section">Mongolian gerbils</h1>
6 <p>Mongolian gerbils are cute little mammals.
7 ...this section continues...
8 </section>
leading to the following outline:
1. Forest elephants
2. Mongolian gerbile (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:
01 <body>
02 <h1>Mammals</h1>
03 <h2>Whales</h2>
04 <p>In this section, we discuss the swimming whales.
05 ...this section continues...
06 <section>
07 <h3>Forest elephants</h3>
08 <p>In this section, we discuss the lesser known forest elephants.
09 ...this section continues...
10 <h3>Mongolian gerbils</h3>
11 <p>Forest elephants do not live in trees but among them.
12 ...this subsection continues...
13 <h2>Reptiles</h2>
14 <p>Reptiles are animals with cold blood.
15 ...this subsection continues...
16 </section>
17 </body>
leading to the following outline:
1. Mammals
1.1 Whales
1.1.1 Forest elephants
1.1.2 Mongolian gerbils 
1.2 Reptiles

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:
    1 <section>
    2 <h1>Justine</h1>
    3 <h2>Les Malheurs de la vertu</h2>
    4 </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:
    1 <section>
    2 <h1>Section and outlines of a document</h1>
    3 <h2>HTML, HTML5, Sections, Outlines</h2>
    4 </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 outside, except the first one, allowing an override the implicit sectioning. With this element the secondary book example:
1 <section>
2 <hgroup>
3 <h1>Justine</h1>
4 <h2>Les Malheurs de la vertu</h2>
5 </hgroup>
6 </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 elements that introduced external content added to the page: <blockquote>, <details>, <fieldset>, <figure> and <td>.
Example:
01 <section>
02 <h1>Forest elephants</h1>
03 <section>
04 <h2>Introduction</h2>
05 <p>In this section, we discuss the lesser known forest elephants
06 </section>
07 <section>
08 <h2>Habitat</h2>
09 <p>Forest elephants do not live in trees but among them. Let's
10 look what scientists are saying:
11 <blockquote cite="The Forest Elephant in Borneo">
12 <h1>Borneo
13 <p>The forest element lives in Borneo...
14 </blockquote>
15 </section>
16 </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:
1 section, article, aside, footer, header, nav, hgroup {
2 display:block;
3 }
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:
01 <!--[if IE]>
02 <script>
03 document.createElement("header" );
04 document.createElement("footer" );
05 document.createElement("section");
06 document.createElement("aside" );
07 document.createElement("nav" );
08 document.createElement("article");
09 document.createElement("hgroup" );
10 document.createElement("time" );
11 </script>
12 <![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:
1 <noscript>
2 <strong>Warning !</strong>
3 Because your browser does not support HTML5, some elements are simulated using JScript.
4 Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
5 </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:
01 <!--[if IE]>
02 <script>
03 document.createElement("header" );
04 document.createElement("footer" );
05 document.createElement("section");
06 document.createElement("aside" );
07 document.createElement("nav" );
08 document.createElement("article");
09 document.createElement("hgroup" );
10 document.createElement("time" );
11 </script>
12 <noscript>
13 <strong>Warning !</strong>
14 Because your browser does not support HTML5, some elements are simulated using JScript.
15 Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
16 </noscript>
17 <![endif]-->

Conclusion

Brian Wilson arrested for 'failing to surf': Rare footage from 1976"


'It's OK: The Beach Boys' 15th Anniversary TV Special aired in 1976 on NBC. It was a weird affair created when Brian Wilson was at the lowest ebb of his struggle with substance abuse and depression. Produced by Lorne Michaels and written by John Belushi and Dan Aykroyd, the show features a barely willing Wilson lured back into the studio and, in a bit that is both funny and sad, onto the beach and a surfboard. As most of us know, Brian was not a surfer and in this clip he's barely a pedestrian. I have a feeling this may have been therapeutic for Brian.'

and if this comment is not posted here, don't worry, it will soon be occupying the Number 1 Position on Dogmeat's (and all of my other five blogs).
In this section, we discuss the lesser known forest elephants. 04 ...this section continues... 05
Posted

by

| Viewed
times Filed under:


Tags





FEELING VERY SEMANTIC!

Re: Dangerous Minds'

Marc Campbell

More to come after I get organized

for what Should be the most HTML5 HUMILIATION Penned YET!
to get a start check out the tag I created for the sleaziest blogger in blogdom upon first being alerted to a baby plagiarist's pattern in the making
The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with standard semantics.
element with HTML Heading Elements
Marc Campbell: You are without a doubt the biggest sleazeball who ever owned a computer and pretended to blog.
The relationships of these HTML Dividing and HTML Heading Elements leads to the structure of the document and its outline. So the following mark-up: 01
02

You have been following my blog and my uploaded videos

(this one from 2007, located on 123video.nl under my user account 'mrjyn') for over a year now.



in response to Marc Campbell's posting to Dangerous Minds from 5.1.11

06

07Every time I visit this site to TRY to enjoy it, I'm punched in the face by Marc Campbell's sleazy, disrespectful plagiarism



(and subsequent REcollection of my very 'one of a kind' videos to this blog's Vimeo).



I have finally decided to institute something on my blog which I should have done upon initial discovery.



08 ...this subsection continues... 09
10
leads to the following outline: 1. Marc Campbell, Dangerous Minds 1.1 Plagiarism, The
elements aren't mandatory to define a new section. The mere presence of an HTML Heading Element is enough to imply a new section. Therefore, 1
2
In this section, we discuss . 3 ...this section continues ... 4
5

Latest Dangerous Minds' Marc Campbell Ripoff



Instead, I notified the founder of this blog, whereupon I received a disingenuous apology from Marc Campbell via YouTube mail stating,





. 6 ...this subsection continues... 7

8This time, I'm going to take every opportunity that I have (having just celebrated 4000000 views in a year, I can think of a few) to publicly embarrass you and jeopardize the reputation of everyone associated with this blog.

(It appears they aren't concerned with authenticity either).



Look for your very own page titled with yours and this blog's name, documenting the scores of posts and videos which you have continued to crank out via some unexplainable pathology, homoerotic infatuation, or what I'm guessing is behavior perfectly describing 'the laziest, most unimaginative, unethical blogger who ever pretended to blog'.

Mongolian gerbils

leads to the following outline: 1. Forest elephants 1.1 Habitat 1.2 Diet 2. Mongolian gerbils Problems Solved by HTML5 The HTML 4 definition of the structure of a document and its implied outlining algorithm is very rough and leads to numerous problems: Usage of
for defining semantic sections, without defining specific values for the class attributes makes the automation of the outlining algorithm impossible ("Is that
part of the outline of the page, defining a section or a subsection?" Or "is it only a presentational
, 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 assistive technology, 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
elements from the outlining algorithm by introducing a new element, , the HTML Section Element. 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 ( , , and ) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings. Because each HTML Heading Element is part of the outline, it is not possible to describe a subtitle or secondary title (e.g.,

Justine

Les Malheurs de la Vertu

creates the outline 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduces the element that hides all the heading elements except the first one of the highest rank (e.g.,

Justine

Les Malheurs de la Vertu

creates the outline 1. Justine). 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 element allowing such sections to not be part of the main outline. Again, in HTML4, because every section is part of the document outline, there is no way to have section 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 specific sections elements: for collections of links, such as a table of contents, and for site-related information. 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. The HTML5 Outline Algorithm Defining Sections in HTML5 All content lying inside the element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the element, sections limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within , , , , , , and tags. Example: 01 02

Suddenly Feel VERY SEMANTIC (Latest Dangerous Minds' Marc Campbell Ripoff)

03 04

Introduction

05
In this section, we discuss the lesser known forest elephants 06
07 08

Habitat

09
Forest elephants do not live in trees but among them. 10
11 12
advertising block 13
14 15 16
(c) 2010 The Example company 17
This HTML snippet defines two top-level sections:

Forest elephants

Introduction

In this section, we discuss the lesser known forest elephants

Habitat

Forest elephants do not live in trees but among them.
advertising block
(c) 2010 The Example company
The first section has three subsections:

Forest elephants

Introduction

In this section, we discuss the lesser known forest elephants

Habitat

Forest elephants do not live in trees but among them.
advertising block
(c) 2010 The Example company
This leads to the following structure: 1. Section 1.1 Section 1.2 Section 1.3 Section (aside) 2. Section (footer 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 trivial: the first HTML heading element (one of

,

,

,

,

,
) defines the heading of the current section. The heading elements have a rank given by the number in the element name, where

has the highest rank, and

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

Forest elephants

03
In this section, we discuss the lesser known forest elephants. 04 ...this section continues... 05
06

Habitat

07
Forest elephants do not live in trees but among them. 08 ...this subsection continues... 09
10 11 12

Mongolian gerbils

13
In this section, we discuss the famous mongolian gerbils. 14 ...this section continues... 15
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

for the first top-level section,

for the subsection and

for the second top-level section) is not important: though less clear and not recommended, any rank can be used as the heading of an explicitly-defined section. 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 (

to

) 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: 1 2

Forest elephants

3
In this section, we discuss the lesser known forest elephants. 4 ...this section continues... 5

Habitat

6
Forest elephants do not live in trees but among them. 7 ...this subsection continues... 8
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: 1 2

Forest elephants

3
In this section, we discuss the lesser known forest elephants. 4 ...this section continues... 5

Mongolian gerbils

6
Mongolian gerbils are cute little mammals. 7 ...this section continues... 8
leading to the following outline: 1. Forest elephants 2. Mongolian gerbile (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: 01 02

Mammals

03

Whales

04
In this section, we discuss the swimming whales. 05 ...this section continues... 06
07

Forest elephants

08
In this section, we discuss the lesser known forest elephants. 09 ...this section continues... 10

Mongolian gerbils

11
Forest elephants do not live in trees but among them. 12 ...this subsection continues... 13

Reptiles

14
Reptiles are animals with cold blood. 15 ...this subsection continues... 16
17 leading to the following outline: 1. Mammals 1.1 Whales 1.1.1 Forest elephants 1.1.2 Mongolian gerbils 1.2 Reptiles 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: 1 2

Justine

3

Les Malheurs de la vertu

4 leads to the following outline: 1. Justine 1.1 Les Malheurs de la vertu the secondary heading may be used for a tag list: 1 2

Section and outlines of a document

3

HTML, HTML5, Sections, Outlines

4 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 ( introduced in HTML5. It hides all headings from the outside, except the first one, allowing an override the implicit sectioning. With this element the secondary book example: 1 2 3

Justine

4

Les Malheurs de la vertu

5 6 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 which is the logical sectioning root of a document, these are elements that introduced external content added to the page:
, ,
, and . Example: 01 02

Forest elephants

03 04

Introduction

05
In this section, we discuss the lesser known forest elephants 06
07 08

Habitat

09
Forest elephants do not live in trees but among them. Let's 10 look what scientists are saying: 11
12

Borneo 13

The forest element lives in Borneo... 14
15 16 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: 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. 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. 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. 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: 1 section, article, aside, footer, header, nav, hgroup { 2 display:block; 3 } 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: 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: 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: The new sections and headings 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 understanding the page, for instance people needing the help of some assistant 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.
The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with a standard semantics. This document describes these elements and how to use them to define the desired outline for any document.

Structure of a Document in HTML 4

The structure of a document, i.e., the semantic struture of what is between <body> and </body>, is fundamental to presenting the page to the user. HTML4 uses the notion of sections and sub-sections of a document to describe its structure. A section is defined by an HTML Dividing ( <div>) element with HTML Heading Elements ( <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>) within it, defining its title. The relationships of these HTML Dividing and HTML Heading Elements leads to the structure of the document and its outline.
So the following mark-up:
01 <DIV class="section" id="forest-elephants" >
02 <H1>Forest elephants</H1>
03 <P>In this section, we discuss the lesser known forest elephants.
04 ...this section continues...
05 <DIV class="subsection" id="forest-habitat" >
06 <H2>Habitat</H2>
07 <P>Forest elephants do not live in trees but among them.
08 ...this subsection continues...
09 </DIV>
10 </DIV>
leads to the following outline:
1. Forest elephants
   1.1 Habitat
The <div> elements aren't mandatory to define a new section. The mere presence of an HTML Heading Element is enough to imply a new section. Therefore,
1 <H1>Forest elephants</H1>
2 <P>In this section, we discuss the lesser known forest elephants.
3 ...this section continues...
4 <H2>Habitat</H2>
5 <P>Forest elephants do not live in trees but among them.
6 ...this subsection continues...
7 <H2>Diet</H2>
8 <H1>Mongolian gerbils</H1>
leads to the following outline:
1. Forest elephants
   1.1 Habitat
   1.2 Diet
2. Mongolian gerbils

Problems Solved by HTML5

The HTML 4 definition of the structure of a document and its implied outlining algorithm is very rough and leads to numerous problems:
  1. Usage of <div> for defining semantic sections, without defining specific values for the class attributes makes the automation of the outlining algorithm impossible ("Is that <div> part of the outline of the page, defining a section or a subsection?" Or "is it only a presentational <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 assistive technology, 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 <div> elements from the outlining algorithm by introducing a new element, <section>, the HTML Section Element.
  2. 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 ( <article>, <section>, <nav> and <aside>) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.
  3. Because each HTML Heading Element is part of the outline, it is not possible to describe a subtitle or secondary title (e.g., <h1>Justine</h1><h2>Les Malheurs de la Vertu</h2> creates the outline 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduces the <hgroup> element that hides all the heading elements except the first one of the highest rank (e.g., <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> creates the outline 1. Justine).
  4. 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 <aside> element allowing such sections to not be part of the main outline.
  5. Again, in HTML4, because every section is part of the document outline, there is no way to have section 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 specific sections elements: <nav> for collections of links, such as a table of contents, <footer> and <header> for site-related information.
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.

The HTML5 Outline Algorithm

Defining Sections in HTML5

All content lying inside the <body> element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the <body> element, sections limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within <body>, <section>, <article>, <aside>, <footer>, <header>, and <nav> tags.
Example:
01 <section>
02 <h1>Forest elephants</h1>
03 <section>
04 <h2>Introduction</h2>
05 <p>In this section, we discuss the lesser known forest elephants
06 </section>
07 <section>
08 <h2>Habitat</h2>
09 <P>Forest elephants do not live in trees but among them.
10 </section>
11 <aside>
12 <p>advertising block
13 </aside>
14 </section>
15 <footer>
16 <p>(c) 2010 The Example company
17 </footer>
This HTML snippet defines two top-level sections:
 <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. 
  </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>     
     <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. 
   </section>
   <aside>
     <p>advertising block
   </aside>
 </section>
 <footer>
   <p>(c) 2010 The Example company
 </footer>
This leads to the following structure:
1. Section
   1.1 Section
   1.2 Section
   1.3 Section (aside)
2. Section (footer
 

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 trivial: 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:
01 <section>
02 <h1>Forest elephants</h1>
03 <p>In this section, we discuss the lesser known forest elephants.
04 ...this section continues...
05 <section>
06 <h2>Habitat</h2>
07 <p>Forest elephants do not live in trees but among them.
08 ...this subsection continues...
09 </section>
10 </section>
11 <section>
12 <h3>Mongolian gerbils</h3>
13 <p>In this section, we discuss the famous mongolian gerbils.
14 ...this section continues...
15 </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: though less clear and not recommended, any rank can be used as the heading of an explicitly-defined section.

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:
1 <section>
2 <h1>Forest elephants</h1>
3 <p>In this section, we discuss the lesser known forest elephants.
4 ...this section continues...
5 <h3 class="implicit subsection">Habitat</h3>
6 <p>Forest elephants do not live in trees but among them.
7 ...this subsection continues...
8 </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:
1 <section>
2 <h1>Forest elephants</h1>
3 <p>In this section, we discuss the lesser known forest elephants.
4 ...this section continues...
5 <h1 class="implicit section">Mongolian gerbils</h1>
6 <p>Mongolian gerbils are cute little mammals.
7 ...this section continues...
8 </section>
leading to the following outline:
1. Forest elephants
2. Mongolian gerbile (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:
01 <body>
02 <h1>Mammals</h1>
03 <h2>Whales</h2>
04 <p>In this section, we discuss the swimming whales.
05 ...this section continues...
06 <section>
07 <h3>Forest elephants</h3>
08 <p>In this section, we discuss the lesser known forest elephants.
09 ...this section continues...
10 <h3>Mongolian gerbils</h3>
11 <p>Forest elephants do not live in trees but among them.
12 ...this subsection continues...
13 <h2>Reptiles</h2>
14 <p>Reptiles are animals with cold blood.
15 ...this subsection continues...
16 </section>
17 </body>
leading to the following outline:
1. Mammals
1.1 Whales
1.1.1 Forest elephants
1.1.2 Mongolian gerbils 
1.2 Reptiles

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:
    1 <section>
    2 <h1>Justine</h1>
    3 <h2>Les Malheurs de la vertu</h2>
    4 </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:
    1 <section>
    2 <h1>Section and outlines of a document</h1>
    3 <h2>HTML, HTML5, Sections, Outlines</h2>
    4 </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 outside, except the first one, allowing an override the implicit sectioning. With this element the secondary book example:
1 <section>
2 <hgroup>
3 <h1>Justine</h1>
4 <h2>Les Malheurs de la vertu</h2>
5 </hgroup>
6 </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 elements that introduced external content added to the page: <blockquote>, <details>, <fieldset>, <figure> and <td>.
Example:
01 <section>
02 <h1>Forest elephants</h1>
03 <section>
04 <h2>Introduction</h2>
05 <p>In this section, we discuss the lesser known forest elephants
06 </section>
07 <section>
08 <h2>Habitat</h2>
09 <p>Forest elephants do not live in trees but among them. Let's
10 look what scientists are saying:
11 <blockquote cite="The Forest Elephant in Borneo">
12 <h1>Borneo
13 <p>The forest element lives in Borneo...
14 </blockquote>
15 </section>
16 </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:
1 section, article, aside, footer, header, nav, hgroup {
2 display:block;
3 }
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:
01 <!--[if IE]>
02 <script>
03 document.createElement("header" );
04 document.createElement("footer" );
05 document.createElement("section");
06 document.createElement("aside" );
07 document.createElement("nav" );
08 document.createElement("article");
09 document.createElement("hgroup" );
10 document.createElement("time" );
11 </script>
12 <![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:
1 <noscript>
2 <strong>Warning !</strong>
3 Because your browser does not support HTML5, some elements are simulated using JScript.
4 Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
5 </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:
01 <!--[if IE]>
02 <script>
03 document.createElement("header" );
04 document.createElement("footer" );
05 document.createElement("section");
06 document.createElement("aside" );
07 document.createElement("nav" );
08 document.createElement("article");
09 document.createElement("hgroup" );
10 document.createElement("time" );
11 </script>
12 <noscript>
13 <strong>Warning !</strong>
14 Because your browser does not support HTML5, some elements are simulated using JScript.
15 Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
16 </noscript>
17 <![endif]-->

Conclusion

Brian Wilson arrested for 'failing to surf': Rare footage from 1976"





'It's OK: The Beach Boys' 15th Anniversary TV Special aired in 1976 on NBC. It was a weird affair created when Brian Wilson was at the lowest ebb of his struggle with substance abuse and depression. Produced by Lorne Michaels and written by John Belushi and Dan Aykroyd, the show features a barely willing Wilson lured back into the studio and, in a bit that is both funny and sad, onto the beach and a surfboard. As most of us know, Brian was not a surfer and in this clip he's barely a pedestrian. I have a feeling this may have been therapeutic for Brian.'





and if this comment is not posted here, don't worry, it will soon be occupying the Number 1 Position on Dogmeat's (and all of my other five blogs).
In this section, we discuss the lesser known forest elephants. 04 ...this section continues... 05