HTML5

HTML5


Mostly the HTML5's feature set involves JavaScript APIs which makes it easier to develop interactive web pages but there are a few of new elements that allow you extra semantics in your conventional Web 1.0 pages.The HTML5 is the new standard for HTML, XHTML, and the HTML DOM.


Doctype

HTML 5, when used as plain HTML. It doesn’t need a DOCTYPE.so we can write at the top of your document.

HTML5 Markup Elements

Below is mentioned almost mostly used Markup Elements.


<article></article>
<aside></aside>
<command></command>
<details></details>
<summary></summary>
<figure></figure>
<figcaption></figcaption>
<footer></footer>
<header></header>
<hgroup></hgroup>
<mark></mark>
<meter></meter>
<nav></nav>
<progress></progress>
<section></section>
<time></time>
<wbr></wbr>

Syntax of article

<article>This is my first article. </article>
 Read More>>

Syntax of aside

The aside tag is used to represent content which is related to the surrounding content within an article or web page, but could be still stand alone in its own right. This type of content is represented in sidebars.

Exp:
<aside class="footer-LHS">
       <p>Copyright © 2011 exple. All Rights Reserved.</p>
</aside>
Read More>>

Syntax of audio

<audio src="/music/track1.wav">
<p>The browser does not support the audio element.</p>
</audio>

The HTML audio tag is used to specify audio on an HTML document.

Syntax of Command

A button,a radiobutton,a checkbox.

Syntax of details

<details>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</details>

Syntax of summary

<details>
<summary>Name</summary>
<p>Example</p>
</details>

Syntax of figure

<figure>
<figcaption>JavaScript Alert Box.</figcaption>
<pre><code>alert('Hii!');</code></pre>
</figure>


The markup document may look like the below structure:-

<body>
  <header>
      <h1>This is the heading in HTML5</h1>
      <p>This is a paragraph in HTML5</p>
  </header>
  <nav>
     <ul>
       <li><a href="/Menu-Tab1.html">Menu-Tab1</a></li>
       <li><a href="/Menu-Tab2.html">Menu-Tab2</a></li>
       <li><a href="/Menu-Tab3.html">Menu-Tab3</a></li>
       <li><a href="/Menu-Tab4.html">Menu-Tab4</a></li>
     </ul>
  </nav>
  <article>
    <section>
     
    <h1>Chapter 1: The Period</h1>
      <p>It was the best of times, it was the worst of times,it was the age of wisdom, it was the age of
foolishness,it was the epoch of belief, it was the epoch of incredulity,it was the season of Light, it was the season of Darkness,
        </p>    

    </section>
  </article>
  <aside>
    <h1>Archives</h1>
    <ul>
      <li><a href="/2007/09/">September 2007</a></li>
      <li><a href="/2007/08/">August 2007</a></li>
      <li><a href="/2007/07/">July 2007</a></li>
     </ul>
  </aside>
  <footer>© 2011 Example of HTML5 Inc.</footer>
</body>

Few Web Applications which are supported by HTML5 are mentioned below:-

1)Post Message
2)Local Storage
3)Workers
4)Offline Applications
5)Session Storage
6)Query Selector
7)Web Database
8)GeoLocation

HTML5 Form New Input Types:-   

    email
    url
    number
    range
    Date pickers (date, month, week, time, datetime, datetime-local)
    search
    color

Web Storage by using HTML5

By using HTML5 you  can store data :-

1)LocalStorage -
  In local storage it stores data with no time limit.

<script type="text/javascript">
localStorage.lastname="kasturi";
document.write(localStorage.lastname);
</script>

Read More>>

2)SessionStorage -
  In Session storage it stores data for one session.

Example you can try it
 Read More>>

No comments:

Post a Comment

Subscribe to: Posts (Atom)