Creating a Sample HTML5 Structure
TML5 is the thing that developers are starting to take a look more and more. More and more browsers are getting compatible with it and with the iPhone choosing this as it???s main multimedia language I have no doubt that this will be demanded in great quantities. In this post I will explain how to create a sample HTML5 structure for your web site.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Sample HTML5 Structure</title>
<style>
header, nav, article, footer, address, section {
ξdisplay: block;
}
#container {
ξwidth:900px;
ξmargin:auto;
ξbackground-color:white;
}
header {
ξbackground-color:#666;
}
nav li {
ξdisplay:inline;
ξpadding-right:1em;
}
nav a {
ξcolor:white;
ξtext-decoration:none;ξ
}
nav a:hover {
ξtext-decoration:overline;ξ
}
h1, h2 {
ξmargin:0px;
ξfont-size:1.5em;
}
h2 {
ξfont-size:1em;
}
footer {
ξbackground-color:#999;
ξtext-align:center;
}
</style>
<script>
document.createElement("article");ξ
document.createElement("footer");ξ
document.createElement("header");ξ
document.createElement("hgroup");ξ
document.createElement("nav");ξ
</script>
</head>
<body>
<div id="container">
ξξξ <header>
ξξξ ξ<h1>Sample HTML5 Structure</h1>
ξξξξξξξ <nav>
ξξξξξξξξξξξ <ul>
ξξξξξξξξξξξξξξξ <li><a href="#">Home</a></li>
ξξξξξξξξξξξξξξξ <li><a href="#">About</a></li>
ξξξξξξξξξξξ </ul>
ξξξξξξξ </nav>
ξξξ </header>
ξξξ <section>
ξξξ ξ<hgroup>
ξξξξξξξ ξ<h1>Main Section</h1>
ξξξξξξξξξξξ <h2>This is a sample HTML5 Page</h2>
ξξξξξξξ </hgroup>
ξξξ ξ<article>
ξξξξξξξ ξ<p>This is the content for the first article</p>
ξξξξξξξ </article>
ξξξξξξξ <article>
ξξξξξξξ ξ<p>This is the content for the second article</p>
ξξξξξξξ </article>
ξξξ </section>
ξξξ <footer>
ξξξ ξ<p>This is the Footer</p>
ξξξ </footer>
</div>
</body>
</html>
As you can see the syntax is very similar, the start tags changed somewhat, but it makes it more convinient for the coder. Alsoas you can see now instead of making separate divs to stylize the header and footer, now HTML5 gives you a specified tag for each of them. The <nav> tag is the where your main site navigation will be at. You can also see the <section> tag, this will define the differents parts of your page, for example articles, blogroll, etc.ξ The <hgroup> tag is used to group various content heading, for example when you have an Article title and a Subtitle.
The JavaScript part of the code will create the tags so that older browsers and IE will accept them. This step is very important, if you do go ahead and skip it then older browsers will have trouble understanding your ode and the results will vary a lot.
Please leave any comments and/or suggestions below,
Gilberto Cortez
