Last time we had discussion about what is HTML5? Today we’ll have a look on our first HTML5 basic (Simple one) layout. Here we have put together just a very basic layout of HTML5 just to provide a rough sketch for the upcoming future code. First let’s have a look at our layout.
As you can see, basically our template is divided into four sections.
- Header
- Main content
- Sidebar
- Footer
Now, let’s have a look on our code.
[sourcecode language=”html”]
Page Title
<!– meta tags –>
<!– stylesheets –>
<!– javascript –>
<script src="js/jquery-1.3.2.min.js"><!–mce:0–></script>
<!–conditional comments –>
<!–[if IE]>
<mce:script _mce_src="js/html5.js"></mce:script>
<![endif]–>
<div id="wrapper">
<div id="company_name">
<a href="/">
<h1>Your Company Name</h1>
</a></div>
<ul>
<li class="current"><a href="#">Home</a></li>
<li style="color: red;"><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h1>HTML5 Demonstration</h1>
<h2>Here is an example</h2>
<img src="images/html5logo.png" alt="" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sagittis porta mauris, iaculis egestas metus posuere sit amet. Sed ullamcorper orci eu dolor egestas sodales. Donec tempor aliquet pulvinar. Sed sed turpis sapien, ac dictum sem. Phasellus metus leo, gravida in imperdiet sit amet, bibendum id magna. Vivamus ac nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis justo ligula. Suspendisse sodales ultricies consequat. Aenean condimentum eros mi. Duis consectetur placerat vehicula. Fusce vel massa erat.
<h2>A demonstration of list items</h2>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<h2>Aside Content</h2>
Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit. Aenean vulputate interdum augue, sed dapibus mi Aenean vulputate Aenean vulputate interdum augue, sed dapibus mi Aenean
<ul>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
<ul>
<li><img src="images/facebook.png" alt="" /><a href="#">Follow us on Facebook</a></li>
<li><img src="images/linkedin.png" alt="" /><a href="#">Follow us on Linked in</a></li>
<li><img src="images/twitter.png" alt="" /><a href="#">Follow us on Twitter</a></li>
</ul>
<ul>
<li class="current"><a href="#">Home</a> <span>|</span></li>
<li><a href="#">About Us</a><span>|</span></li>
<li><a href="#">Services</a><span>|</span></li>
<li><a href="#">Portfolio</a><span>|</span></li>
<li><a href="#">Contact Us</a></li>
</ul>
Copyright © 2012, Company Name</div>
[/sourcecode]
- Header
In this part it contains a place for company name at top and navigation included inside <header> tag. Header tag is used to define header of the page and <nav> tag is used to define navigation.
- Main Content and Sidebar
Main content and sidebar is placed inside <article> tag. Article tag is used to define the subsection of this page.
- Main content is placed inside <section> tag which works similar as <div>.
<hgroup> is used for grouping titles and subtitles associated with. This tag is typically used to group one or more sets of h1-h6 elements. Image is placed inside <figure> tag. The interesting thing is you can write image src with or without inverted “comas”. For example:
<img src = images/html5logo.png >
OR
<img src = “images/html5logo.png” >
Both of them are accepted by HTML5.
I hope I don’t need to define p, ul and li tags.
The <aside> element is used to define sidebar (you can use it for both left and right bar) apart from main content of the page.
- Footer
Footer tag is used to define footer for the page. Remember, footer tag, is not only used to define the footer for the page but also for any section of the page. You can use this tag multiple times within a document.
While going through this code you might be thinking “Does all the browsers supports HTML5 and its tag?”. The answer to the question is both yes and no. Because yes some of the browsers support HTML5 and no as many browsers don’t recognize most of HTML5 elements. However, we are already able to play with HTML5 structural elements and the W3C HTML validator is now able to validate code to the HTML5 allowing us to learn more about HTML5 structural elements.
