In this article you will learn HTML5 new descriptive elements.
Introduction
In this article you will learn HTML5 new descriptive
elements.
Using the code
Previously, we were using div tag in the following format.
<div id="Menu">
<div id="Header">
We are using these "id" for our own purpose to identyfying.Unfortunately this doesnot help browser with this markup.
With HTML5 W3C introduces new rich set of elements , through which developer can convey his meaning.
Few Elements of HTML5:
- Article
- Aside
- Figure
- Figurecaption
- Header
- Hgroup
- Mark
- Nav
- Section
- Time
Using these elements , developer can easily guess what the most elements do.
In above daigram , you can see that Header and Footer.
By, seeing itself user can understand , that these contain information related to header and footer.
Example:
<BODY>
<HEADER>
<hgroup>
<h1> HTML5 ARTICLE 2 </h1>
<h3> HTMLL5 DEMO DEMO</h3>
</hgroup>
</HEADER>
</BODY>
So, above example illustrates us how to use header element.
"hgroup" used to group all related things.
Lets us how to use Section and Article tags.
"Section" - To expain in simple terms , consider a document which is divided into
different sections. Each section has its own meaning and purpose.
Similary , we can divide our webpage into different sections , using "Section" tag.
Example:
<BODY>
<SECTION>
<H1> NEWS </H1>
</SECTION>
<SECTION>
<H1> RSS FEEDS</H1>
</SECTION>
</BODY>
ARTICLE TAG: The name itelf is self expanatory, which indicates that we can write some content in
that tag. You will get a clear picture in the below example, how to use this tag.
Example:
<BODY>
<SECTION>
<H1> NEWS </H1>
<ARTICLE>
place your news content here!
this article is related to news section.
</ARTICLE>
</SECTION>
<SECTION>
<H1> RSS FEEDS</H1>
<ARTICLE>
place your RSS FEEDS here!
this article is related to RSS section.
</ARTICLE>
</SECTION>
</BODY>
NAV Tag: We can use this tag for placing Links or Hyperlinks or Menus.
So by seeing this Tag , u can identity that this tag contains Navigation Items.
Example:
<Body>
<Nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MICROSOFT DOWNLOADS</a></li>
<li><a href="#">MICROSOFT HYDERABAD</a></li>
<li><a href="#">MICROSOFT REDMOND</a></li>
</ul>
</Nav>
</Body>
Aside Tag: By seeing the diagram-001 , which clearly says us , that all the elements which we
want to place in sidebar , can be put inside Aside Tag.
Example:
<Body>
<Aside>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MICROSOFT DOWNLOADS</a></li>
<li><a href="#">MICROSOFT HYDERABAD</a></li>
<li><a href="#">MICROSOFT REDMOND</a></li>
</ul>
<Aside>
</Body>
Figure & Figurecaption: These tags are used when we want to place any images.
Example:
<figure>
<img src="Images/demo.jpg" height="100" width="100"/>
<figcaption>PHOTO</figcaption>
</figure>
Finally , Combining all, I have designed something below, with some dirty CSS Styles.
You can use CSS for better designing.
Conclusion
Html5 RICH SET OF TAGS HELPS DEVELOPERS TO IDENTIFY AND PLACE ELEMENTS PROPERLY.
If you like this article, subscribe to our 
RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.