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

Gyanender Sharma
Sep 11, 2013
23.9k
0
0
Article

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>

<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>

<div>

</div>

</div>

</div>

</div>

</div>

</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>

<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>

<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>

<nav>

<a href="HTML5: Part1">Part1</a> |

<a href="HTML5: Part2">Part2</a> |

<a href="HTML5: Part3">Part3</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>

<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>

<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>

<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>

<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>

<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>

</address>

</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.