Basic HTML 5 layout
Today we are going to have a quick look into the layout of HTML 5, we have put together a very basic HTML 5 page so that you can get a rough idea of what to expect from the upcoming code.
HTML 5 example layout
As you can see it is a very basic page, however you will need to start from the bottom with HTML 5 as it varies quite a lot from the old HTML 4 code reference.
Click here to preview our HTML 5 basic layout. Take a look at the HTML coding…
[stextbox id="alert" caption="Basic HTML 5 layout code:"]<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=utf-8>
<!– simplified version; works on legacy browsers –>
<title>Basic styling of new structural tags</title>
<style>
body {
background-color:#f4f4f4;
color: black;
text-align:center;
}
header, footer, nav, section, article {
display:block;
}
header {
width:100%;
background-color:yellow;
}
nav {
width:30%;
background-color:orange;
float:left;
}
section {
width:65%;
background-color:lightGreen;
float:right;
}
article {
width:70%;
margin:2em 10%;
background-color:turquoise;
}
footer {
width:100%;
background-color:pink;
clear:both;
}
article article {border:1px red solid; background-color:white;}
</style>
<!–[if IE]>
<script>
document.createElement(“header”);
document.createElement(“footer”);
document.createElement(“nav”);
document.createElement(“article”);
document.createElement(“section”);
</script>
<![endif]–>
<body>
<header>
<h1>Example #1</h1>
</header>
<nav>
<p>Menu</p>
</nav>
<section>
<p>Section</p>
<article>
<header>
<h1>article #1 Title</h1>
<p>Created on 2/9/2009</p>
</header>
<p>article 1</p>
<footer>Posted in the example category</footer>
</article>
<article>
<header>
<h1>article #2 Title</h1>
<p>Created on 3/9/2009</p>
</header>
<p>article 2</p>
<article>
<p>Comment 1</p>
</article>
<article>
<p>Comment 2</p>
</article>
<footer>Posted in the example category</footer>
</article>
</section>
<footer>
<p>The footer | HTML 5 example by <a href=”http://html5tutorial.net”>HTML 5 Tutorial<a/></p>
</footer>
</body>
</html>[/stextbox]
Currently the only browser to fully support HTML 5 reference code is Safari you can download it HERE.
Make sure you bookmark our website, we are in the process of putting together more HTML 5 tutorials.
Related Posts