Sectioning Contents with Heading Elements

This section provides a tutorial example on how to create sub sections explicitly and implicitly using sectioning content element and heading elements together.

When creating sub sections using sectioning content elements of "article", "section", "nav" and "aside", you can also add headings in each sub section using heading elements.

Multiple heading elements in sub section can also create implicit next level sub sections with these guidelines:

1. The first heading element in a sub section represents the heading of this sub section.

2. Any subsequent heading element of equal or higher rank ends the current sub section and starts a new sub section. The heading element represents the heading of this new sub section.

3. Any subsequent heading element of lower rank adds a new sub section inside the current sub section and the heading element represents the heading of this new sub section.

Below is a good example of using sectioning content elements with heading elements together to create sub sections explicitly and implicitly:

<!DOCTYPE html>
<!-- Sections_with_Headings_Example.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head>
<title>Sectioning Contents with Heading Elements</title>
<body>
<h1>Apples Are Fruit</h1>

<section>
 <h2>Chapter 1. Introduction</h2>
 This is a book about apples.
</section>

<section>
 <h2>Chapter 2. Taste of Apples</h2>
 Apples taste lovely.

 <h3>Section 2.1. Taste of Red Apples</h3>
 Red apples are sweeter than green ones.

 <h3>Section 2.2. Taste of Green Apples</h3>
 Green apples taste sour.
</section>

<section>
 <h2>Chapter 3. Colors of Apples</h2>
 Apples come in various colors.
</section>

<nav>
 <h2>References</h2>
 Wikipedia, Food Network, ...
</nav>

<article>
 <h2>Appendix - Making Apple Pie</h2>
 Preheat oven to 425 degrees F (220 degrees C). 
 Melt the butter in a saucepan. 
 Stir in flour to form a paste. 
 Add water, white sugar and brown sugar, and bring to a boil. 
 Reduce temperature and let simmer.
</article>

<aside>
 <h2>Sidebar Note - Apples of Eden</h2>
 Apple is the forbidden fruit eaten by Adam and Eve 
 in the Garden of Eden. 
</aside>
</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:

    Apples Are Fruit
        Chapter 1. Introduction
        Chapter 2. Taste of Apples
            Section 2.1. Taste of Red Apples
            Section 2.2. Taste of Green Apples
        Chapter 3. Colors of Apples
        References
        Appendix - Making Apple Pie
        Sidebar Note - Apples of Eden

Last update: 2014.

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

 References

 PDF Printing Version