Resources » Internet & Web » HTML

A sample webpage layout using HTML5


Last Updated:   Category: HTML    
Author: Member Level: Gold    Points: 30


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.


<html>
<head>
<title>A sample webpage layout using HTML5</title>
</head>
<body>
<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
</hgroup>
</header>
<nav> //this one is a new tag for navbar elements
<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
</ul>
</nav>
<section>
<article> //this one is newly introduced in <em>HTML5</em>, this contain articles
<header>
<h1>Article #1</h1>
</header>
<section>
This is a webpage layout example for <mark>“My Windows Club”</mark>
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This article can be a long post like a blog and here you can write the main body content.
</section>
</article>
</section>
<aside> //this one again is new and introduced in HTML5 for sidebar elements
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
<figure>
<img width="85" height="85"
src="http://www.techulator.com/attachments/Resources/thumbs/5621-436-ataulhaque.jpg"
alt="Ata Ul Haque" />
<figcaption>Ata Ul Haque</figcaption>
</figure>
</aside>
<footer>Footer - Copyright 2012 for My Windows Club</footer>
</body>
</html>



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



Related Resources:


Read related articles: HTML 5 Tutorials    HTML 5 Samples    HTML 5 Tips    Html 5    

Did you like this resource? Share it with your friends and show your love!




Responses to "A sample webpage layout using HTML5"

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

Feedbacks      

Post 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:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Active Members
    TodayLast 7 Daysmore...