I created this question as community wiki in the hope that it and its answers will be edited as the situation with HTML5 changes.
Time to use HTML5?
This question gets trotted out about once a year, so I might be beating a dead horse, but is it finally time (in the summer of 2010) to use HTML5 when developing a brand new web site?
Related HTML5 Questions on Stack Overflow
Is it time to start developing with HTML5? ('09 edition)
Is it time to start using HTML5? ('08 edition)
Any reason not to start using the HTML 5 doctype?
Is there any pros to use HTML 5 doctype <!DOCTYPE html> even if i’m not using any new HTML 5 tag?
Is valid HTML5 OK to use now
Is it too early to use HTML5
Edit as a follow on
Is it a mixed bag: i.e. use these tags safely but stay away from x, y, z?
We are far far away, see:
When can i use...
But you can dive into it by following:
Progressive enhancement
Graceful Degradation
for the moment :)
I think you'd probably get better feedback if you clarified what you mean by 'use html5'. That covers a lot of different functionality, some of it not even finalized. Are you planning on using it all... or just certain pieces (like the tag?) Whether its a good idea to use it now is going to depend on what pieces of HTML5 you are talking about.
It depends what you mean by HTML 5. You can use the doctype now, and many of the features are backward-compatible, so you can use them now and they will fallback gracefully. Other tags just won't work, and so you have to be more judicious.
Not until 2022 (if they stay on schedule).
http://en.wikipedia.org/wiki/HTML5#cite_note-techrepublicref-8
Regarding the "When can I use" link posted by Sarfraz - wow, that's an awful lot of extra work, waste of time, and consideration that could all be avoided if you just drop HTML5 and use Silverlight, Flex, or JavaFX. Any virtual machine based solution is going to beat fighting an endless battle with browser wars.
Is your site ready to abandon half the internet?
Yes, it's time! By two reasons:
It already works
It speeds up development of HTML5 compatibility
Use it with caution though! Using the simplified doctype and the new semantic markup tags will not hurt, but just do good. Using canvas and the media tags with no fallback might be a couple of years too early.
I wish! Wouldn't that be great! I guess if you have a site that has a high enough demand that people will upgrade their browsers then go for it. It seems like people are more attached to their old browsers than super glue is to fingers.
According to readwriteweb, as of May 2010, 46% of users use browsers with html5 support. So, maybe we are over 50% now. But it really comes down to your audience - if you are targetting the general population, I would say it's a definitely too early. But if you are targetting a more tech-savvy audience, maybe not. Of course, degrade as gracefully as possible.
Link: http://www.readwriteweb.com/archives/46_of_internet_users_ready_for_html5.php
EDIT: Yes, the study mentioned in the readwriteweb reference was done by Chitika, and was based on HTML 5 video support. Chrome, Safari 3 and up, and Firefox 3.5 and up were consider "HTML 5".
Related
I've got plenty of experience in HTML, CSS, JavaScript, Jquery, etc. but I've yet to make the plunge into HTML5.
In trying to get my head around HTML5, I've become a bit confused. So it's a relatively new standard and my uninformed brain tells me it's not well supported. Is this true?
I've got a vague idea that there are some 3rd party scripts that improve HTML5 compatibility, again am I right?
Any good tutorials on getting to grips with the basics of HTML5 for an experienced developer?
Ok a lot of questions there but:
HTML5 is quite well supported on most modern browsers nowadays and it's generally safe enought to use as is.
Scripts to improve compatibility? you mean Javascript that detects how old your browser is and depending on the answer show you HTML 4.01 or 5? well maybe but again, it's at the point when it is not required anymore.
Yes: w3schools has a cool one.
All of that said bare in mind that HTML 5 is still in development and not a done deal. Some areas are still being implemented but at the speed things are take this is not an issue for starting to develop your pages in HTML 5.
This website - html5 doctor is a very usefull resource that you can browse looking for what's implemented where and how things are generally going.
I also found this link to be particularly useful when figuring out what's available for each browser and what's not.
Another subject that goes well with HTML5 is CSS3. Check them both out and maybe come back with specific questions ;)
the HTML5 buzzword is being used a lot, but people mostly use it to describe different things.
HTML5 is the newest (and as of yet, unfinished) iteration of the HTML standard, as presented by W3.org.
Purely, HTML5 is the markup language, but it is usually referred to as to include CSS3, and JS (in the form of the canvas element).
In the HTML area, HTML5 boasts some new element tags that should help developers add semantic meaning to their markups(e.g. header, footer, aside) , and also some useful functional elements (progress-bar, video, audio)
In the CSS area, there are some new properties that allow you to animate your elements, and orient them more easily.
In the JS area, you can read up on the Canvas element, which is a good competitor to Flash. It allows you to draw both using vectors, and bitmap data.
As for good references to HTML5, you can use http://html5doctor.com/ or http://www.html5rocks.com/en/
Hope this helps.
Please note that w3schools isn't such a good reference anymore. Although for just looking at the possibilities it's fine I guess.
I recommend the tutorial from Lynda, but there are other sites. Just search at google. It's also possible to buy a book, since there have been written a few already.
Fallback/polyfill Scripts & libraries like Modernizr,Javascript Libraries can help you take care of older browsers. (backwards compatible)
As for the browsers. Use chrome, it supports most of the functions. Look at sites like findmebyip for more information about what is supported.
HTML 5 support is not yet fully integrated in all browsers. They are still in development stage. For studying the HTML 5 the best medium would be w3schools
They have introduced new elements in HTML5 which has reduced our overhead for html. New Elements
CodePlayer
Videos for HTML 5
I have a client who wants a none flash website very similar to the following template:
http://www.templatemonster.com/flash-templates/34056.html
I am always willing to learn, but I want to know first of all if this would be possible to create in HTML5. I realize this would only work on latest versions of IE, Firefox or Chrome.
Thanks guys!
Creating such a website with all the flashy effects and transitions can be a real pain for beginners. In this case you would have to deal with either CSS3 transitions or javascript (jquery) and do a lot of extra work, just to get that special effect.
To get you started with HTML5, have a look at Dive into HTML5
If you want a good backwards compatibility for html5 features, have a look at: http://afarkas.github.com/webshim/demos/ or http://html5boilerplate.com/
Yes it is possible. Everything on that page can be done with HTML5/CSS3/Javascript. Though some of it more easily than other parts.
Yes, html5, javascript, jquery, css3 are your best friends. Check http://processingjs.org/ for a very powerful canvas lib. They've just released their 1.3.0 version.
/Richard
I've seen entire games developed with <canvas> element. I think this is doable, albeit a fair amount of work. But do promise to leave the annoying guitar riffs out... :)
Some combination of:
http://flowplayer.org/tools/demos/overlay/multiple.html (click "open all")
and the shaking effect from:
http://jqueryui.com/demos/effect/
Would be pretty similar. If you're going to be learning HTML5 from scratch, make use of JQuery - a lot of people that have been doing this a lot longer have already tackled a lot of the common requests.
there is a flash-like tool from HTML5 called Hype .... check this video
I am aware of the great, wide new spectre of possibilities, but I have
almost no clue about Html5.
As one of the (from many) way to exponentially send back IE6 to the Big-Bang era - is to massively accept new technologies and methods... Well let's go with HTML5. How to embrace it in the meaning of compatibility without spending 70%+ time we usually spent looking at a Microsoft product.
Let's say we decide to start our new project in HTML5, what are the best practicies, problematics, links, infos... all related with older browsers compatib..
Do we have to create html5 docs apart or are they handable and how by oldyes.
Any good link or suggestion or explanation?
It looks like you are looking for a massive amount of information here...
What I would suggest is to visit a site such as net.tutsplus.com and do a search for html5. I would also get acquainted with the html5 shiv and other techniques to provide cross-browser compatibility.
I started with html5boilerplate - it's a great way to begin
If you can afford a book, I'd recommend hard boiled webdesign by Andy Clarke
good luck
The rules for using features added in HTML 5 are the same as those we have been following for the past decade. Use progressive enhancement as normal.
I was thinking about 'power' of HTML5. It can do new and fancy stuff, but older PCs will lag when attempting to render HTML5 heavy web pages! (Like this one).
Is it worth to write pages in HTML5 and step into Web 2.0? Or should I stay with HTML 4, which most PCs can handle? Should I go with "Design & Power" (HTML5) or "Speed" (HTML4)?
The difference between HTML 4 and HTML 5 is not binary.
If you use HTML 5 you don't have to use all of HTML 5, and you don't have to do things that require lots of CPU.
That page doesn't lag because it's written in HTML5. It's lagging because it has a lot of JS and CSS3 usage.
You can still use HTML5 markup to create light web pages.
HTML5 does not mean heavy pages, it depends on how you use it, the mozilla demos are made to impress on the reaches of html5 but it doesnt mean every page will be that heavy.
What comes with html5 is a set of new features for easier and more powerful web development it is up to you how to and when to use it.
This is a myth: “My Browser Supports HTML5, but Yours Doesn’t”
It's the same issue as with IE vs. all other browsers. People will just have to upgrade in order to use the Web as it should be used in 2011 and not as twenty years ago. It's just the nature of development.
HTML5 itself does not take more time to render. Some web2.0 features might use more processing power. You need to gauge the hardware of your target audience. For example, in africa, most people use mobile phones as their primary exposure to the internet.
If you want to be really thorough - you can make a simple alternative to a sophisticated site, and cover all bases.
I write most of my webpages in HTML5,
It depends if the website you are designing is going to be updated alot, or just a 2-3 page website which is a one off design. If it a one off design I would do HTML5 so the webpage will be standard in 10-15 years time.
If however you feel more comfortable and wouldn't mind updating your website at a later date do (X)HTML4 or however you code.
Personally, I think it is personal choice but from where I am standing I would use it. In all my designs the load times haven't distracted anyone from not coming to the site, and in the long run it will save you time.
You can also use HTML5 google shiv, for IE support, hope this helps you and good luck!
Due to the low level of support for HTML5 in older browsers should one (or could one) use any part of HTML5 at this point in time for a new website that will have varying users with the full spectrum of browsers (and versions) to access the site?
EDIT: To fill in some more info here. The website in question, for simplistic comparison, would resemble fb. I am not talking a social website just one that will reach that type of vast audience (anyone can join) and will be an interactive portal (not just a site full static content being displayed).
First, HTML5 is a standard that includes the previous standards. Therefore, you are already doing HTML5 without knowing it.
Second, HTML5 could be compared to CSS in terms of feature grouping (CSS = CSS1 + CSS2 + CSS3 and so on). In other words, it is a collection of individual features and not one big thing.
Third, you will have to implement new HTML5 features one day or another. Why wait? Ooh right some people do not care about "modern browsers". You have a responsibility as a Web developer/designer to inform people about the consequences of obsolete browsers.
Last but not least, there is tons of information already... Like this website: http://diveintohtml5.ep.io/.
Some complementary info can be found from this answer and this other answer I wrote for other questions about HTML5.
Have fun! :)
Thank god MS is finally campaigning to get gid of IE6 but it surely will be in China for years to come due to pirated windows software which I had altogether too much experience with; despite this push for higher standards tons still use IE7, 8, and some even 9 is not perfect. Chrome IMOP is exceptional followed by Safari and FF for HTML5 support but even these browsers are not perfect.
I think it is ok to use features css3 and HTML5 such as canvas but in an unobtrusive manner like javascript enhances UI HTML5/CSS3/jQuery should enhance not be the content.
With javascript we can check for browsers and use appropriate methods this concept should also be applied to HTML5. So if you do implement anything I think it's important to understand how to detect and this is probably the best resource to start with.
http://diveintohtml5.ep.io/detect.html
You can use all of the new HTML Field types in forms safely, any HTML 5 inputs in browsers which don't support html 5 will simply fall-back to a standard type="text" inputs.
Mobiles currently seem to benefit from HTML 5 forms most at the moment as they recognise the input type, lets say "email" and then provide an email specific keyboard layout to the user.
Its also simple to provide JavaScript fall backs for some html 5 elements with http://www.modernizr.com/