Search
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Tue, 29-Jul-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
37300
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads

HTML5 TAG ELEMENTS

Ogipansrk
Posted by under HTML 5 category on for Beginner level | Points: 250 | Views : 3589 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 5 out of 5
1 vote(s)
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.
Page copy protected against web site content infringement by Copyscape
About the Author

Ogipansrk

Full Name: ogipansrk hc
Member Level: Starter
Member Status: Member
Member Since: 12/4/2011 12:45:27 AM
Country: India

http://www.dotnetfunda.com

Login to vote for this post.
Found interesting? Add this to:


Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)