Pub Pixel Avatar Image

How To Group Navigational Links In Your Web Pages Using HTML5

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 670

First Published:

Word Count: 584

Edition: 1

Why should you group links? Simple because it adds structure and semantics to your web pages. Plus semantic navigation helps your users with disabilities navigate through your web pages with ease.

In-order to indicate part of a web page for navigation you will need to use the new HTML5 <nav> element. The <nav> element represents a section of a web page that links to other web pages or to parts within the web page itself; that contains, a section of navigation links.

You should take note that not all groups of links should be wrapped in a <nav> element, only sections of the web page that consists of major navigation blocks are suitable for the <nav> element. For example the main navigation, table of contents, beadcrumb navigation and pagination in my opinion would be suitable candidates for the <nav> element.

The <nav> element also requires an end tag, for example </nav>. You are allowed to have more then one <nav> element on a web page.

Another thing to remember is that the <nav> element cannot appear as a descendant of the <address> element, in-other words you cannot place a <nav> element inside the <address> element.

The <nav> element can contain the flow and phrasing element's, like for instance the <a>, <h1> and <h6> element's.

The <nav> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?".

Here is how to code the <nav> element for HTML5.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <nav>
  <ul>
   <li><a href="home.php">Home</a></li>
   <li><a href="categories.php">Categories</a></li>  
   <li><a href="articles.php">Articles</a></li>
   <li><a href="members.php">Members</a></li> 
   <li><a href="about.php">About Us</a></li>   
  </ul>
 </nav>

</body>
</html>

And here is how to code the <nav> element for XHTML5.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <nav>
  <ul>
   <li><a href="home.php">Home</a></li>
   <li><a href="categories.php">Categories</a></li>  
   <li><a href="articles.php">Articles</a></li>
   <li><a href="members.php">Members</a></li> 
   <li><a href="about.php">About Us</a></li>   
  </ul>
 </nav>

</body>
</html>

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.