Post
Ask Question

HTML5 Main Structural Elements

1. <header>

 
The <header> element represents a group of introductory or navigational aids.
 
It may contain some heading elements and other elements like a logo, wrapped section's header, a search form and so on.
 
Example
  1. <header>  
  2. <h1>Hello World </h1>  
  3. <p>Its time to start HTML5 </p>  
  4. </header> 

2. <nav>

 
The <nav> element is intended only for a major block of navigation links.
 
So we can say that it represents a section of the document intended for navigation (like a menu).
 
Example
 
nav.html
  1. <nav>  
  2. <ul>  
  3. <li><a href="index.html">Home</a></li>  
  4. </ul>  
  5. </nav> 
index.html
  1. <html>  
  2. <head>  
  3. My home page Abhi  
  4. </head>  
  5.   
  6. <body>  
  7. <p>Try it at home</p>  
  8. <nav>  
  9. <ul>  
  10. <li><a href="nav.html" />Back</li></ul>  
  11. </nav>  
  12. </body>  
  13. </html> 
 

3. <section>

 
It represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure. (Just a logical grouping such as a contents section.)
 
Example
  1. <html>  
  2. <body>  
  3. <section>  
  4.   <h1>Good Morning</h1>  
  5.   <p>  
  6. Hello world  
  7.  </p>  
  8. </section>  
  9. <section>  
  10.   <h1>Good Evening </h1>  
  11.   <p>  
  12. Bye Bye  World.</p>  
  13. </section>  
  14. </body>  
  15. </html>  
 

4. <article>

 
It represents an independent piece of contents of a document, such as a blog entry or newspaper article.
 
Example
  1. <html>  
  2. <body>  
  3.    
  4. <article>  
  5.   <h1>HTML5 with Abhijeet</h1>  
  6.   <p>Today we will start HTML5  </p>  
  7. </article>  
  8. <article>  
  9.   <h1>HTML5 news part with Abhijeet</h1>  
  10.   <p>Great News for you..  </p>  
  11. </article>  
  12.    
  13. </body>  
  14. </html>  
 

5. <aside>

 
It represents a piece of content that is only slightly related to the rest of the page. (Usually a sidebar, but could be another type of content that isn't directly related to the main content.)
 
Example
  1. <html>  
  2.     <head><title>HTML5 with Abhijeet</title>  
  3.     <style type="text/css"">  
  4.         aside  
  5.         {  
  6.          
  7.             font-style:italic;  
  8.             color:cyan;  
  9.             float:right;  
  10.             width:80%;  
  11.               
  12.         }  
  13.     </style>  
  14.     </head>  
  15.     <body>  
  16.         <div>  
  17.           <aside>Its raining...  
  18.         </aside>  
  19.         <p>Hello world</p>  
  20.         </div>  
  21.     </body>  
  22. </html>  
 
 

6. <footer>

 
Represents a footer for a section and can contain information about the author and copyright information.
 
Example
  1. <html>  
  2. <body>  
  3.    
  4. <footer>  
  5.   <p>written by: Abhijeet Singh</p>  
  6.   <p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>  
  7. </footer>  
  8.    
  9. </body>  
  10. </html>  
 


Similar Articles