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:
<body>
<form id="form1" runat="server">
<details>
<summary>Copyright 2013.</summary>
<p>- by Example Pvt Ltd. All Rights Reserved.</p>
<p>All content on this website are the property of the company Example Pvt Ltd.</p>
</details>
</form>
</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 hiddden on user demand. It can create some interactive widgets that can be opened or closeed by the user.
Note: For example check the summary element example.
3. <mark> Element
The <mark> element is for text that should be highlighted.
Example:
<body>
<form id="form1" runat="server">
<p>The <mark><mark></mark> element is use for text that should be highlighted</p>
</form>
</body>
Output
![HTML5 mark element.PNG]()
4. <meter> Element
The <meter> element can be use 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:
<body>
<form id="form1" runat="server">
<p>Gauge Bar</p>
<meter value="5" min="0" max="10">5 out of 10</meter><br />
<meter value="0">70%</meter>
</form>
</body>
Output:
![HTML5 meter element.PNG]()
5. <progress> Element
The state of a work in progress:
<body>
<form id="form1" runat="server">
Loading Bar: <br />
<progress value="35" max="100"></progress>
</form>
</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:
<body>
<form id="form1" runat="server">
<!--container-->
<div id="container">
<!--start header-->
<header><br />
<h1><header></h1>
</header>
<!--end header-->
<!--start wrapper-->
<div class="wrapper">
<!--nav bar-->
<nav><br /><br /><br /><br /><br /><br /><br /><br />
<h1><nav></h1>
</nav>
<!--end nav bar-->
<!--start section-->
<section>
<!--start hgroup-->
<hgroup>
<h1><section></h1>
</hgroup>
<!--start hgroup-->
<!--start header in section-->
<header><br />
<header>
</header>
<!--end header in section-->
<!--start article in section-->
<article><br /><br />
<p><article></p>
</article>
<!--end article in section-->
<!--start footer in section-->
<footer><br />
<footer>
</footer>
<!--end footer in section-->
</section>
<!--end article-->
<!--Start aside-->
<aside><br /><br /><br /><br /><br /><br /><br />
<h1><pre><aside></pre></h1>
<br />
</aside>
<!--end aside-->
</div>
<!--end wrapper-->
<!--start footer-->
<footer>
<br />
<h1><footer></h1>
</footer>
<!--end footer-->
</div>
</form>
</body>
Now it's time to add some CSS and make it beautiful:
<style>
* {
font-family: Arial;
border-radius: 13px;
}
header, nav, article, footer, address, section {
display: block;
}
#container {
width: 600px;
height: 600px;
margin: auto;
border: 5px solid rgb(127,127,127);
background: orange;
}
header {
margin: 20px;
height: 80px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}
.wrapper {
width: 560px;
height: 350px;
margin: auto;
border: 5px hidden rgb(127,127,127);
}
nav {
margin: 0px 5px 5px 0px;
float: left;
width: 100px;
height: 345px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
}
h1, h2 {
margin: 0px;
font-size: 1.7em;
}
h2 {
font-size: 1em;
}
section {
float: left;
margin: 0px;
height: 345px;
width: 300px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}
section header {
width: 280px;
margin: 5px;
height: 55px;
}
section footer {
width: 280px;
margin: 5px;
height: 55px;
}
article {
border: 5px solid rgb(127,127,127);
width: 280px;
height: 145px;
margin: 10px 5px;
text-align: center;
}
aside {
margin: 0px;
float: right;
width: 120px;
height: 345px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}
footer {
width: 560px;
height: 80px;
margin: 20px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}
</style>
Now, we have the beautiful HTML5 structure that you see in this output image:
![html5Structure.PNG]()