HTML 5 - Early Adoption Where Possible - Good or Bad?
cross-browser, html, w3c-validation
Solution
There are several things to consider:
- First, validation doesn't mean that much, because an HTML page can very well be valid but badly authored, inaccessible, etc. See Say no to "Valid HTML" icons and Sending XHTML as text/html Considered Harmful (in reference to the hobo-web tests mentioned in another response)
- Given this, I'd highly recommend using the new DOCTYPE: the only reason for having it in HTML5 is that it's the smallest thing that triggers standards mode in browsers, so if you want standards mode, go with it; you have little to no reason to use another, verbose, error-prone DOCTYPE
- As for the forms enhancements, you can use Weston Ruter's webforms2 JS library to bring it to non-aware browsers
- and finally, about the `data-*` attributes, it a) works in all browsers (as long as you use `getAttribute()`), b) is still better than abusing the `title` or `class` attributes and c) won't bother you with validation as we said earlier that validation isn't that important (of course it is, but it doesn't matter that your page is invalid if the validity errors are willful; and you can already use HTML5 validation in the W3C validator, so...); so there's no real reason not to use them either.
Problem
This question was inspired a bit by this question, in which the most upvoted answer recommended using a feature from HTML 5. It certainly seemed to be a good method to me, but it made me curious about using features from a future spec in general. HTML 5 offers a lot of nice improvements, many of which can be used without causing problems in current browsers. Some examples: ``` // new, simple HTML5 doctype (puts browsers in standards mode) <!doctype HTML> // new input types, for easy, generic client side validation <input type="email" name="emailAddress"/> <input type="number" name="userid"/> <input type="date" name="dateOfBirth"/> // new "required" attribute indicates that a field is required <input type="text" name="userName" required="true"/> // new 'data-' prefixed attributes // for easy insertion of js-accessible metadata in dynamic pages <div data-price="33.23"> <!-- --> </div> <button data-item-id="93024">Add Item</button> ``` Many of these new features are designed to make it possible for browsers to automatically validate forms, as well as give them better inputs (for example a date picker). Some are just convenient and seem like a good way to get ready for the future. They currently don't break anything (as far as I can tell) in current browsers and they allow for clean, generic clientside code. However, even though they are all valid in HTML 5, they are NOT valid for HTML 4, and HTML 5 is still a draft at this point. Is it a good idea to go ahead and use these features early? Are there browser implementation issues with them that I haven't realized? Should we be developing web pages now that make use of HTML 5 draft features?