<p>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.</p> <p>HTML 5 offers a lot of nice improvements, many of which can be used without causing problems in current browsers. </p> <p>Some examples:</p> <pre class="prettyprint"><code>// 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> </code></pre> <p>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.</p> <p>They currently don't break anything (as far as I can tell) in current browsers and they allow for clean, generic clientside code.</p> <p>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.</p> <p><strong>Is it a good idea to go ahead and use these features early?</strong> </p> <p>Are there browser implementation issues with them that I haven't realized? </p> <p>Should we be developing web pages now that make use of HTML 5 draft features?</p>

<p>There are several things to consider:</p> <ol> <li>First, validation doesn't mean that much, because an HTML page can very well be valid but badly authored, inaccessible, etc. See Say <em>no</em> to "Valid HTML" icons and Sending XHTML as text/html Considered Harmful (in reference to the hobo-web tests mentioned in another response)</li> <li>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</li> <li>As for the forms enhancements, you can use Weston Ruter's webforms2 JS library to bring it to non-aware browsers</li> <li>and finally, about the <code>data-*</code> attributes, it a) works in all browsers (as long as you use <code>getAttribute()</code>), b) is still better than abusing the <code>title</code> or <code>class</code> attributes and c) won't bother you with validation as we said earlier that validation isn't <em>that</em> 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.</li> </ol>

<p>Good question!</p> <p>In short: it depends on your context, and risk tolerance :)</p> <p>Slightly longer:</p> <ul> <li><p>I <em>think</em> it's always good to push the envelope on early adoption of technology. It gives you an advantage over late-comers in the commercial world, and also gives you much more leverage in influencing the technology as it emerges.</p></li> <li><p>If you don't want to have to re-write code, or update your source, then early adoption may not be for you. It's perfectly respectable to want to write solid, stable code that never has to change, but it's entirely up to you (and your business context)</p></li> </ul>

HTML 5 - Early Adoption Where Possible

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?

Why was HTML5 introduced?

Internet usage worldwide continues to grow year after year and the technology used is projected to evolve at an increasingly faster rate. Therefore, HTML5 was implemented to start addressing these issues to provide a smoother and more consistent experience for web users and developers.

What would happen if you didn't specify the HTML5 declaration?

<! DOCTYPE html> // Tells the browser that we are using HTML5. If document type is not mentioned, browser will go to Quirks mode. Quirks mode depends upon the web browser version, If is older version then this will not support HTML5 tags (Example: header tag, footer tag, section tag,...)

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.

Good question!

In short: it depends on your context, and risk tolerance :)

Slightly longer:

I think it's always good to push the envelope on early adoption of technology. It gives you an advantage over late-comers in the commercial world, and also gives you much more leverage in influencing the technology as it emerges.
If you don't want to have to re-write code, or update your source, then early adoption may not be for you. It's perfectly respectable to want to write solid, stable code that never has to change, but it's entirely up to you (and your business context)

If your page relies heavily on search engine placement, it may be worth considering that some engines give priority to validating HTML (Source: http://www.hobo-web.co.uk/seo-blog/index.php/official-google-prefers-valid-html-css/).

Also, it is worth considering that relying on the new date input elements (such as those in Opera, possibly others) allows for more convenience on the part of the developer, it typically precludes including more complex Javascript controls which would better server older browsers (typically falling back to a simple text input field).

Of course and as always, don't rely on browser side checks and validate all input server side.

Please don’t use the new features before you can test them in at least one browser. For example, if you use the now form features, be sure to test in Opera. Otherwise, you’ll likely do more harm than good by contributing to a poisoned legacy out there.

When a feature is already implemented in browsers and you are testing with those browsers, sure, please use the new features.

HTML 5 - Early Adoption Where Possible - Good or Bad?

Tags:

html

cross-browser

w3c-validation

TM.

People also ask

4 Answers

Thomas Broyer

John Weldon

Jon

hsivonen

Recent Activity

Donate For Us