HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
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
Table of Contents
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