HTML Tutorials - Herong's Tutorial Examples

∟HTML Document Structure and Content

∟Headings and Implicit Sections

This section describes heading elements of h1, h2, h3, h4, h5 and h6 and guidelines on how the 'body' content is implicitly divided into sections by heading elements.

In HTML5, the document main content is defined as a single "body" element which can be divided implicitly into sections using heading elements following these guidelines:

1. "h1", "h2", "h3", "h4", "h5" and "h6" are heading elements of 6 ranks. "h1" is the highest rank heading. "h6" is lowest rank heading.

2. The first heading element in the "body" element represents the heading of the first section.

3. Any subsequent heading element of equal or higher rank in the "body" element starts a new section and the heading element represents the heading of this new section.

4. Any subsequent heading element of lower rank in the "body" element starts a new sub section inside the current section and the heading element represents the heading of this new sub section.

Below is a good example of a "body" element with heading elements that implicitly divide the content into 4 first-level sections. 2 second-level sections are also defined inside the 2nd first-level section. 

<!DOCTYPE html>
<!-- Implicit_Sections_Example.html
 - Copyright (c) 2014 HerongYang.com. All Rights Reserved.
-->
<html>
<head>
<title>Implicit Sections Example</title>
<body>

<h3>"1." Section Heading</h3>
Content of the "1." section.

<h3>"2." Section Heading</h3>
Content of the "2." section.

<h5>"2.1" Section Heading</h5>
Content of the "2.1" section.

<h5>"2.2" Section Heading</h5>
Content of the "2.2" section.

<h3>"3." Section Heading</h3>
Content of the "3." section.

<h1>"4." Section Heading</h1>
Content of the "4." section.

</body>
</html>

A HTML document browser could parse the sectioning structure and headings in the above HTML document to build a nice table of contents like this: 

    "1." Section Heading
    "2." Section Heading
        "2.1" Section Heading
        "2.2" Section Heading
    "3." Section Heading
    "4." Section Heading

Table of Contents

 About This Book

 Introduction of HTML

 Introduction of HTML5 Features

►HTML Document Structure and Content

 HTML Document Top Level Structure

 HTML Document Metadata Elements

►Headings and Implicit Sections

 Elements for Explicit Sub Sections

 Sectioning Contents with Heading Elements

 Paragraph and Flow Content Elements

 Text and Phrasing Content Elements

 HTML Document and Elements Syntax

 Displayed and Printed HTML Documents

 Responsive Design of Web Pages

 MathML Integration in HTML Documents

 References

 Full Version in PDF/EPUB