Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 1. New Structural Elements in HT... > Intermediate Recipe: Using the New a...

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. 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.

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint