Post
Ask Question

Working With Semantic Elements in HTML5 With Layout Examples : Part 1

Introduction

 
HTML5 has introduced a new set of Semantic Elements that help developers to define the structure of a page in a much simpler manner.
Semantic means meaning and Semantic Element means elements with meaning. A Semantic Element helps the developer and the browser to understand its meaning. There are two types of Semantic Elements:
  • Semantic : These elements clearly define their content like <form>, <img>, <table> and so on.
  • Non-semantic: These elements have no definition, they don't define anything about their content like <span> and <div>.

Traditional HTML Layouts

 
Developers have been using <div> elements to manage the entire structure of an HTML page that includes elements like a header, an article, footer or a sidebar and you need to use an id or class attributes to assign the role of the div elements. Let's design a traditional HTML layout before heading to HTML5 Semantic Elements.
 
Html Basic Structure Image.png
 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>HTML Basic Structure</title>  
  6.     <style>  
  7.         .container {  
  8.             width: 600px;  
  9.             height: 600px;  
  10.             margin: auto;  
  11.             border: 5px solid #7f7f7f;  
  12.             background: orange;  
  13.             text-align: center;  
  14.         }  
  15.    
  16.         .header {  
  17.             margin: 0px 15px 5px 15px;  
  18.             height: 120px;  
  19.             width: 560px;  
  20.             border: 5px solid #7f7f7f;  
  21.             background: #c3c3c3;  
  22.         }  
  23.    
  24.         .nav {  
  25.             width: 530px;  
  26.             height: 30px;  
  27.             margin: 0px 15px 0px 10px;  
  28.             border: 5px solid #7f7f7f;  
  29.             background: #c3c3c3;  
  30.         }  
  31.    
  32.         .wrapper {  
  33.             width: 560px;  
  34.             height: 300px;  
  35.             margin: auto;  
  36.             border: 5px solid #7f7f7f;  
  37.             background: #c3c3c3;  
  38.             text-align: center;  
  39.         }  
  40.    
  41.         .content {  
  42.             float: left;  
  43.             margin: 0px 5px 5px 5px;  
  44.             height: 220px;  
  45.             width: 320px;  
  46.             border: 5px solid #7f7f7f;  
  47.             background: #c3c3c3;  
  48.         }  
  49.    
  50.         .subcontent {  
  51.             border: 2px solid #7f7f7f;  
  52.             width: 305px;  
  53.             height: 50px;  
  54.             margin: 10px 5px;  
  55.         }  
  56.    
  57.         .sidebar {  
  58.             margin: 0px 8px 6px 8px;  
  59.             float: right;  
  60.             width: 190px;  
  61.             height: 220px;  
  62.             border: 5px solid #7f7f7f;  
  63.             background: #c3c3c3;  
  64.         }  
  65.    
  66.         .footer {  
  67.             width: 560px;  
  68.             height: 60px;  
  69.             margin: 5px 15px;  
  70.             border: 5px solid #7f7f7f;  
  71.             background: #c3c3c3;  
  72.             text-align: center;  
  73.         }  
  74.     </style>  
  75. </head>  
  76. <body>  
  77.     <form id="form1" runat="server">  
  78.         <div>  
  79.             <!--container-->  
  80.             <div class="container">  
  81.                 <h2><div class="container"></h2>  
  82.                 
  83.                 <!--header-->  
  84.                 <div class="header">  
  85.                     <h2><div class="header"></h2>  
  86.    
  87.                     <!--nav bar-->  
  88.                     <div class="nav">  
  89.                         <h3><div class="nav"></h3>  
  90.                     </div>  
  91.                     <!--end nav bar-->  
  92.                 </div>  
  93.                 <!--end header-->  
  94.    
  95.                 <!--wrapper-->  
  96.                 <div class="wrapper">  
  97.                     <h2><div class="wrapper"></h2>  
  98.                      
  99.                     <!--content-->  
  100.                     <div class="content">  
  101.                         <h2><div class="content"></h2>  
  102.                         <!--end subcontent-->  
  103.                         <div class="subcontent"><h2><div class="subcontent1"></h2></div>  
  104.                         <div class="subcontent"><h2><div class="subcontent2"></h2></div>  
  105.                         <!--end subcontent-->  
  106.                     </div>  
  107.                     <!--end content-->  
  108.                      
  109.                     <!--sidebar-->  
  110.                     <div class="sidebar"><h2><div class="sidebar"></h2></div>  
  111.                     <!--end sidebar-->  
  112.                 </div>  
  113.                 <!--end wrapper-->  
  114.    
  115.                 <!--start footer-->  
  116.                 <div class="footer"><h2><div class="footer"></h2></div>  
  117.                 <!--end footer-->  
  118.             </div>  
  119.             <!--end container-->  
  120.         </div>  
  121.     </form>  
  122. </body>  
  123. </html> 

New HTML5 Semantic Elements

 
HTML5 provides some new Semantic Elements that are semantically meaningful to describe a webpage layout. It's easy to understand and organize our code and it helps search engines to organize content more efficiently, as well. The following is a list of the new HTML5 elements:
  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>
After reading these elements names, I hope have a good idea of what they are for. Now you've a good alternative of the "<div>" element. Let's understand the new elements of HTML5
 
1. <header> Element
 
The new HTML5 "<header>" element defines a header for a section or document. A header element is used for sections headings that include an hgroup or an h1-h6 element, but it's not necessary. You can also use it for wrapping a section's table of contents, for search a form and so on.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <header>  
  4.             <h1>C-SharpCorner</h1>  
  5.         </header>  
  6.     </form>  
  7. </body> 
2. <section> Element
 
The new <section> element is used to define a section in a HTML document.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <section>  
  4.             <h1>Hello World</h1>  
  5.             <p>The new section element use to define a section in a document</p>  
  6.         </section>  
  7.     </form>  
  8. </body> 
3. <nav> Element
 
The <nav> element defines navigation links on a web page. You can use a "nav" element to link one page to another part of that page or other pages within your site.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <nav>  
  4.             <a href="HTML5: Part1">Part1</a> |  
  5.             <a href="HTML5: Part2">Part2</a> |  
  6.             <a href="HTML5: Part3">Part3</a> |  
  7.             <a href="HTML5: Part4">Part4</a>  
  8.         </nav>  
  9.     </form>  
  10. </body> 
4. <article> Element
 
The "<article>" element defines an article, it specifies a self-contained contents page and so on. We can use an <article> element in various situations like
  • Forum Post
  • Blog Entry
  • News Article
  • Forum Post
  • Comments and so on.
Articles can hold a "header", "section" or event "hgroup" inside them. But it depends on which situation you use this element because it's commonly used the same as a div tag.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <article>  
  4.             <h1>Internet Explorer 9</h1>  
  5.             <p>  
  6.                 The article element is used to define article, it specify self-contained content. We can use <article> element in various situations like:  
  7.             </p>  
  8.         </article>  
  9.     </form>  
  10. </body> 
5. <aside> Element
 
The "<aside>" element defines some content aside from the content it is placed in (like a sidebar). The aside content should be related to the surrounding content.
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <aside>  
  4.             <h1>Aside Element</h1>  
  5.             <p>The <aside> element defines some content aside from the content it is placed in (like a sidebar).</p>  
  6.         </aside>  
  7.    
  8.     </form>  
  9. </body> 
6. <figure> and <figcaption> Element
 
The "<figure>" element specifies independent content, like diagrams, code structure, photos, and so on.
 
The "<figcaption>" element is used to define a caption for a "<figure>" element and it can be placed as the first and last child for the "<figure>" element.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <p>The figcaption element is used to define a caption for a figure element and it can be placed as the first and last child for the figure element.</p>  
  4.    
  5.         <figure>  
  6.             <img src="dummy.jpg" alt="Dummy Image" width="200" height="150" />  
  7.             <figcaption>Img.1 - Dummy Image Example.</figcaption>  
  8.         </figure>  
  9.    
  10.     </form>  
  11. </body> 
7. <address> Element
 
The <address> element represents the contact information for its body element or article element. Let's see an example to understand:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <address>  
  4.             <a href="name">Gyanender Sharma</a>  
  5.             <a href="mail">Inbox your suggestions</a>  
  6.         </address>  
  7.     </form>  
  8. </body> 
8. <footer> Element
 
The "<footer>" element defines a footer for a section or a document.
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <footer>  
  4.             <address>  
  5.                 Contact Us<a href="mailto:[email protected]">Gyanender Sharma</a>.  
  6.             </address>  
  7.             <p><small>© copyright 2013 Dummy Pvt Ltd.</small></p>  
  8.         </footer>  
  9.     </form>  
  10. </body> 

Conclusion

 
In this article, we covered how to make a basic "Traditional HTML Layout" and also learned the use of the new HTML5 Semantic Elements. In the next article, we'll learn about some remaining elements and along with that, we'll also design some HTML5 layout with the new Semantic Elements.


Similar Articles