HTML and CSS Reference
In-Depth Information
features now? The answer is again yes, but this time with some caution. To demonstrate
why caution is required, the following is a simple example of the use of HTML sectioning
elements, introduced toward the start of the chapter, but now with some style applied to the
new HTML5 elements used:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
HTML5 Today?
</title>
<style type="text/css">
/* style up a few of the new elements */
article, aside, figure, footer, header,
hgroup, menu, nav, section { display: block;}
body > header {background-color: #930; color: white;}
body > footer {border-top: solid 5px black;}
h2 {margin-top: 0; font-style: italic;}
h3 {font-variant: small-caps;}
p {margin-left: 1.5em;}
section {border-top: dashed 2px black; padding-top: 1em;}
section > section h3 {margin-left: 2em;}
section > section p {margin-left: 3em;}
body > footer > p {text-align: right;
font-style: italic;
font-size: smaller;}
</style>
</head>
<body>
<header>
<h1>
Welcome to the Future World of HTML5
</h1>
<h2>
Don't be scared it isn't that hard!
</h2>
</header>
<!-- assume chapter 1 before -->
<section id="chapter2">
<header>
<h1>
Chapter 2
</h1>
</header>
<p>
Intro to chapter here...
</p>
<section id="newStrucreElements">
<header>
<h2>
New Structural Elements
</h2>
</header>
<h3>
header Element
</h3>
<p>
Discussion of header element.
</p>
<h3>
footer Element
</h3>
<p>
Discussion of footer element.
</p>
<h3>
section Element
</h3>