HTML and CSS Reference
In-Depth Information
HTML5 Document Structure Changes
As you have seen, the HTML5 document structure seems pretty much the same as in HTML
4 save a slightly different
<!DOCTYPE>
statement. However, if you look closer, there are a
few important differences in HTML5 that show the document structure has in fact been
expanded quite a bit.
HTML5 documents may contain a
header
element, which is used to set the header
section of a document and thus often contains the standard
h1
to
h6
heading elements:
<header>
<h1>
Welcome to the Future World of HTML5.
</h1>
<h2>
Don't be scared it isn't that hard!
</h2>
</header>
Similarly, a
footer
element is provided for document authors to define the footer
content of a document, which often contains navigation, legal, and contact information:
<footer>
<p>
Content of this example is not under copyright
</p>
</footer>
The actual content to be placed in a
<footer>
tag is, of course, up to you and may be
enclosed in
div
,
p
, or other block elements, as illustrated by this simple example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
HTML5 header and footer example
</title>
</head>
<body>
<header>
<h1>
Welcome to the Future World of HTML5.
</h1>
<h2>
Don't be scared it isn't that hard!
</h2>
</header>
<p>
Some body content here
.</p>
<p>
Some more body content here.
</p>
<footer>
<p>
Content of this example is not under copyright
.</p>
</footer>
</body>
</html>
O
NLINE
http://htmlref.com/ch2/headerfooter.html
The HTML5 structural element with the most possible uses is the
section
element. A
particular
<section>
tag can be used to group arbitrary content together and may contain
further
<section>
tags to create the idea of subsections. Traditionally, we are familiar with
sections; just as this topic is broken into chapters and various main and secondary sections,
