HTML5 introduces many new tags, including several specific tags to better describing a document’s structure. Let us see simple html5 page structure and its elements
HTML5 doctype
<!DOCTYPE html>
HTML5 includes tags that break documents into the common sections and indicates the content contained in each section.
Some of the html5 tags are
- header
- section
- article
- aside
- footer
- nav
The new HTML5 tags describe the types of content that they contain, and they help divide the document into logical sections.
Simple HTML5 page structure
Below is a simple html5 page structure with doctype defined.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="" /> <title></title> </head> <body> </body> </html>
Detailed HTML5 page structure
Below is detailed html5 page structure with header, section, article, aside, footer, nav sections.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<title>Website title</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Website menu</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Article title</h2>
<p>Posted on
<time datetime="2012-09-04T16:31:24+02:00">September 4th 2012</time>
by <a href="#">Writer</a> - <a href="#comments">10 comments</a></p>
</header>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</article>
<article>
<header>
<h2>Article title</h2>
<p>Posted on
<time datetime="2012-09-04T16:31:24+02:00">September 4th 2012</time>
by <a href="#">Writer</a> - <a href="#comments">10 comments</a></p>
</header>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</article>
</section>
<aside>
<h2>Side bar</h2>
<p>Add sidebar widgets here.</p>
</aside>
<footer>
<p>Copyright 2012 Company Name</p>
</footer>
</body>
</html>
Conclusion:
In this article we have seen how to create HTML5 page structure and how to use them in order.
Related posts: