Home » Labs » HTML5 page structure  

HTML5 page structure


Filed under Labs

HTML5 offers more powerful structure comparing to older versions of Html. There are many new semantic elements in HTML5 which give more flexibility and standard to a web document. Using HTML5 now we can create more professional web pages in a standard way. Here is a sample of HTML5 page structure for reference which contains tags for header, Navi, Sections, article and footer.

 
 <!DOCTYPE html>
 
<html>
 
<head>
	<meta charset="UTF-8" />
	<title>Title of your webpage</title>
</head>
 
<body>
 
	<header>
		<nav>
			<ul>
				<li>Menu</li>
			</ul>
		</nav>
	</header>
 
	<section>
 
		<article>
				<h2>Article Title</h2>
				<p>Details of articles, here</p>
		</article>
 
		<article>
				<h2>Article 2 Title </h2>
				<p>Details of articles 2, here</p>
		</article>
 
	</section>
 
	<aside>
		<h2>Sidebar</h2>
		<p>Sidebar details</p>
	</aside>
 
	<footer>
		<p>Copyright details at bottom line</p>
	</footer>
 
</body>
 
</html>

Posts you may like: