HTML5 nav element

The nav element represents a section of a page that contains navigation links, mainly is used for major navigation blocks, such as navigation links in <header>.
ExampleHTML5 nav element for header
Source Code Expand

<!DOCTYPE html>
<html>

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

<body>
	<header>
		<h1>My Blog</h1>
		<p>Welcome to my blog</p>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">album</a></li>
				<li><a href="#">profile</a></li>
				<li><a href="#">links</a></li>
				<li><a href="#">about</a></li>
			</ul>
		</nav>
	</header>	
</body>

</html>




It is common to use a list of items to create navigation links for the purpose of aiding understanding and the ease of maintaining, so we add some CSS to make items display horizontally.
ExampleHTML5 nav element with css
Source Code Expand

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
<style>
ul {
	margin-left: 0px;
	padding-left: 0px;
	list-style: none;
}

ul li {
	padding-left: 15px;
	float:left;
}
</style>
</head>

<body>
	<header>
		<h1>My Blog</h1>
		<p>Welcome to my blog</p>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">album</a></li>
				<li><a href="#">profile</a></li>
				<li><a href="#">links</a></li>
				<li><a href="#">about</a></li>
			</ul>
		</nav>
	</header>	
</body>

</html>


comments powered by Disqus