Lesson 3: HTML5 Structural Elements

This tutorial for HTML5 structural Elements will guide you through the new structural elements that have been introduced in HTML5.

HTML5 comes with some very useful new tags for better and more simple structure of the markup as used earlier in HTML. For a web developer it is very important to know about html5 structural elements, we have tried to cover html5 structural elements in this tutorial.

NOTE: We use all those tag inside the <body>..</body> of the page!!!

Basic Structural Elements in HTML5

HTML 5 : Basic Structural Elements

HTML 5 : Basic Structure

<article>

The <article> tag defines and article or other content on a web page, for example forum post, comment etc.

Basic Usage:

We use it where we  place our content, post or forum, so its easy for search engine to know where our content is, earlier we just place it inside a div.

<aside>

The <aside> tag defines a section intended to be used for additional content like for example sidebar or any other content you want to be considered as separate from the main content.

Basic Usage:

We use it as we place some image related to a content, or some advertisement on a webpage etc.

<header>

The <header> tag represents the header of the web page. Usually this element is on top of the page and contains logo or other info like motto, etc.

<header>

<hgroup>

<h1>sample Header 1</h1>

<h2>sample  Sub Header 2</h2>

</hgroup>

</header>

 

NOTE: In the above sample <hgroup> is used to make a group of headings to count as a single heading for the purposes of the document structure.

<figure>

The <figure> tag is intended to be used for defining images that annotate an article. The <figcaption> is usually used inside a <figure> tag for the caption of the figure.

<figure>

<img src=”sample1.png” alt=”logoo” />

<figcaption>

<a href=”http://anilkumarsahu.com/logo.png”>

Site Logo</a>, visit our web site for more info.

</figcaption>

</figure>

 

<footer>

<footer> tag defines the footer section of a page .earlier we just place everything inside a <div></div> giving a class name to it for styling.


<footer>

<h3 id=”copyright”>Copyright 2014, All rights reserved!</h3>

</footer>

 

<nav>

The <nav> tag is used to define the navigation menu on a page.

<nav>

<h2>Menu section</h2>

<ul>

<li><a href=”#Page1″>home</a></li>

<li><a href=”#Page2″>Aboutus</a></li>

<li><a href=”#Page3″>Services</a></li>

<li><a href=”#Page1″>contact us</a></li>

</ul>

</nav>

 

<section>

The <section> tag is used to separate the different parts of the page.

Here is how a sample structure of a HTML5 page


<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Sample page for  HTML5 document</title>

<script src=”samplefile.js”></script>

<link rel=”stylesheet” href=”style-file.css”>

</head>

<body>

<header>header goes here</header>

<nav> Menu goes here</nav>

<article>

<section> section part goes here</section>

</article>

<aside>aside goes here</aside>

<footer>footer goes here</footer>

</body>

</html>

 

Note: This structural elements are very important sections for a web developer, and one can learn it easily, just use proper html5 syntax, this is very important in every aspects while designing a webpage. This is the mostly asked question in interviews for Web Developers.

You Might Also Like