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.
The structure of a document, i.e., the semantic structure of what is between and , 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 (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.,
,
,
,
, or
See the following Mark up
Forest elephants
In this section, we discuss the lesser known forest elephants. ...this section continues...
Habitat
Forest elephants do not live in trees but among them. ...this subsection continues...
Here is the Output for above program
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,
Forest elephants
In this section, we discuss the lesser known forest elephants. ...this section continues...
Habitat
Forest elephants do not live in trees but among them. ...this subsection continues...
Diet
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:
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) 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.
4) 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, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within body, section, article, aside, footer, header, and nav tags.
Example :Forest elephants
Introduction
In this section, we discuss the lesser known forest elephants.
Habitat
Forest elephants do not live in trees but among them.
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.
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.
This leads to the following structure:
1. Forest elephants
1.1 Introduction
1.2 Habitat
1.3 Section (aside)
