AN@ND-Graphc's Jockey: Simple HTML 5 Layout

HTML 5 Layout - Tags with Structure

The Most prominent additions in HTML 5 are tags like <header>, <footer>, <aside>, <nav>, <audio> etc. HTML 5 will also include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more . Site layout would be easily understandable and in code, tags are easy to understand as well Like the few tags i listed above clearly explains that :

<header> = Header (Head area of the site)
<nav> = Navigation (Menu/Navigation Area)
<footer> = Footer Area
<aside> = An area on a side (Side Bar)

Normal HTML Structure

<!Doctype html>
<html lang="en">
<head>
         <title>Your Page title</title>
</head>
<body>
   <!-- Define Header -->
       <header>
       </header>
   <!-- End Header -->
<!-- Define Navigation/Menu -->
     <nav>
     </nav>
<!-- End Navigation -->
<!-- Main content area -->
<section>
</section>
<!-- End of Main content area -->
<!-- Sidebar -->
<aside>
</aside>
<!-- End Sidebar -->
<!-- Footer -->
<footer></footer>
<!-- End of Footer -->
</body>
</html>

Defining Header Tag:

<header>
<h1>HTML 5 Tutorial Sample </h1>
</header>

Defining Navigation Area with Few links in it:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>

Stylizing the Navigation with CSS3 for Rounded Corners:

nav {
width:77%;
height:40px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px; //for opera
background:#f3f3f3;
border:1px solid #cccccc;
position:absolute;
}
nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
width:940px;
}
nav ul li {
float:left;
}
nav ul li a{
margin-right:20px;
display:block;
line-height:40px;
}

Defining Sidebar <aside>:

<aside>
<section>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</aside>

Defining the Footer:

<footer>
<section>Anything you want to put in footer goes here. </section>
</footer>

Stylizing the Footer:

footer{background:#666666;
border-top:1px solid #cccccc;
padding:10px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-radius:5px; // for Opera
text-align:center;
color:#ffffff;
}

AN@ND-Graphc's Jockey

Translate

Thursday, June 21, 2012

Simple HTML 5 Layout