HTML 5 has many new tags which helps us to divide and design the webpage more efficiently. Previous versions of the HTML does provide us some tags like <div> and <table> to design the page but they are not the up to the mark to help designer. HTML 5 has some beautifully intelligent tags like,
- <header>
Most of the all the website, have the similar approach for head portion. So, in HTML 5, <header> tag helps us to design the head portion of the webpage. Head portion of the webpage generally contains the logo of the website, tag line, and some images - in case any.
- <footer>
Their is also a separate tag available only for footer part of the webpage in HTML 5. Footer part contains many important information like copyright, pagemap and many more. <footer> tag helps to the web browser to find the correct content of the footer.
- <hgroup>
If any header does have multiple headings than, we can make them into a single group using <hgroup> tag.
Note: <header> tag is not only useful to give heading to the webpage but it also useful to give heading in sections and articles.
- <nav>
<nav> is one of the cool tag which represent the menu of the webpage in HTML 5. Now making different style of menu and appending it in the webpage is more easier then previous tasks.
- <section>
The <section> tag represents the core content part of the webpage. Every webpage has some portion for text and main articles. Those articles and other contents are belong to the <section> tag.
- <article>
The <article> tag is useful to write descriptive text and showing information in the website. <article> tag is child tag of the <section> tag.
- <aside>
You have definitely found many side bar in webpages which holds the information like recent article, breaking news, and sometimes advertisement too. <aside> tag is useful to do the same in our pages.
Example:
Here, I have created a simple webpage using basic HTML 5 tags. At the run time you will find it very similar and simple layout. But after applying the CSS it will look the same as you want. We will have some glimpse on CSS 3 as well in next articles.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" /> <!-- META TAG FOR ENCODING -->
<title>HTML 5 - tutorial 1 </title>
<link rel="stylesheet" href="main.css" > <!-- linking CSS to your webpage -->
</head>
<body>
<header>
<h1> Welcome to the new website </h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Podcast</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Title of Article </h1>
<h2> Subtitle for Article !! </h2>
</hgroup>
</header>
<p> This is the best article eva! </p>
<footer>
<p> - writtern by Maulik Dave on 27th March 2013 </p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Title of Article 2 </h1>
<h2> Subtitle for Article 2 !! </h2>
</hgroup>
</header>
<p> This is the best article 2 eva! </p>
<footer>
<p> - writtern by Maulik Dave on 27th March 2013 </p>
</footer>
</article>
</section>
<aside>
<h4>Letest News </h4>
Maulik Dave's first website is launched now!!
</aside>
<footer>
Copyright (C) The New Website
</footer>
</body>
</html>
