Recognizing Semantics - HTML5 Mastery: Semantics, Standards, and Styling - page 102

Figure 3-3. Flowchart for choosing a particular sectioning content element
First, the navigation can be wrapped in nav , because this section will define the main
navigational links for the web page (for this simplified example, the links have been
omitted, but they normally would not be). Next is the “Featured Content” area. Hmm,
this is an interesting one because it contains content (an article) that could be under-
standable on its own if it were separated from the rest of the website. It therefore could
be wrapped in an article . But wait a moment; is that really the most appropriate op-
tion? To tailor your markup to be semantically correct, you have to focus on the pur-
pose of a piece of content on the page; what does a particular section of content contain,
and what will it foreseeably contain in the future? The article element is made for
content that is completely self-contained and could be syndicated in an RSS feed, for
instance. In this example, the featured content area is for content that has been separated
from the rest of the content for the purposes of being prominently displayed on the site.
It therefore is arguably not self-contained, because it contains content that is emphasized
within a larger set of content on the site. Therefore, the designation of “Featured Con-
tent” is rather meaningless without the surrounding content. Additionally, the featured
content area could conceivably contain more than one article or other piece of content,
which may not be related at all. The area is for featured content, not necessarily related
content. If there were more content in this area, would it still make sense to bundle all
that content (related and unrelated) together and syndicate it? I think not. So, this leaves
us with a group of content that thematically fits together (in that it is all being featured)
but is not self-contained enough to be considered an article. This content is therefore
best left as being contained in a section .
Note The HTML5 specification aims to articulate the semantic uses of the elements
as best as possible, but there is still a world of content out there with varying meanings
and interpretations. While a flowchart such as Figure 3-3 helps narrow down when one
element will be more appropriate than another, you may well run into circumstances
where the answer to the question of which element to use becomes ambiguous. In these
cases, it is best to err on the side of a more generic element that will definitely fit a
given piece of content than to apply a more specific element that may or may not be
appropriate.
Next, the “Other News” section can be treated like “Featured Content.” It thematic-
ally groups content together (all content that is not featured) but is not self-contained
enough to warrant the use of an article , so it gets a section as well. The two art-
icles shown are self-contained and would make sense on their own, so they are wrapped
in article elements.