HTML 5 (& Opera)

So, after the announcement that the XHTML 2 working group will not be renewed, and more resources will be put into HTML 5 development, I have tried to do some research into HTML 5 in consideration of jumping on the bandwagon. I was not very familiar with the HTML 5 spec, as most of my work is done in XHTML 1, usually with the Transitional doctype. The research I have done so far, though, reveals several advantages of the HTML 5 specification:

  • the “target” attribute is no longer deprecated for links, therefore target=”_blank” is completely valid on an anchor (useful for web developers without time to use JavaScript to force links to open in external windows/tabs)
  • there is only one doctype, and it is extremely simple (at least for the HTML 5 spec used as HTML, rather than as XML): <!doctype html>
  • this doctype is recognized by IE6 and will not trigger quirks mode (found this out through some personal testing)
  • HTML 5 brings Web Forms 2, which have some awesome capabilities
I wanted to discuss the Web Forms 2 a little further. Web Forms 2 are only currently supported fully by Opera, but their potential for alleviating developer headaches is very great. You can use attributes on your inputs such as “required” (e.g. required=”required”), and this forces form validation on the client side, handled completely by the browser. Other input goodness includes such extra types as “email” or “date” which validates an input element for an “email” or a “date,” with the “date” input type providing a date picker dropdown, provided completely by the browser! Here is some example HTML 5 code that will validate and provides an email input that is required and requires a valid email address before the browser will submit the form to the server. This code will work best in Opera, until Firefox, Safari, and Internet Explorer catch up with the Web Forms 2 support:
<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>HTML 5!</title>
    </head>
    <body>
            <fieldset>
                <legend>Testing Web 2 forms in Opera</legend>
                <form method="post" action="">
                    <label>Email: <input type="email" required="required" name="email"/></label>
                    <input type="submit" />
                </form>
            </fieldset>
    </body>
</html>

I love that simple doctype! I am still not completely sure if I will be a convert for my next project, but I am definitely going to continue to research the HTML 5 specification as a more reasonable (and possibly “future-proof”) solution for coding my projects in the future.

No Comments
July 12, 2009 by Michael Head in Development

Leave a Reply

Using Gravatars in the comments - get your own and be recognized!

XHTML: These are some of the tags you can use: <a href=""> <b> <blockquote> <code> <em> <i> <strike> <strong>