A sample webpage layout using HTML5

Here in this article I have explained most of the layout tags which are introduced in HTML5 for designing a webpage. All the tags, attributes and elements which are used in developing a webpage layout has been described.

A complete webpage layout using HTML5

Introduction to HTML5
HTML5 is a web language which is gaining very high momentum because of its very high potentiality in developing web apps. HTML5 basically is an extension or standard advanced version to HTML4.0. HTML5 with its release has been known as a counterpart to Flash. It is though that HTML5 has the potential to replace the use of flash. That is now the browser doesn't need to have flash player or even Microsoft's Silverlight installed on it. HTML5 itself be alone sufficient to run the embedded videos of the webpages and also sufficient to run the flash games of the webpages. This will also enable us to view the various extension files like .pdf, .doc, docx etc directly from the browser itself. That is the use of adobe reader or Microsoft word for reading these files too will not be mandatory.

Here in this particular article, I will be only describing you the webpage layout using HTML5. The tags used, the elements used in developing a webpage layout has been described. Many of the tags which are used in this code given below are new and has been introduced in HTML5 only. These codes were not earlier present in HTML 4.0
So, check these codes and I have also explained each code in comments line.

<title>A sample webpage layout using HTML5</title>
<header> //this header is a new tag especially for header elements.
<hgroup> //this tag is also new and it contain the header elements.
<h1>Header in h1</h1> //h1 and h2 are used for giving the size of characters
<h2>Subheader in h2</h2> //this h1, h2 goes to h6. H6 gives the smallest size for character and h1 the largest
<nav> //this one is a new tag for navbar elements
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
<article> //this one is newly introduced in <em>HTML5</em>, this contain articles
<h1>Article #1</h1>
This is a webpage layout example for <mark>“My Windows Club”</mark>
<h1>Article #2</h1>
This article can be a long post like a blog and here you can write the main body content.
<aside> //this one again is new and introduced in HTML5 for sidebar elements
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<img width="85" height="85"
alt="Ata Ul Haque" />
<figcaption>Ata Ul Haque</figcaption>
<footer>Footer - Copyright 2012 for My Windows Club</footer>

So, this is one such sample example for you to create your own webpage layout through HTML5.

Related Articles

HTML5 Form elements tutorial for HTML tags

Are you searching a tutorial which gives you complete description about HTML5. Here in this tutorial of HTML5 you will read about the form elements generally used in webpages and their validation through HTML5.

More articles: HTML 5 Tutorials HTML 5 Tutorials HTML 5 Tutorials Html 5


No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: