HTML and CSS Reference
In-Depth Information
content can be placed in a section element without having to reduce all the
headings by one level. Remember, there should be only one level-one heading
on a page. he exception to this rule is when a page is composed of multiple
sections. In that case, each section is allowed to retain the level-one heading it
would have when published on its own. Although a section element may con-
tain other sections, a section's parent element should only be another section
or the body element. It would be incorrect to have a section inside a division.
Also in HTML5, a number of elements behave as divisions but actually pro-
vide speciic semantic meaning for robots and other HTML processors.
he
article
element,
<article></article>
, should be used when marking
up content that is article-like, such as the posts on a blog or the articles in an
online magazine. Like the section element, an
article
element can contain all
markup that would be appropriate if the article was published on a page by
itself, including a single
address
element with authorship information. Unlike
the
section
element, an article should not be nested inside another article.
Similarly, the
navigation
(
<nav></nav>
),
header
(
<header></header>
), and
footer
(
<footer></footer>
) elements are semantic markup intended to provide
more information for search robots and other nonhuman readers than can
be gleaned from division elements. To illustrate, consider a web page using
division elements with
id
and
class
attributes to deine the various parts of the
page. Example 2.18 shows the HTML. Figure 2.18 shows how this page appears
in a browser.
Example 2.18: HTML divisions
<!DOCTYPE html>
<html>
<head>
<title>Example 2.18</title>
<style type="text/css">
body { padding: 0 36px; }
h1 { font-family: sans-serif; padding-top: 60px; }
#header { margin-bottom: 36px; }
#header img { float: left; }
#header a { text-decoration: none; }
#top-menu,
#bottom-menu { margin-left: -36px; }
