- Beginner Recipe: Building an HTML5 Starter Document
- Where Do All the New Elements Come From?
- Beginner Recipe: Using the header Element to Create a Site Header
- Beginner Recipe: Using the hgroup Element to Group Headings
- Beginner Recipe: Creating Navigation with the nav Element
- Intermediate Recipe: Using the New article Element
- Intermediate Recipe: Grouping Content with the section Element
- Beginner Recipe: Creating a Sidebar with the aside Element
- Beginner Recipe: Using the footer Element
- Intermediate Recipe: Using the HTML5 Outliner to Ensure the Correct Structure
- Advanced Recipe: Using All the New Elements to Build a News Page
- Advanced Recipe: Using All the New Elements to Build a Search Results Page
- Summary
This chapter is from the book
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.
){kind=link}
)
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.