In-place editing is another beautiful feature in HTML5. which enable you to edit the webpage in the browser.

Try this piece of code

<section contenteditable="true">
  <h2>Click to change me</h2>
  <p>This paragraph can be changed</p>
  <ol>
    <li>This too can be edited<li>
    <li>and you can add more items</li>
    <li>after this one by pressing enter</li>
  </ol>
  <p>It's pretty neat stuff</p>
</section>
 
I am not here to tell you what HTML5 is, but to tell you what all you can do with the latest web technologies, some new ideas, tips and tricks in HTML5 , together with CSS-3 and Javascript.

Introduction of semantics in its specifications is one of the important feature of HTML5 over other markup. HTML5 adds a lot of new features to the HTML specification, but there is already some limited browser support for these new features. Don't worry they will come up with their updates soon... In fact the new release of IE 9 supports most of them, some features better than firefox or other widely used browsers as they are utilizing the machine power to render complex commands.
  • <!doctype html>:    First thing you notice in HTML5 is the <!doctype html>. It means.. HTML is H T M L. It can be this simple because HTML 5 is no longer part of SGML (Standard Generalized Markup Language), but is instead a markup language all on its own.
  • <meta charset="UTF-8">: It uses UTF-8 and you define it with just one meta tag
HTML 5 New Structure
HTML 5 is better structured than its previous versions (with new tags similar to XML). They simply improved the readability of the document. Below are some of the specifications used for structuring documents.
  • <section> - to define sections of pages
  • <header> - defines the header of a page
  • <footer> - defines the footer of a page
  • <nav> - defines the navigation on a page
  • <article> - defines the article or primary content on a page
  • <aside> - defines extra content like a sidebar on a page
  • <figure> - defines images that annotate an article
Eg:
    <!doctype html >
    <html>
    <meta charset="UTF-8">
    <header> ... </header>
    <body>
        <nav>
            <a href="home.html">Home</a>
            <a href ....</a>
        </nav>
        <section>
            <article>
                ...
            </article>
        </section>
        <footer>
            ...
        </footer>
    </body>
</html>

Some others are details, summary, figcaption etc.

HTML5 makes it easy for web application developers for developing dynamic web pages.  See the new features in form elements.
  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url
Try the piece of code in your html page. I mostly use Firfox. So dont forget to update your firefox to the latest version if you are using one.

<input type="email" required="requred" placeholder="[email protected]" autofocus=true>

No need to write a special validation script to check whether this field is empty or its an email. These are some of the in built validations. There are lot more. You can learn more in w3schools website.