HTML5 header element

<header> usually contains a group of introductory or navigation menu.
ExampleHTML5 header for navigation menu
Source Code Expand

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
</head>

<body>
	<header>
		<h1>HTML 5 header presentation</h1>
		<p>Welcome to HTML 5 world</p>
		<nav>
			<ul>
				<li><a href="#">What`s new in HTML 5</a></li>
				<li><a href="#">HTML 5 introduction</a></li>
				<li><a href="#">HTML 5 examples</a></li>
			</ul>
		</nav>
	</header>	
</body>

</html>



Here is HTML4 version , you can make a comparision with HTML5 example above
ExampleHTML4 header for navigation menu
Source Code Expand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>    
</head>
<body>
	
	<div id="header">
		<h1>HTML 4 header presentation</h1>
		<p>Welcome to HTML 5 world</p>
		<div id="nav">
			<ul>
				<li><a href="#">What`s new in HTML 5</a></li>
				<li><a href="#">HTML 5 introduction</a></li>
				<li><a href="#">HTML 5 examples</a></li>
			</ul>
		</div>
	</div>   

</body>
</html>



ExampleHTML5 header for article
Source Code Expand

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
</head>

<body>
	<article>
		<header>
			<h1>What`s new in HTML 5</h1>
		</header>
		<p>HTML5 provides serveral new features...</p>	
	</article>
	
	<article>
		<header>
			<h1>HTML 5 introduction</h1>
		</header>
		<p>Welcome to HTML 5 world</p>	
	</article>
	
	<article>
		<header>
			<h1>HTML 5 examples</h1>
		</header>
		<p>Here is a HTML 5 example...</p>	
	</article>
</body>

</html>




 
comments powered by Disqus