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>
Search WWH ::




Custom Search