To convert your PSD into HTML5 first you need to know about the basic structure, the basic
structure include tags and HTML5 introduces a whole set of new elements that make it much easier to structure pages. Here you get knowledge of main six tags used in HTML5.
1. Header Tag
<header> <h1>Header in HTML5</h1> <p>By HTLM5Arena</p> </header>
This way you can use header tag. The header element represents the header of a section.
Which contain logo, top navigation, search section etc.So the div id=”header” is replaced by
2. Nav Tag
Here it is same like div id=”navigation”, changed and introduced as <nav> the navigation
pages will come here in this tag.Which include ul and li of different properties. See the use
of <nav> in below example.
<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul> </nav>
3. Article Tag
The article element represents an independent section of a document, page or site. Mainly use for content like news articles, blog articles, forum posts, individual comments etc.Same like div
you can give id to article tag.
<article id="article_01"> <header> <h4><a>Comment #1</a> by <a href="http://html5arena.flywheelsites.com/">HTML5Arena Team</a></h4> <p><time date>15 April, 2011at 24:20</time> </header> <p>Very helpful article is here!</p> </article>
4. Section Tag
<section> <h1>Any level of heading</h1> rest of the content </section>
Generally people think <section> is used to wrap the content but it is wrong.
The section element represents a generic document or application section…
For content wrap we can use div.
5. Aside Tag
The aside element is generally used for marking up sidebars and content that is tangentially related to the content around it. Below is the example of aside tag.
<aside> <h1>Archives</h1> <ul> <li><a>March 2011</a></li> <li><a>April 2011</a></li> </ul> </aside>
6. Footer Tag
The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as writer name, links of its useful documents, copyright data.
<footer>© 2011 All rights reserved.</footer>