Introduction and how to use HTML5 Elements.

Vivek.Ramapuram
Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 1044 red flag

HTML 5 was developed to solve compatibility problems that affect the current standard HTML 4. It is the programming language for the contents and views(Appearence) of Web pages to describe .It is the hypertext markup language.
Recommendation
Read Multiple Date Picker Functionality in jquery before this article.

Introduction

HTML 5 is a core technology  of the Internet used for structuring and presenting The previous version, HTML 4, was standardized .But HTML 5 is advanced Its core aims had  improved that any language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices.


How to start a HTML 5 structure

Here in HTML 5  we should start our page with "DOCTYPE tag "

For example We should mention the tag in html page  as shown in below.
<!DOCTYPE html /> 

How to specify the special character Encoding in HTML 5

In HTML 5 Character  encoding  is different from language to language. This character encoding is used to set the charset in HTML. This should mention in  tag's  in between head tag and below tittle tag.

Example We should mention the tag  as shown in the below .
Note We are showing the (DOCTYPE) tag also in this .

<!DOCTYPE html>
<head>
    <title></title>
    <meta charset="UTF-8" /> 

</head>


Where to write the code in the HTML page 

In the HTML page,We write the code in between BODY tag's

For example This is the body 

 <body>

</body>
In bewteen the body tag We should write the code.

How to start the code to Create a Webpage Using HTML 5


There are different tags in the HTML 5 
They are 
Section , Articles ,  Header, Hgroup , Navigation, Paragraph , Aside , Footer

These tags are used  in the code to create  a web page 

Section Tag

In HTML 5 we use  section tag's  to divide the content. This is used to  divide  different sections in the  

webpage .Previously we were using DIV tag's for the separation of webpage.

Foe Example Section tag is shown is here

<section> </section>
Article Tag

In Html 5  article tad is used to make content of the page independently distributed .The  article tag can have many sections inside or nested article tag as well. It is used primarily to make a content of the web page reusable

<article>   </article>

What is the Difference between Articles , Section , and Div 

If the content is self-sufficient for a feed reader, use <article> 
If the content is related with the page, use <section> 
If the content is standalone but part of the page, use <div> 

Header Tag
These tag's are used for heading in the webpage.
There are different heading tag's like , <h1></h1> , <h2></h2> , <h3></h3> ,<h4></h4> ,<h5></h5>  <h6></h6> .

<body>
<h1>This is header </h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6>

</body>
Aside tag 
In this aside tag , We can create a side panel if  we are in the need to keep some content in the side panel that is related with the main content but not part of the content

<aside>  

 
</aside>

Hgroup and "P" Tag
In Html 5, Hgroups are used for multiple headings and sub-headings in the document if  we want to group them.
This "P" tag is used for paragraph . To arrange the content in the correct format.

<hgroup>
<h1>
</h1>

<p>
</p>


</hgroup>

Footer Tag
In Html 5, Footer is a  element that represents  its nearest ancestor element and can typically contains author information, copyright information, links etc. 

Navigation Tag
To place navigational link on the page, we use nav tag. Please note that this is not used to keep any hyper link of the page but only to those links that is intended for major navigation or repetitive in nature like main menu links, side links etc. 

Here We have discussed all the tag's that are used in Html 5. Lets see an example by using all these tags.

  <section id="Header">
        Top Menu <a href="/" title="Home">Home</a>

    </section>
    
    <article>
        <h1>
            This is about ASP.Net
        </h1>
        ASP.NET is the server side technology to develop  web applications
    </article>


    <h1>This is about ASP.NET</h1> 
    <h2>This is about h2</h2>

    <hgroup>
        <h1>My header</h1>
        <h2>.NET Technology knowledge based website</h2>
    </hgroup>
    <p>We are here to develop the webpage.</p>  

    <nav>        
     <a href="/" title="Home">Home</a> | <a href="/articles/" title="Articles">Articles</a> | 
    <a href="/forums/" title="Forums">Forums</a> | <a href="/Interview" title="Interview">Interview</a>     </nav>


    <footer>
        <a href="/contactus.aspx">Contact us</a> | <a href="/aboutus.aspx">About us</a> |

    </footer> 
The output looks like below





Conclusion


We have looked into basics concepts of HTML 5 in this article. Hope you understand.

Reference

www.dotnetfunda.com

Recommendation
Read Date picker animation functionality after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Vivek.Ramapuram
Full Name: Vivek R
Member Level: Bronze
Member Status: Member,MVP
Member Since: 2/25/2014 12:46:59 PM
Country: India
RvGoud
http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)