"article" and "section" Elements

HTML Tutorials - Herong's Tutorial Examples

∟"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>