HTML and CSS Reference
In-Depth Information
belong to the
sectioning content
model. HTML5 also introduces new elements for marking a header or
footer within one of these sections, or for the entire document.
Before the advent of HTML5, you would have probably used a generic division (the
div
element, covered
later in this chapter) in place of every one of these structural elements, and you still can. But a
div
element is semantically shallow. It's useful for collecting related content into a nonspecific box, but a
div
says nothing else about what that content means or what purpose it may serve. These new sectioning
elements each have a specific meaning and serve a specific purpose.
All of these elements require end tags, and there are no required or optional attributes for any of them,
apart from the standard global attributes.
section
The
section
element defines just what it says: a section of content. But rather than a completely generic
box, the
section
element groups
thematically related content
. It collects content that, when taken together
as a whole, serves a single purpose or is related to the same topic. That's still a pretty vague definition,
and deliberately so. The
section
element is multi-purpose, and can be applied in a number of situations.
It defines a section of thematically related content, but not any particular
kind
of content.
In Listing 4-1 you see a basic HTML document with its content divided into three sections: an introduction,
recent news, and some general information. This document is pretty light on content, but if you imagine it
filled with lengthy blocks of text, you can see how breaking it down into a few relevant chunks via
section
elements could help you keep things organized. A
section
element should usually begin with a heading
(covered later in this chapter) to introduce the content, but that isn't a requirement.
Listing 4-1.
An HTML document split into three major sections
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Power Outfitters - Superhero Costume and Supply Company</title>
</head>
<body>
<section class="intro">
<h1>Welcome, Heroes!</h1>
<p>Power Outfitters offers top of the line merchandise at
rock-bottom prices for the discerning costumed crime-fighter.
From belts to boomerangs, we're your one-stop shop for all
your specialized gadgetry and costuming needs.</p>
</section>
<section class="news">
<h2>Latest News</h2>
<p>Small things, big savings. All shrink rays are on sale,
this week only!</p>
</section>
