All about programming in GNU/LINUX

HTML-5 Basic tags:header,nav,section,aside and footer tags

The HTML 5 tags helps categorizing of the content of page based on their position on the page.For instance , header tags as the name suggests is used to publish the topmost content of the site , section tags are used to place the main body or the main content of the site

here is an example code illustrating the use of header,nav,section,aside and footer tags of HTML 5

<header>Here goes the header</header>
     <nav>
	<ul>
		<li>Here is the main navigation1</li>
		<li>The main navigational tabs are placed within nav tags of HTML 5</li>
	</ul>
    </nav>
<section>The main content of the page is placed here </section>	
<aside>Not so important content goes here</aside>
footer>The footer of the webpage goes here</footer> 

Here is another example code

<!doctype html>
<html lang=”en”>
<head>
	<meta charset=”utf-8” />
	<title></title>
	<link rel=”stylesheet” href=”main.css”>
</head>

<body>
<header>
 <h1>This is the header section of the HTML5</h1>
</header>
<nav>                                     <!-- <nav> tag is to create the main navigation for the site -->   
	<ul>
		<li>HTML 5</li>
		<li>JAVA SCRIPT</li>
		<li>PHP</li>
	</ul>
</nav>

<section>
  <h2>This is the Main section of the site,HTML 5 provides section tag to add content to the main section</h2>
</section>
<aside>
	<h3>About aside tag</h3>
	Aside tag is used to post the side content for the site,HTML5 will postin them , but it is just to describe that the information here is not so important 
</aside>
<footer>
 @Karthic Rao's Site
</footer>
</body>
</html>

Advertisements

4 responses

  1. karthik bhat

    Good to see HTML5 🙂 Well I am not seeing any significant change with HTML5 tag

    January 20, 2013 at 4:32 am

    • you’ll see HTML 5 unique implementations in the posts to come 🙂

      January 20, 2013 at 3:38 pm

      • karthik bhat

        Yeah..I want to see the power of canvas tag.

        January 21, 2013 at 8:09 am

  2. Reblogged this on KnoGimmicks Social Media & Web Design.

    March 9, 2013 at 2:10 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s