HTML and CSS Reference
In-Depth Information
body
The
body
element acts as a container for all of the page's contents, and that's pretty much all it does.
Everything that's displayed by the browser and seen by the user is wrapped in a single
body
element (and
only one
body
element is allowed per document). Its primary purpose is to separate regular content from
the metadata in the
head
element.
As with the
head
element, you can omit the start and end tags for the
body
element in some cases and the
element is still implied to exist. The browser will generate a
body
element even if the tags are missing, but
you can avoid potential problems by including the start and end tags yourself, just to be safe and keep
things tidy. Any content that appears outside the
body
element—actual or implied—could make the
document invalid, and that content might not be displayed.
There aren't any required attributes for the
body
element, nor any special optional attributes, but it can
carry the usual global attributes that apply to almost every other element. It can be especially useful to add
an
id
or
class
attribute to identify the specific page, or classify general types of pages. Listing 3-7 shows
a
body
element with the ID “home” and the class “landing”, indicating that this is a landing-type page and
that it's the home page, specifically.
Listing 3-7.
The
body
element, identified and classified
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Power Outfitters Superhero Costume and Supply Co.</title>
</head>
<body id="home" class="landing">
<h1>Welcome, Heroes!</h1>
<p>Power Outfitters offers top of the line merchandise at
rock-bottom prices for the discerning costumed crime-fighter.</p>
</body>
</html>
With these attributes in place on the
body
element, they can act as handy “hooks” from which to hang CSS
rules, differentiating common types of pages or specific, unique pages. Listing 3-8 shows a few style rules
for level one headings, the
h1
element. The first rule applies to all
h1
elements, the second to
h1
elements
on landing pages (any pages with the “landing” class), and the third is specific to
h1
elements on the home
page (with the ID “home”). Because every element on the page descends from the
body
element, these
rules with their descendant selectors will be in effect no matter where the
h1
might occur in the document
or what other elements might surround it—unless they're overridden by another style rule, of course.
Listing 3-8.
Using
body
attributes as style hooks in descendant selectors
h1 {
font-size: 20px;
}
.landing h1 {
font-size: 26px;
