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.
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 TagIn 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 TagThese 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
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