Post
Ask Question

Use Various Tags in HTML5

Introduction

 
In this article, I describe some basic tags in HTML5. These tags are the Header tag, Nav Tag, Section Tag, Aside Tag, and Footer Tag.
 

<Header> Tag

 
The <header></header> tag creates document or section headers. It can also contain <h1> to <h6> tags. It specifies a header for a document or a section. You can have several header elements in a single document.
 
A <header> tag cannot be placed with in a <footer>, <address> or other header elements. The <header> tag is new in HTML5.
 
Browser support
 
The <header> tag is supported by Internet Explorer 9, Firefox, Opera, Chrome and Safari.
 
Internet Explorer 8 and earlier versions do not support the <header> tag.
 

Nav Tag

 
The <nav> tag declares the navigational section of your web page. You can nest <nav> tags in a <header> as well as in a <footer> tag. It can be used multiple times on a single page. The Nav Tag is only present in HTML5. It is not supported in HTML4.01.
 
It has both start and end tags. In other words, if we want a group of related links then we will use the <nav> tag.
 
Browser Support  
 
The <nav> tag is supported by Internet Explorer 9, Firefox, Opera, Chrome and Safari.
 
Internet Explorer 8 and earlier versions do not support the <nav> tag.
 

Section Tag

 
The <section> tag defines a section in a document. This tag represents the logical division of the document. This could mean product descriptions, chapters, discussions, headers,  footers or any other section of the document.
 
The <section> tag was introduced in HTML5.
 
Browser Support
 
The <section> tag is supported by Internet Explorer 9, Firefox, Opera, Chrome and Safari.
 
Internet Explorer 8 and earlier versions do not support the <section> tag.
 

Aside Tag

 
The <aside> tag shows the section of the text that is related to the main content of the document. It provides additional information that can improve the article. This type of content is often represented in sidebars.
 
The <aside> tag is new in HTML5.
 
Syntax
 
<aside>Content of aside</aside>
 
Browser Support
 
The <aside> tag is supported by Internet Explorer 9, Firefox, Opera, Chrome and Safari.
 
Internet Explorer 8 and earlier versions do not support the <aside> tag.
 

Footer Tag

 
The footer tag defines a footer for the document. You can have several footer elements in one document.
 
Note: if you are using a footer tag for the address of the author, it must be enclosed in an address tag.
 
Browser Support
 
The <footer> tag is supported by Internet Explorer 9, Firefox, Opera, Chrome and Safari.
 
Internet Explorer 8 and earlier versions do not support the <footer> tag.
 
Coding
 
A complete sample, along with other tags, is shown below:
  1. <!doctype html>  
  2. <html>  
  3.    <head>  
  4.       <meta charset="utf-8" />  
  5.       <title>Header Tag,Nav tag,Section Tag,Aside Tag and Footer Tag in HTML5</title>  
  6.       <link rel="stylesheet" href="main.css">  
  7.    </head>  
  8.    <body>  
  9.       <!--<header> tag in HTML5 -->  
  10.       <header>  
  11.          <h1 style="color:Red">This is the header section of the HTML5</h1>  
  12.       </header>  
  13.       <!-- <nav> tag in HTML5 -->   
  14.       <nav>  
  15.          <ul>  
  16.             <li>CORE JAVA</li>  
  17.             <li>ADVANCE JAVA</li>  
  18.             <li>HTML 5</li>  
  19.             <li>JAVA SCRIPT</li>  
  20.             <li>PHP</li>  
  21.          </ul>  
  22.       </nav>  
  23.       <!-- Section tag in HTML5-->       
  24.       <section>  
  25.          <h2>HTML 5 provides section tag to add content to the main section</h2>  
  26.       </section>  
  27.       <!-- Aside Tag in HTML5-->  
  28.       <aside>  
  29.          <h3>About aside tag</h3>  
  30.          Aside tag is used to post the side content for the site.  
  31.       </aside>  
  32.       <hr/>  
  33.       <footer style="color:gray">  
  34.          @Designed by Ashwani Tyagi  
  35.       </footer>  
  36.       <hr/>  
  37.    </body>  
  38. </html> 
Output
aside.jpg


Similar Articles