Home > Articles > Web Development > HTML/CSS

This chapter is from the book

This chapter is from the book

Intermediate Recipe: Using the New article Element

The article element and the section element (discussed in the next section) are arguably the two most important new HTML5 structural elements, but they are also two of the most confusing.

The article element is an independent block of content; it is content that could exist in its own right and content that is reusable. Consider content you see in an RSS feed; the content is nearly always individual articles. You could take them out of the feed, and they make sense on their own.

The HTML5 specification suggests some examples of how an article element can be used, such as a forum post, a magazine or newspaper article, a blog entry, or a user-submitted comment.

Listing 1.8 uses the article element to mark up a news item, as displayed in Figure 1.7.

Figure 1.7

Figure 1.7 Basic article element with content (no styling applied)

Listing 1.8. Marking Up a News Item in an article Element

   <article>
     <header>
      <h1>HTML5 saves millions!</h1>
      <p>32nd October 2010</p>
     </header>
     <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et
     malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
     ultricies eget...</p>
     <h2>Another heading</h2>
     <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
     </ol>
     <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna.
    Cras in mi at felis aliquet congue. Ut a est eget ligula molestie
    gravida. ...p></blockquote>
     <h3>And another heading</h3>
     <ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
     </ul>
     <p>This article was published in the HTML5 Times on Sunday 32nd October, 2010,
     and was written by Tom Leadbetter</p>
   </article>

This blog/news entry is an article because it is a separate piece of content. Would it appear in syndication (that is, an RSS feed)? Yes! Does it make sense on its own? Yes! It is an article then.

As you will discover in later chapters, you can nest a section within an article, and you can nest an article inside a section.

The HTML5 specification says an article is an "independent item of content," and it even says that blog comments can be articles.

  • + Share This
  • 🔖 Save To Your Account