HTML5 Page Structure

HTML5 New Tags:

HTML5 New Tags:

An Example Of HTML5 Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<title>HTML5 Page Structure | quest 4 knowledge blog</title>
</head>

<header>
<h1><a href="#">HTML5 Page Structure</a></h1>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</header>

<section>
<article>
<header>
<h2>Article 1</h2>
</header>
<p>This is paragraph of article.</p>
</article>
</section>

<aside>
<h2><a href="#">About Us</a></h2>
<p>Like Us On</p>
<p><a href="#">Facebook</a></p>
<p><a href="#">Twitter</a></p>
</aside>

<footer>
<p>Copyright:</p>
<p><a href="#">Terms And Conditions</a></p>
<p><a href="#">Privacy Policy</a></p>
</footer>
<body>
<html>

<header> And <footer>

The purpose of header and footer element is used to include header and footer content into the page, respectively.

Header element contains logo image,search form, heading of section or navigational menu.

At the bottom, footer element typically contains information about website, copyright notice, privacy policy and terms and conditions for the usage of a a website.

But You an add more functionality if you want.Also note that you can have more than one header and footer element on each page.For example,you can include header and footer element nested inside each article element.

<section>

Each section element contains distinct different areas(logically or physically groped) of a website or is used to break an article or story into different sections.

<article>

Article element is related to section element, but is different.Section tag is used for grouping of different areas in to sections whereas article tag is self-contained composition and can be viewed independently.For example,a magazine or newspaper article,a comment,individual blog post, videos,an interactive widget or gadget, images or news items can be contained in article element.

<nav>

Nav element represents a section of navigation links that links page to website’s other pages or to parts within that page.

<aside>

Aside element is used to represent content that is related to the main flow of a website but doesn’t fit into it.For example,information about the author of the blog post,pull quotes or sidebars, advertising, etc.

If you have any query related to the tags discussed above,feel free to write comment about it.Thanks!