Define Articles, Sections, and Asides in HTML5 Pages
Perhaps the most significant content structuring element in HTML5 is the article tag. Devotees of headers, footers, and even the relatively obscure time tag will be furious at the suggestion that the article tag is the big attraction in HTML5, but you can employ the article tag to organize page content into basic chunks, for lack of a better word.
The necessity to structure page content into articles is a positive factor in forcing content developers to organize ideas in a coherent way. And the article tag provides the framework for sections (within the article) and asides (sidebars to the article).
Divide articles into multiple sections
The following code defines an article and two section elements. It also includes some placeholder text and headings inserted after the closing </header> tag.
Note: Although you can technically embed a single section within an article, the concept of articles divided into sections is more effective if that’s avoided.
A basic rule of editing (and you can ask anyone who edits text for a living, and they’ll go on and on about this) is that if you’re going to divide an article up to make it easier to digest, it doesn’t help the reader organize his thinking to have only one subsection within a section of content. So — when sections are used — it’s best to have at least two sections placed within <article> tags.
<article> <h2>Article headline goes here</h2> <p>First article content goes here</p> <p>more article content goes here</p> <section> <h3>1st section heading goes here</h3> <p>1st section content goes here</p> <p>More 1st section content goes here</p> </section> <section> <h3>2nd section heading goes here</h3> <p>2nd section content goes here</p> <p>More 2nd section content goes here</p> </section> </article>
This code creates a page like the one shown here.
Add an aside element
As with all HTML5 page structure elements, the aside element is intended to be associated with a certain kind of content. Content such as images, text, or videos in an aside element should be dependent upon — that is, related to content and contributing to — an article or section of an article.
Should you use an aside element to enclose a navigation bar? Generally, no. Instead, navigation content should be encoded with the nav element, which we discuss a bit earlier in this chapter.
Some CSS styling attributes that are normally applied to HTML5 aside elements. As you can likely intuit, aside elements are generally laid out as sidebars. So, when you define a CSS style for the nav element, you use the CSS float property to allow the aside element to display as a right- or left-aligned box around which article content can flow.
The following code provides an example of an aside element within an article:
<article> <h3>Article heading goes here</h3> <p> Article content goes here </p> <aside>Sidebar content, related to the article, goes here </aside> <p>More article content goes here</p> </article>
You’ll want to combine HTML5 structure elements with styles that format the location, font, color, and other style attributes applied to these elements. The following figure, for instance, shows how an aside (KUDOS) might look next to the article with which it is associated (Experience).