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@example.com" 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.

Michael
6/13/2012 04:02:08 pm

I'm relatively new to web development but i have about 6 months "experience" and I may have felt a little overconfident when i decided to try and download Adobe Edge which allows me to create some HTML 5 code for some very simple animations. I was wondering if there have been any other questions regarding any problems weebly users have encountered. I feel strongly that I have been following all directions and have watched countless videos and many articles but I still can't find a way to get the Edge animation to work.

Thank you
Michael

Reply
Jyothish
6/15/2012 09:57:01 pm

Hi Michael,

I have not used Adobe Edge. In fact I dont use any software generated markups. I write my own from the scratch <html> :)
so that you dont need mess up with the extra codes that your software robo is generating.

Reply
9/6/2013 12:08:15 am

Took the day off and was just reading up some blogs and thought I would post here

Reply



Leave a Reply.