HTML5 Tag Reference Part 1

HTML5 Tag Reference Part 1

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
<header> tag.

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.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>&copy; 2011 All rights reserved.</footer>


Tags Posted under HTML5 by admin
  • Hitesh

    This blog is very useful to know HTML 5 websites.

    • http://www.google.com/ Jayna

      Dude, right on there btohrer.

  • Manish

    Its good, will prove fruitful !!

    • http://www.google.com/ Eddie

      Dude, right on there borhter.

  • http://blog.cwenterprises.co.uk Clive Walkden

    Nice to see some more content on html5, hopefully more people will be implementing it soon.

    • http://www.bing.com/ Vyolet

      That’s not just the best asnwer. It’s the bestest answer!

    • http://www.yahoo.com/ Janess

      Great hmamer of Thor, that is powerfully helpful!

  • http://www.google.com/ Verle

    You keep it up now, unedrtsand? Really good to know.

  • http://www.yahoo.com/ Kalin

    Oh yeah, fbaluous stuff there you!