New elements have been introduced in HTML5

  • 0
The various versions of HTML that have been released are as follows:
  1) HTML 2.0 (November 1995)
  2) HTML 3.2 (January 1997)
  3) HTML 4.0 (December 1997)
  4) HTML 4.01 (December 1999)
  
HTML5 works with modern browsers and also offers backward compatibility. 

 HTML5 has a lot of new features that will change the approach in designing websites.

 HTML5 is used extensively for web-based applications, modifications have been made in the present APIs and new APIs have been introduced.
 
APIs have been developed for media elements such as audio and video.

 Drag-and-drop APIs and elements such as canvas have been included inHTML5. 

 Facilities such as offline data storage, are a feature of HTML5 and APIs have been developed for this purpose.

 Error handling is another feature of HTML5, which will make it easier to write valid HTML code. HTML5 has strict parsing rules to handle errors in the code.

New elements have been introduced in HTML5. 

 The new elements are as follows:
 
       1) <header>
       2) <footer>
       3) <nav>
       4) <section>
       5) <aside>
       6) <article>

Header Element

  • 0
The header element is very important as it provides more accessibility than other elements, like the footer. 

The search engine finds the content in the header tag quite easily. 

Moreover, using the header element accounts for an appropriate way of web designing. The header can be used to denote the heading of a blog, a web page,or an article.

 <html>
<body>
<header>
<h2> Importance of the Header element </h2>
<hr>
</header>
<p> The header element tells the crawler about the content inside it 
</p>
</body>
</html>

Output

Footer Element

  • 0
The footer element is used to denote things like the author's name, contact information, and copyright patent to mention a few. 

A footer allows the programmer to give a general idea about the website.

 <html>
<body>
<header>
<h2> Importance of the Footer element </h2>
<hr>
</header>
<p> Footer element gives additional info about the website or any blog </p>
<footer>
<a href="www.google.com"> Google Publishing </a>
<br>
<p> Copyright © 2013-2014 Prasanth Solutions . All rights reserved.  </p>
<a HREF="/index.html">Index</a>
</footer>
</body>
</html>

 Output

Nav Element

  • 0
The nav element is an important part of HTML5 and is used extensively for navigation purposes.

The nav element is used when there is a group of navigation links contained in a specific section of the page. 

It is also used extensively where there are links to other pages or a part of the same page.

 <html>
<body>
<header>
<h2> Importance of the Navigation element </h2>
</header>
<p> Use of the Nav element  </p>
<hr>
<p> Navigation Start </p>

<nav>
<ul>
<li> <a href="www.google.com"> Google Publishing </li>
<li> <a href="http://readwrite.com/2011/06/04/free-e-books-on-html5"> Books on HTML5 </li>
<li> <a href="www.freerepublic.com/tag/articles:latest"> Latest Articles </li>
<li> <a href="news.google.co.in"> News </li>
</nav>

<br>
<footer>
<p> Copyright © 2013-2014 Prasanth Solutions . All rights reserved.  </p>
<a HREF="/index.html">Index</a>
</footer>
</body>
</html>

 Output

Article

  • 0
The article element is used for this kind of data where the content is independent of its surroundings.

We can also use the section element between the article tags.

The article element is used for independent content like RSS feeds and news articles 
whereas the section element is used to denote data of a generic nature.

<html>
<body>

<article>
<h1> Fruit Facts </h1>
 
<section>
<h2> Citrus fruits </h2>
Citrus fruits are good for your health.
<br>
Oranges and sweet limes are examples of citrus fruits.
<br>
They contain Vitamin C, which is good for colds and coughs.
</section>
 
<section>
<h2> Dried fruit </h2>
Dried fruit is very nutritious.
<br>
It is advisable to eat almonds to maintain good health.
<br>
Dried fruit helps boost the immune system.
</section>
 
</article>
 
</body>
</html>

 Output


HTML5 Structure

  • 0

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body> 
Example
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header role="banner">
 <h1>HTML5 Document Structure Example</h1>
 <p>This page should be tried in safari, chrome or Mozila.</p>
  </header>
  <nav>
  <ul>
     <li><a href="http://www.tutorialspoint.com/html">HTML Tutorial</a></li>
     <li><a href="http://www.tutorialspoint.com/css">CSS Tutorial</a></li>
     <li><a href="http://www.tutorialspoint.com/javascript">JavaScript Tutorial</a></li>
 </ul>
  </nav>
  <article>
    <section>
       <p>Once article can have multiple sections</p>
    </section>
  </article>
  <aside>
      <p>This is  aside part of the web page</p>
  </aside>
  <footer>
  Created by <a href="http://tutorialspoint.com/">Tutorials Point</a>
  </footer>
</body> 





Output













    

  • 

    • 










            

          

          

        

          

        











Microdata





    

    • 


  • 0
    • 








Microdata is markup that adds semantics to web pages in a way that computers can understand.



When third party software needs to extract meaning from a website, they should turn to microdata.



Microdata exampleThese machine-readable properties can be processed by software searching
 for specific types of information. Some search engines, Google in 
particular, already support microdata in HTML 5 and use it to improve 
search engine results as shown in the results for the CBS, USA and The CW networks and the Nip/Tuck TV Series in the image on the right.

 



The groups are called items, and

each name-value pair is a property.



We will now have a look at the global attributes used in HTML5 to define custom properties:



1)  itemscope : This attribute is used to notify that Microdata is being used in the web page. We create an item by using itemscope.



2)  itemtype : This attribute is a URL to define the item.



3)  itemid : This attribute is used to identify an item.



4)  itemprop : This attribute is used to define a property of an item. Microdata consists of name-value pairs and the value of the properties is defined here.



5)  itemref : This attribute is used to define the context of a webpage. 



Example 1 



<html>

<head>

<title> Microdata </title>

</head>

<body>



<section itemscope

    itemtype="http://learnhtml5programming.blogspot.in/"

    itemid="ISBN:0-330-34032-8"

    itemref="author_information">

    

 <h1 itemprop="title"> HTML5 </h1>

<p itemprop="street-name"> 35 Livery St. </p>

<p itemprop="country"> California </p>

<p itemprop="contact-info"> prasanth_saseendran@yahoo.co.in </p>

</section>



<div id="author_information" itemprop="author">Prasanth Saseendran</div>



</body>

</html>







 Example 2 





 <div itemscope itemtype="http://schema.org/LocalBusiness">
  <p itemprop="name">Developer City</p>


  <div>
    <img itemprop="logo" src="a.jpg" alt="Developer City Logo">
  </div>


  <p itemprop="description">
    Web Design and Development Services.
  </p>


  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">Seatons Business Centre, High Street</span>
    <span itemprop="addressLocality">Guilsborough</span>
    <span itemprop="addressRegion">Northamptonshire</span>
    <span itemprop="postalCode">NN3256</span>
  </div>


  <p>
    Tel: <span itemprop="telephone">999999999</span>
  </p>


  <p>
    Email: <a href="prasanth_saseendran@yahoo.co.in" itemprop="email">prasanth_saseendran@yahoo.co.in</a>
  </p>


  <p>
    Web: <a href="http://learnhtml5programming.blogspot.in/" itemprop="url">http://learnhtml5programming.blogspot.in/</a>
  </p>
</div>























    

  • 

    • 










        

      










Subscribe to:
Posts (Atom)