I keep hearing about html5 and seen on other questions/answers on this site that the current browsers do not yet support it...what I know:
it has potential to replace flash and silverlight
Google seems to be building new systems to take advantage of it
(is that correct?)
What I don't know (which is a lot, but will limit it to some points of interest):
how will existing sites work within a html5 browser (backward compatible?)
is Flash/Silerlight really gone? will they be supported? (I'm sure adobe will not be happy)
is javascript impacted? improved? will jquery still work?
is there a good site listing (high level down) what the html code impacts are?
W3C has a working draft of the differences between HTML 4 and 5.
Google seems to be building new
systems to take advantage of it (is
that correct?)
Correct
Google Bets Big on HTML 5: News from Google I/O
HTML5 and The Future of the Web
HTML 5 is a mess. Now what?
http://html5doctor.com/ is probably a good place to answer a lot of that.
Stop thinking about it as a new version. Think of it as just another step, building on what we have and introducing some new elements that let us do new stuff.
Read up on the new elements and what browser support they have, then start using them where they help you (remembering to use the right doctype).
To answer just one question:
"is Flash/Silerlight really gone? will
they be supported? (I'm sure adobe
will not be happy)"
Yes, they will be supported, since HTML5 still has the OBJECT tag and this is what is used to embed external content (such as Flash etc).
For starters, it can work in older browsers. I've got it working in most major browsers in a reasonable span of versions: http://www.stevefenton.co.uk/
Flash and Silverlight will still be a part of the internet, but what they want to do is make it possible to have video content (for example) that doesn't need a plug-in to play it back. The idea is to pick a format that all browsers will support (this is more difficult than it sounds as the codecs might require licensing, or if they don't - might not be that good).
ALL browsers that support HTML5 will also display HTML4.01 and XHTML websites.
JavaScript and jQuery WILL continue to work.
Check out the http://www.w3.org/ website for the full specifications (in draft).
how will existing sites work within a html5 browser (backward compatible?)
Just fine. HTML5 is, as far as possible, backwards-compatible. Of course, some new HTML5 tags/APIs don’t work in older browsers (although many, like the new form field types, degrade gracefully), but much of HTML5 merely specifies, and builds on, how existing browsers parse HTML.
is Flash/Silverlight really gone? will they be supported? (I'm sure adobe will not be happy)
Adobe and Microsoft haven’t cancelled work on Flash and Silverlight, and no browser-makers (not even Apple) have said they’re removing their plugin APIs. So no, Flash and Silverlight are not gone.
is javascript impacted? improved?
The HTML5 spec both defines the DOM interface for HTML (which previous HTML specs didn’t do), and adds new browser JavaScript APIs (e.g. for data- attributes and geolocation). JavaScript the language isn’t affected though, as it’s specified in the ECMAScript Language Specification
will jquery still work?
Yes.
is there a good site listing (high level down) what the html code impacts are?
You don’t have to change any HTML code for it to continue to work.
As mentioned in other answers, the W3C has a decent document of the changes from HTML4:
http://www.w3.org/TR/html5-diff/
And Dive into HTML5 is a great intro if you’re familiar with HTML 4, especially it’s introductory “5 things you should know” chapter:
http://fortuito.us/diveintohtml5/
http://fortuito.us/diveintohtml5/introduction.html
Related
Features of HTML5 are no doubt very compelling but is it a good time to start development in HTML5 ?
I just have started development in HTML5 and realized at the time even not all HTML5 input types are supported by all browsers. It means it is not sure about basic stuff like input forms.
Please share how you are managing these things ? (Using HTML5 code with browsers currently supporting HTML5)
HTML 5 is still under development so you've got to be careful. Certain features, such as the more basic ones like <header> and <footer>, are less likely to change before the final release. The doctype decleration is unlikely to change. I wouldn't rely on the multimedia support as supported formats vary widely accross browsers.
The momentum behind HTML5 is strong and it is indeed a good time to get started if you have not already.
At the lowest level, you would need to write feature detection in your pages to see if the particular browser supports the HTML5 feature that you want to use.
I suggest the following:
Use sites like caniuse.com to determine the current support for a particular feature across browsers.
Use templates like HTML5 Boilerplate, which give you a structure for the HTML5 page that you can use , with support for various shims that bring in support for HTML5 features in older browsers.
If you prefer doing the detection yourself, use a library like Modernizr.
As with all cross-browser development, you can never rely on any support in the browser. If you target older browsers, then do not rely on HTML5 features. I haven't had problems with using the HTML5 doctype in older browsers, but specific features can be troublesome — e.g. you can use <header> elements, but IE won't let you style them in any way as it disregards header styles as invalid.
As long as you need to support old enough browsers, it will never be a good time to start using HTML5. The only thing that decides whether it's okay to use HTML5 is which browsers you want to support.
HTML5 is much easier then previous ones, It has developed allot in input fields, though its still under development and not complete yet.
You can check here http://html5test.com/ which browser supports HTML5 how much?
Currently, Chrome is the best that supports the HTML5 more than any other web browser.
-Thanks.
Take a look at the table in this wikipedia article. There is a lot of variability amongst browsers as to which parts of HTML5 are currently supported. This website tests your web browser to see which features it supports, so install a bunch of different browsers on your computer and test them for yourself.
We are small web app development company. We are planning to upgrade to HTML5/CSS3 and we are going through training phase(We are using video tutorials). While HTML5/CSS3 seems promising, there seem to be so many issues with cross-browser compatibility as well as many new APIs. Is there any template we can use right away while waiting for full recommendation from W3C? Currently, are there libraries/tools we can use to ensure cross-browser support?
Help much appreciated. :)
HTML5... Where to Start?
Right now your best bet is to follow what the browsers can do. Therefore, follow the different vendors' browser development blogs on the subject.
By the way, HTML5 is mostly a set of unrelated features going from markup to new functionalities such as WebGL and client storage (WebSQL). HTML5 builds upon previous specs HTML standards and clarifies many features. On the other end, CSS is the culmination of CSS1+CSS2+CSS3.
Go on the web, all the information is there!
Resources
A brief history of markup (information)
HTML5 Rocks (information + tutorials)
Dive Into HTML5 (information)
CSS3 (information + tutorials)
Quirksmode (browser compatibility)
WebGL experiments (experiments, you can view the source to learn)
HTML5 demos (demos)
Mozilla's development blog
Webkit
Librairies & Templates
HTML5 Boilerplate
HTML5 shiv (enables HTML5 for IE)
Modernizr
jQuery
Normalize.css
Tools
Aptana Studio (Linux/Mac OS/Windows)
Espresso (Mac OS X)
WebStorm (Linux/Mac OS/Windows)
Related StackOverflow Question & Answers
How important is it to follow the web standards?
Which HTML version should be chosen for a public website?
I will try to keep adding resources...
It will be a while before html & css3 will be supported but in the mean time if you would like to get a head start check out themeforest they have plenty html5 and php templates that you can start hacking away in. Another great tool is to check out this noupe post where they list some free html5/css3 tutorials.
Let's split the cross-browser compability into two parts: new HTML5 elements / attributes and HTML5 APIs.
Elements: Browsers that don't support the new HTML5 elements (like <section>), e.g. older versions of IE, will just print the content and ignore the styling. You can use a little JavaScript hack to make the elements stylable in IE: HTML5shim.
Attributes: Using the new HTML5 attributes is completly fine as well. Browsers that don't understand them will just ignore them. With Modernizr you can check if the HTML5 / CSS3 feature is available and if not just provide a fallback with JavaScript.
To provide support for the new HTML5 APIs you can use polyfills to add support for missing features. Here's a good list:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
By the way: It's a good idea to use some HTML5 APIs like localStorage as a progressive enhacment. If it's just a little feature that's for enhacing the user experience, it's fine to do it with HTML5 and let older browsers just have the normal version.
jQuery is the most popular cross-browser library. It will use HTML5 features on browsers that support it and rolls back gracefully to something else when needed. It's updated frequently and is very feature rich.
quirksmode http://www.quirksmode.org/compatibility.html is a list of all HTML/CSS/DOM features and which browsers support them and to what degree.
w3schools http://www.w3schools.com/ is an excellent resource for seeing how specific HTML/CSS/DOM features works with code samples.
jsfiddle http://jsfiddle.net/ is an online javascript/HTML/CSS editor. It's a great way to test ideas before putting them in code. It's also a great way to share code samples with others.
jsPerf http://jsperf.com/ is an online code speed checker. If you're not sure of the best way to do something in javascript, you can run samples here. The results are also shareable.
You don't "upgrade" to HTML5 and CSS3. HTML5 is HTML, period. Since it takes years and years for such standards to become finalized, you transition to using the new elements and properties. It's never a wholesale change where one day you are using all new tools with little regard for the older ones.
Libraries and templates are helpers but aren't necessities. Pickup elements and properties as you need them. Do not start using the new stuff just because it's there.
Paul Irish and friends just launched Move The Web Forward:
You love web standards. You want to give back to the community. Curious about where to start? We're here to help.
...
Learn
One of the most beautiful things about the web is that it's constantly changing. While these changes and improvements can be overwhelming, we're here to help you get caught up! Here are some great resources to walk you through how browsers work, and help keep you up to date on their improvements.
...
More of my clients lately are asking me about HTML 5 and I'm trying to get a sense of what to tell them. How long until all the major browsers have standard support for it? How long until I leave HTML 4 behind and only code new projects in HTML 5? What are you telling your clients?
Are they asking about specific HTML5 features or HTML5 in general? At my company we haven't said anything to the clients, but we do set the HTML5 doctype as well as using some HTML5 markup - but only markup that works in non-HTML5 compliant browsers. HTML5 doesn't necessary mean you discard older browsers, it depends on which features you implement. You can still use audio and video tags, as long as you keep a flash fallback - as an example. HTML5 form tags are poorly implemented even in bleeding edge browsers, so using them are not an option.
I suggest you read Dive Into HTML5 to see how you can work with HTML5 today, but still support non-HTML5 browsers.
I'll throw in another link; Modernizr is a JavaScript library that come in handy if you want use bleeding edge HTML5 or CSS3 features, it detects support for HTML5 tags and some (all?) CSS3 properties.
You've already gotten some good answers, but I'll chime in as well. I wouldn't give your client a blanket "yes" or "no" on html5. I'd take a look at what all has changed and then break it down into sections based on how well it's supported.
The Doctype:
Nothing is stopping you from switching to the html5 DOCTYPE today. Even browsers that don't understand html5's new tags (most notably IE 6-8) will recognize <!DOCTYPE html> as a valid doctype and not switch into quirks mode. After declaring that your document is an html5 document, you're free to use (or not use) html5's new tags to your heart's content. Personally, I've started using the html5 doctype on websites -- even if I have no immediate plans to use html5's new features -- because there isn't any negative side effect, and as a bonus I don't have to try to remember the correct way to write a doctype and charset everytime I start a new page (which I have to do with html4/xhtml).
New (Layout) Tags:
Next, you have to figure out why your client is interested in using html5 in the first place. My guess is that they're interested because it sounds trendy and cutting edge. In reality, one of the biggest benefits of many new tags (such as <section>, <nav>, <footer>, <aside>, etc) is that they make your code much more readable than it would be if the page was filled with <div>s everywhere. This is a great advantage for the coder (and in the future it might help with accessibility), but right now, this change probably makes very little difference to the client.
New Features (Video and Audio):
Alternative, the client might have specific html5 features that they want their site to use. Two of the most popular are the <video> and <audio> tags. The great thing about these is that you can easily fallback to Flash, so you don't have anything to lose (as far as browser support goes) by using them.
Complex Features:
Other popular new features are <canvas>, geolocation, and local storage (not exactly html5, but related). For these, the fallbacks (if they exist) require a lot more work on your part. If your client really wants these features, you'll need to figure out which browsers they (or their customers and site visitors) are using, and what percent of their target audience they're willing to leave behind.
Conclusion
That got a little long-winded; long story short, I'd tell your client this:
"I'll gladly start using some html5 features immediately. Remember, though, that the specification is not finalized, and it will continue to change over the next 10 years. Around 50-60% of our clients may be using browsers that don't support some of html5's new features, so we'll need to do thorough analysis before adding certain complex features of html5."
If the clients are OK with using the browsers that support HTML 5 for their applications, then why not :)
If they don't want to use the browsers (and versions) that doesn't support HTML 5, then they can't have it, thats what I would say.
Edit:
OK let me put it this way. If they are asking for a suggestion, then ask them what browsers and versions are they comfortable with, if they fall into the area where HTML 5 is supported, then tell them that they can move to HTML 5, adding that its in a nascent state, but support is growing at a good pace.
How long until all the major browsers have standard support for it?
Never. If you look at HTML5 as a whole (which you shouldn't), no broser will ever support it. For each browser, there will always be dozens of features defined in HTML5 which the given browser does not implement.
How long until I leave HTML 4 behind and only code new projects in HTML 5?
The language hasn't changed. It's still HTML. So, you cannot say "I code in HTML 4" or "I code in HTML5". You code in HTML.
HTML5 introduces new features. For each feature, you decide independently if you want to use it in your projects. There is stuff defined in HTML5 that you can use today. On the other side, there is stuff defined in HMTL5 that currently isn't implemented in any browser. The point is, it depends on the given feature.
Another key question is: What browser(s) do the majority of your clients use? Since medium to large size companies tend to be very resistant to changing browsers, what they use now is what they're likely to use for the forseeable future.
For clients using mostly Firefox, the answer is that Firefox supports a good deal of HTML5 now (version 3.6), & even more in version 4 (2011). For clients using mostly IE, they'll have to wait until version 9 (2011).
I'm beginning a very large project in the coming weeks and am trying to decide if I should take the leap into HTML5 land or stick with my time trusted XHTML 1 strict.
The site will be huge. Thousands of pages, video, custom CMS system, lots of social media integration, etc. I'm trying to justify using the new technology, but am unsure (as I've never done a huge site in 5) if everything will go according to plan on older browsers.
I can sit there and talk all day long about the new technology that html5 brings, but when you're sitting in a board room full of execs and the site doesn't work on their IE6 machines...not good.
Let me know what you guys would do. - Thanks
Choosing to use the HTML5 vocabulary is an orthogonal issue to whether to use XHTML syntax. If you want to use HTML5 elements and still work with XML production tools, you can always use XHTML5.
HTML5 is not yet finished so to some extent you will be labelling your documents with a doctype of unknown quantity, and validating it isn't as easy. But if your project is going to be using elements like <video> at any point, using an HTML5 doctype makes sense. (Though hopefully if you are using a custom CMS it should be relatively straightforward to adjust the doctype it spits out in the future anyway?)
None of this is relevant to IE6 compatibility as such. IE6-8 will render the page the same with any of the Standards Mode doctypes, and won't ever render <video> regardless of whether you're using an HTML5 doctype. You will certainly need fallback for any HTML5 extensions you use, such as Flash for <video>. The extended HTML5 semantic elements like <section> or <article>, you don't really get anything for using anyway; avoid them for now.
While HTML5 is not fully complete, much of it can be used today. It was designed with compatibility in mind, so a number of the new elements will work in older browsers, even if they don't specifically support HTML5.
You can start using the new doctype - any browser will recognize it as valid. From there, you can do your layouts using the new semantic structural elements - section, aside, header, footer, etc. You'll need to style these a bit to get them appearing correctly, and there is a shiv script for IE compatibility. It takes a little work, but they provide much more semantic value than the generic div.
audio and video elements have fallback capabilities for older browsers, so by all means use them.
Various new form elements and attributes are not widely supported yet, so you probably won't get much value from them right now. Though I quite look forward to using them, as they will reduce need for client-side scripting a fair bit.
IE6 is the obvious element in the room, but with the right setup, and use of fallbacks in HTML5, there should be no serious issues from using HTML5. CSS is another matter, of course. But IE9 is looking rather good, and will help to raise the bar for standards support.
HTML5 is a better choice here. It offers improvements as well as compatibility; and will render in all browsers. Modern features such as <video> can be sniffed for and replaced by FLV players or other alternative in non-compatible browsers.
XHTML has been redundant since its creation, and XHTML 1.0 (when sent with the correct mime type) doesn't work at all in IE6. Using HTML5, it will both render and be functional, assuming you handle the lack of support of modern features properly.
Is it safe now to develop web application with HTML 5 specifications? or should we wait longer for final standards?
I want to start developing a new project. I want it to be up to date in every aspects. should I wait more for html 5 or I can start programming based on it?
It all depends on your audience.
If most of your audience is going to be fairly hip web developers that know to use a decent browser, you are probably going to be fine using HTML5.
However, if your audience is any government institution (school, etc), business place, etc, you might not want to use it yet. My school currently runs on Internet Explorer 6/7, and one of my teacher constantly complains about that "Your browser is not supported" message at the top of Youtube. These people probably don't have any control over the browser they use, and might be a bit behind due to the IT guys.
Find your audience, and use what you are comfortable using with them.
It depends what you which features you want to implement. HTML 5 is a very broad standard covering video, dynamic bitmaps, geolocation, more semantic tags etc.
No browser has implemented all HTML5 features, all have implemented some
This will tell you most of what you need to know about and which browsers support it.
http://diveintohtml5.ep.io/
Which part were you particularly interested in? Many people want to use canvas which is the dynamic graphics tag (simulates svg in an element). Canvas works on all major browsers except IE, though support for canvas is predicted in IE9
It depends on your audience. If they have the latest browsers then you can start using parts of HTML 5. If you don't have a good understanding of your user base then you might want to use web analytics to understand the capabilities of their browsers. Developers tend to have newer browsers but corporations or schools may not. You should also do some research on HTML 5 and understand if you can get up to speed with it quickly if deployment time is a concern.
Use progressive enhancement. A lot of the HTML5 features (application cache, the custom form fields, the extra semantic tags) will do no harm in unsupported browsers (though you might need the HTML5 shiv from Remy Sharp), but give a bonus to users and spiders who can use them. Other features (video tag, database storage, web workers, geolocation) can use workarounds for compatibility with older browsers - the Modernizer library linked by Mark Pilgrim makes this very easy. If your app is usese Geodata, for example, you could use the browser-based geolocation where available and fallback to something IP-based.