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 entire structure of a 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:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HTML Basic Structure</title>
<style>
.container {
width: 600px;
height: 600px;
margin: auto;
border: 5px solid rgb(127,127,127);
background: orange;
text-align: center;
}
.header {
margin: 0px 15px 5px 15px;
height: 120px;
width: 560px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
}
.nav {
width: 530px;
height: 30px;
margin: 0px 15px 0px 10px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
}
.wrapper {
width: 560px;
height: 300px;
margin: auto;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}
.content {
float: left;
margin: 0px 5px 5px 5px;
height: 220px;
width: 320px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
}
.subcontent {
border: 2px solid rgb(127,127,127);
width: 305px;
height: 50px;
margin: 10px 5px;
}
.sidebar {
margin: 0px 8px 6px 8px;
float: right;
width: 190px;
height: 220px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
}
.footer {
width: 560px;
height: 60px;
margin: 5px 15px;
border: 5px solid rgb(127,127,127);
background: rgb(195, 195, 195);
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<!--container-->
<div class="container">
<h2><div class="container"></h2>
<!--header-->
<div class="header">
<h2><div class="header"></h2>
<!--nav bar-->
<div class="nav">
<h3><div class="nav"></h3>
</div>
<!--end nav bar-->
</div>
<!--end header-->
<!--wrapper-->
<div class="wrapper">
<h2><div class="wrapper"></h2>
<!--content-->
<div class="content">
<h2><div class="content"></h2>
<!--end subcontent-->
<div class="subcontent"><h2><div class="subcontent1"></h2></div>
<div class="subcontent"><h2><div class="subcontent2"></h2></div>
<!--end subcontent-->
</div>
<!--end content-->
<!--sidebar-->
<div class="sidebar"><h2><div class="sidebar"></h2></div>
<!--end sidebar-->
</div>
<!--end wrapper-->
<!--start footer-->
<div class="footer"><h2><div class="footer"></h2></div>
<!--end footer-->
</div>
<!--end container-->
</div>
</form>
</body>
</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 includes an hgroup or an h1-h6 elements, 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:
<body>
<form id="form1" runat="server">
<header>
<h1>C-SharpCorner</h1>
</header>
</form>
</body>
2. <section> Element
The new <section> element is used to define a section in a HTML document.
Example :
<body>
<form id="form1" runat="server">
<section>
<h1>Hello World</h1>
<p>The new section element use to define a section in a document</p>
</section>
</form>
</body>
3. <nav> Element
The <nav> element defines navigation links in 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:
<body>
<form id="form1" runat="server">
<nav>
<a href="HTML5: Part1">Part1</a> |
<a href="HTML5: Part2">Part2</a> |
<a href="HTML5: Part3">Part3</a> |
<a href="HTML5: Part4">Part4</a>
</nav>
</form>
</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 in which situation you use this element because it's commonly used the same as a div tag.
Example:
<body>
<form id="form1" runat="server">
<article>
<h1>Internet Explorer 9</h1>
<p>
The article element is used to define article, it specify self-contained content. We can use <article> element in various situations like:
</p>
</article>
</form>
</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.
<body>
<form id="form1" runat="server">
<aside>
<h1>Aside Element</h1>
<p>The <aside> element defines some content aside from the content it is placed in (like a sidebar).</p>
</aside>
</form>
</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
<body>
<form id="form1" runat="server">
<p>The figcaption element is use to define a caption for a figure element and it can be placed as the first and last child for the figure element.</p>
<figure>
<img src="dummy.jpg" alt="Dummy Image" width="200" height="150" />
<figcaption>Img.1 - Dummy Image Example.</figcaption>
</figure>
</form>
</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:
<body>
<form id="form1" runat="server">
<address>
<a href="name">Gyanender Sharma</a>
<a href="mail">Inbox your suggestions</a>
</address>
</form>
</body>
8. <footer> Element
The "<footer>" element defines a footer for a section or a document.
<body>
<form id="form1" runat="server">
<footer>
<address>
Contact Us<a href="mailto:[email protected]">Gyanender Sharma</a>.
</address>
<p><small>© copyright 2013 Dummy Pvt Ltd.</small></p>
</footer>
</form>
</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.