- 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: Grouping Content with the section Element
The section element is an area of content or an area of a page that nearly always requires a heading. It can be used to group a whole, well, section of content, and it can be broken down into further sections if required. It is not to be used as a generic wrapper for styling purposes. A section can contain article elements, and article elements can have their content split into sections. So, as you saw with the article element, you need to think about when to use either article or section. Listing 1.9 is an example of when to use section, as shown in Figure 1.8.
)
Figure 1.8 Basic news page with sections highlighted (no styling applied)
Listing 1.9. Creating a Basic News Page with Sections for Different Types of News
<h1>Loads News</h1>
<section>
<h1>Sports News</h1>
<p>We'll put sports news here.</p>
</section>
<section>
<h1>Entertainment News</h1>
<p>Entertainment news will go here.</p>
</section>
<section>
<h1>Nerdy News</h1>
<p>News for nerds will go in this section of the page.</p>
</section>
In Figure 1.8, each section has its own header, and each section is completely separate from the other. If there were other content on the page, you could wrap it all together in one section and give that a heading of "Types of news we do":
<section>
<h1>Types of news we do</h2>
<section>
<h1>Entertainment News</h1>
<p>Entertainment news will go here.</p>
</section>
....
</section>
Additionally, you could split the "Nerdy News" section up into further sections:
<section>
<h1>Types of news we do</h2>
<section>
<h1> Nerdy News </h1>
<p>News for nerds will go in this section of the page.</p>
<section>
<h2>Gaming news</h2>
...
</section>
<section>
<h2>Gadget news</h2>
...
</section>
</section>
....
</section>
Which Should You Use: article or section?
The section element is used similarly to how you use the div tag now. But unlike div, section has semantic meaning; it is the grouping of related content.
A section can have articles within it. Think of a news page; it might have a news section and, then within that, different news categories.
You might have a heading of "News" and then all the different types of news, like a newspaper. In HTML4, you would wrap this in a div, but you can wrap this all in a section now. Each type of news would then be in its own section, with its own heading.
If you think the content would make sense on its own, then it is an article. The HTML5 flowchart is a handy tool that will help you decide what element to use: http://html5doctor.com/happy-1st-birthday-us.