"article" and "section" Elements

This section provides an tutorial example of using 'article' and 'section' elements in HTML documents to organize content into a hierarchical structure.

"article" and "section" elements are added in HTML5 standard to allow us to organize HTML document content into a hierarchical section structure. Here are some general rules about "article" and "section" elements:

1. "article" elements are used to create sections of independent contents.

2. "section" elements are used to create sections of related contents.

3. "article" and "section" elements can be nested to create a hierarchical section structure.

Here is a good example of using "article" and "section" elements in HTML documents:

<!DOCTYPE html>
<!-- HTML5_article_and_section_Example.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head>
<title>HTML5 article and section Example</title>
</head>
<body>
 <p>Collection of Articles</p>
 
 <article>
  <p>First Article</p>

  <section>
   <p>First section in first Article</p>
  </section>

  <section>
   <p>Second section in first Article</p>
  </section>
 </article>

 <article>
  <p>Second Article</p>
 </article>
</body>
</html>

Last update: 2014.

Table of Contents

 About This Book

 Introduction of HTML

Introduction of HTML5 Features

 What Is HTML5?

 Differences between HTML5 and HTML 4

 HTML5 DOCTYPE Declaration

 Adding Inline SVG Image in HTML5 Documents

 Adding MathML Formula in HTML5 Documents

"article" and "section" Elements

 "header" and "footer" Elements

 "nav" and "aside" Elements

 "details" and "summary" Elements

 "figure" and "figcaption" Elements

 "audio" and "video" Elements

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 References

 PDF Printing Version