Post
Ask Question

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

Introduction

 
In my previous article, we learned some new HTML5 Semantic Elements and we also designed a basic HTML Layout. I recommend you read Part-1 of this series to understand the complete concept of semantic elements. In this article, we'll cover all the remaining HTML5 Semantic Elements and we'll also design HTML5 basic layout using new semantic elements.
 

Some other HTML5 Semantic Elements

 
We already covered some HTML5 Semantic Elements in my previous article. Now, let's do some examples of the remaining elements:
  • <summary>
  • <details>
  • <mark>
  • <meter>
  • <progress>

1. <summary> Element

 
The <summary> element specifies a visible heading for the details element. It is used to define inside the details element. The user can click on the heading to view or hide the details.
 
Note: Currently Chrome and Safari are the only browsers supporting the details tag.
 
Example:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <details>  
  4.             <summary>Copyright 2013.</summary>  
  5.             <p>- by Example Pvt Ltd. All Rights Reserved.</p>  
  6.             <p>All content on this website are the property of the company Example Pvt Ltd.</p>  
  7.         </details>  
  8.     </form>  
  9. </body> 
     
Output
 
HTML5 Details Element.PNG
 
After expanding
 
HTML5 Details Element summary.PNG
 
2. <detail> Element
 
The <detail> element is used for describing some additional details of a document, or parts of a document that can be viewed or hidden on user demand. It can create some interactive widgets that can be opened or closed by the user.
 
Note: For example check the summary element example.
 
3. <mark> Element
 
The <mark> element is for the text that should be highlighted.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <p>The <mark><mark></mark> element is use for text that should be highlighted</p>  
  4.     </form>  
  5. </body> 
     
Output
 
HTML5 mark element.PNG
 
4. <meter> Element
 
The <meter> element can be used for a scalar measurement, it can be used if the maximum and minimum values are known. There are some new attributes available to be used with the meter element
  • form
  • high
  • low
  • max
  • min
  • optimum
  • value
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <p>Gauge Bar</p>  
  4.         <meter value="5" min="0" max="10">5 out of 10</meter><br />  
  5.         <meter value="0">70%</meter>  
  6.     </form>  
  7. </body> 
     
Output
 
HTML5 meter element.PNG
 
5. <progress> Element
 
The state of a work in progress
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         Loading Bar: <br />  
  4.         <progress value="35" max="100"></progress>  
  5.     </form>  
  6. </body> 
     
Output
 
HTML5 progress Element.PNG
 
Now it's time to learn HTML5 layout and design using the new elements of HTML5.
 
First we design the structure using HTML5 tags
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.          <!--container-->  
  4.         <div id="container">  
  5.              
  6.             <!--start header-->  
  7.             <header><br />  
  8.                 <h1><header></h1>  
  9.             </header>  
  10.             <!--end header-->  
  11.              
  12.             <!--start wrapper-->  
  13.             <div class="wrapper">  
  14.                 <!--nav bar-->  
  15.                 <nav><br /><br /><br /><br /><br /><br /><br /><br />  
  16.                     <h1><nav></h1>  
  17.                 </nav>  
  18.                 <!--end nav bar-->  
  19.                  
  20.                 <!--start section-->  
  21.                 <section>  
  22.                     <!--start hgroup-->  
  23.                     <hgroup>  
  24.                         <h1><section></h1>  
  25.                     </hgroup>  
  26.                     <!--start hgroup-->  
  27.    
  28.                     <!--start header in section-->  
  29.                     <header><br />  
  30.                         <header>  
  31.                     </header>  
  32.                     <!--end header in section-->  
  33.    
  34.                     <!--start article in section-->  
  35.                     <article><br /><br />  
  36.                         <p><article></p>  
  37.                     </article>  
  38.                     <!--end article in section-->  
  39.    
  40.                     <!--start footer in section-->  
  41.                     <footer><br />  
  42.                         <footer>  
  43.                     </footer>  
  44.                     <!--end footer in section-->  
  45.                 </section>  
  46.                 <!--end article-->    
  47.                  
  48.                 <!--Start aside-->  
  49.                 <aside><br /><br /><br /><br /><br /><br /><br />  
  50.                     <h1><pre><aside></pre></h1>  
  51.                     <br />                     
  52.                 </aside>  
  53.                 <!--end aside-->                 
  54.             </div>  
  55.             <!--end wrapper-->  
  56.    
  57.             <!--start footer-->  
  58.             <footer>  
  59.                 <br />  
  60.                 <h1><footer></h1>  
  61.             </footer>  
  62.             <!--end footer-->  
  63.         </div>  
  64.     </form>  
  65. </body> 
     
Now it's time to add some CSS and make it beautiful:
  1. <style>  
  2.     * {  
  3.         font-family: Arial;  
  4.         border-radius: 13px;  
  5.     }  
  6.     header, nav, article, footer, address, section {  
  7.         display: block;  
  8.     }  
  9.   
  10.     #container {  
  11.         width: 600px;  
  12.         height: 600px;  
  13.         margin: auto;  
  14.         border: 5px solid #7f7f7f;  
  15.         background: orange;  
  16.     }  
  17.    
  18.     header {  
  19.         margin: 20px;  
  20.         height: 80px;  
  21.         border: 5px solid #7f7f7f;  
  22.         background: #c3c3c3;  
  23.         text-align: center;  
  24.     }  
  25.    
  26.     .wrapper {  
  27.         width: 560px;  
  28.         height: 350px;  
  29.         margin: auto;  
  30.         border: 5px hidden #7f7f7f;  
  31.     }  
  32.    
  33.     nav {  
  34.         margin: 0px 5px 5px 0px;  
  35.         float: left;  
  36.         width: 100px;  
  37.         height: 345px;  
  38.         border: 5px solid #7f7f7f;  
  39.         background: #c3c3c3;  
  40.     }  
  41.    
  42.     h1, h2 {  
  43.         margin: 0px;  
  44.         font-size: 1.7em;  
  45.     }  
  46.    
  47.     h2 {  
  48.         font-size: 1em;  
  49.     }  
  50.    
  51.     section {  
  52.         float: left;  
  53.         margin: 0px;  
  54.         height: 345px;  
  55.         width: 300px;  
  56.         border: 5px solid #7f7f7f;  
  57.         background: #c3c3c3;  
  58.         text-align: center;  
  59.     }  
  60.    
  61.         section header {  
  62.             width: 280px;  
  63.             margin: 5px;  
  64.             height: 55px;  
  65.         }  
  66.              
  67.         section footer {  
  68.             width: 280px;  
  69.             margin: 5px;  
  70.             height: 55px;  
  71.         }  
  72.    
  73.     article {  
  74.         border: 5px solid #7f7f7f;  
  75.         width: 280px;  
  76.         height: 145px;  
  77.         margin: 10px 5px;  
  78.         text-align: center;  
  79.     }  
  80.    
  81.     aside {  
  82.         margin: 0px;  
  83.         float: right;  
  84.         width: 120px;  
  85.         height: 345px;  
  86.         border: 5px solid #7f7f7f;  
  87.         background: #c3c3c3;  
  88.         text-align: center;  
  89.     }  
  90.    
  91.     footer {  
  92.         width: 560px;  
  93.         height: 80px;  
  94.         margin: 20px;  
  95.         border: 5px solid #7f7f7f;  
  96.         background: #c3c3c3;  
  97.         text-align: center;  
  98.     }  
  99. </style> 
     
Now, we have the beautiful HTML5 structure that you see in this output image:
 
html5Structure.PNG
 


Similar Articles