Shouldn’t this article be using the standard name of “HTML5,” with no space? I think that needs to be an important part of articles like this that introduce HTML5 to new people.
Shouldn’t this article be using the standard name of “HTML5,” with no space? I think that needs to be an important part of articles like this that introduce HTML5 to new people.
Until last night, official documents at WHATWG and the W3C referred to the specification as both “HTML 5” (per normal W3C styling; see “HTML 4”) and “HTML5” (the original WHATWG styling). There was no standardization of the name.
Following the publication of the “HTML5 Super Friends”:http://www.zeldman.com/superfriends/ documents and related blog posts yesterday, Hixie fixed the inconsistency in the WHATWG version of the specification, so that at least one of the two working groups now has a consistent standard name: HTML5, with no space.
But “HTML 5” is still the correct name on the W3C’s version of the same specification (and the W3C refers to it as both “HTML 5” and “HTML5” with some randomness in that document).
One thing that I don’t believe that this article fully explained that I see as a common misconception is that many people believe that if you use HTML5 instead of XHTML5 your elements must not have the closing slash on self-closing elements. This is absolutely not the case. You may self-close elements.
I’ve seen people torn on this because they like having the self-closing elements, but do not/can not serve a page using the application/xhtml+xml MIME type.
That said, I have absolutely no idea how to write a META tag that is both HTML4/XHTML1 and HTML5 compatible for Content-Type/charset that serves the same purpose. Am I mistaken in that HTML5 requires the use of the http-equiv format and HTML4 can use either http-equiv or name?
You mention in you article that HTML 5 has support for numerous other XML-based markup languages (such as SVG, XPath, XSLT, etc.) but that HTML 5 can be written according to the HTML “rulebook” or the XML “rulebook”. Surely it would be best to stick to the XML rules if you intend on embedding SVG graphics for example?
(Unless it’s possible to embed SVG in a document that only complies with the HTML rules…)
Copy & paste the code below to embed this comment.
J. David Eisenberg
(Unless it’s possible to embed SVG in a document that only complies with the HTML rules”¦)
Quick experimentation shows that Mozilla 3.5 doesn’t display the SVG unless the file ends in .xhtml (when loaded locally) or served as xhtml+xml from the server. In either case, the document has to follow XML syntax. Also, if I don’t add the xmlns=“http://www.w3.org/1999/xhtml” attribute to the <html> element, paragraphs show up as inline rather than block elements. YMMV with Opera or Safari.
As somebody said before HTML5 is really about web applications with all of its extensions to AJAX requests, new web forms, dedicated tags, offline storage, etc.
But it’s really nothing wrong with this as HTML4 wasn’t created to describe web applications but static web pages, so something new like HTML5 is definitely needed. One will be able to create the same static or semi-static pages with HTML5 as with HTML4 so really nothing will change there. Plus browsers will still support HTML4 in the coming 20 years so there’s really nothing to worry about.
From my perspective I found HTML5 features really interesting as WebKit, Gecko and Presto rendering engines already catched up with the drafts but there’s a serious problem with lack of HTML5 features in IE8 and a serious need for yet another set of hacks.
Recently I rewrote “my website”:http://edge.jakubpawlowicz.com/ with a couple of HTML5 technologies inside and so far I’m very happy with the overall effect.
Copy & paste the code below to embed this comment.
LPent
@Jakub: That somebody was me. And let me clarify a bit more. HTML is (the name says it all) a MarkUp Language. As such, HTML401 was lacking in some respect in doing a good job of that, but all in all it at least tried to keep itself HTML.
HTML5 is heralded as the new HTML. I say no. Because when you look purely at the Markup side of this new spec, you will see that HTML5 gives us very little more and very little improvement over HTML4.
On the other hand, it does give us a lot of things that are not Markup. One may argue that these non-markup things are an improvement; at the very least they are fun. But what are they? Not markup. In fact, they are more like scripts built into the browser.
So HTML5 is only partly HTML, and that part is seriously lacking in good improvements as far as I can tell. HTML5 should have been called HTML4.5 and the non markup stuff should have been called DOM4 and WebApp1 resp.
When I want a meter on my site or graphic abilities, I’ll use existing technologies like JavaScript, Ruby or if worse come to worse even Flash. And when I want accurate date formatting or logical separation of my content I’ll use PHP and MySQL.
Look, I don’t want to rant or put the whole thing down. It’s fine. I just think that all these people who were working on this spec have done a great job, that has cost a lot of effort, energy, money and creativity that could have been used more productively in my personal opinion.
Html 5 is fun, great and I guess ‘wow’, but also very superfluous for us daily web workers. We are all but prisoners of IE and outdated CMS systems for many years to come. We only gaze in wonder to all this beautiful novelty from outside and hope in our dreams that once we will all be able to escape from IE-Alcatraz. Oh, beautiful, senseless progress. Thank you for the addictive sense of probably nothing more than false hope. But hope must be. So write on guru people! Infuse us with your dangerous naive believes in better times and smooth techniques. For the walls of our prison are digital and our terabyte memory is packed with thousands of paradise promising examples of supercode. Hell yes, we are always ready for a new dose! We are all addicts. More, more!
This article seems to insinuate that Canvas is a “replacement” for SVG. It is not. I wrote about the http://nimbupani.com/blog/bit-of-svg-and-canvas.html
This article also does not mention the lack of accessibility of the Canvas element. http://is.gd/373vb
You would have thought that editing and maintaining a webpage would have become, much, much easier with the 5th incarnation of HTML.
Well, look at the examples in this article, if that doesn’t put you off to ever venture into the websphere I don’t know what would! IT has become less and less human over time, and IT professionals should be ashamed of the mess they put us up with. SVG or canvas, really, COME ON! It should be as easy as drawing a circle in OmniGraphle.
So far, HTML5 leaves me very cold, except for better form handling and validation (thank you!) and easier embedding of multimedia content, but the missed opportunities outnumber the nerdy innovations and that’s a shame.
Copy & paste the code below to embed this comment.
bobin1983
This is a good article. It’s been very interesting to see the response to the HTML5 proposal. It has really split web developers/designers. Some are excited and desperately want to start implementing this technology, others are very hesitant and critical.
The fact is, the days of static web pages are numbered. A vast number of web developers/designers have been happily churning out static HTML web sites that are easy to produce. The push towards HTML5 means that clients are increasingly aware of new, more interactive technologies and so it means the developers/designers need to step up to the mark.
Web apps are increasingly becoming the standard across the web, and the consumer browser experience is changing. No longer do companies simply have a static business card website, but they have an immersive site where social media can connect and the user has control over the format, style and even choice of information received.
The answer to ‘making a website’ has changed dramatically over the past 10 years and HTML5 is a great step forward to the web app environment that is so desperately needed. This will, however, mean that the web community will need to learn HTML5 and step up their game.
WOW HTML5, cool, exciting snore.
By 2022 IE7 may have just about been laid to rest, if were lucky IE6 will be gone (or I’ll have made it a personal mission to hunt IE6 users with a machine gun). If were lucky IE 9/10 will be CSS3 compatible and will be able to parse XHTML 1.0 + XHTML5 (+html5).
Of course we can all laden our pages with large JavaScript libraries that will sit there and re-parse our html5 into html at the expense of memory and processing, rendering time, the additional strain placed on the JavaScript engine and of course the inevitable reduction in browser speed as the JS engines fail to handle >80% of the garbage collection… we could do that, or we could carry on building web pages with xhtml and javascript for progressive enhancement.
I’m all for development but the HTML5 buzz is just bloody ridiculously over promoting its existence before a decent specs even been pushed out. People rushing to build their sites in HTML5 just because Zeldman thinks its fantastic (note his page is xhtml & transitional at that, and wordpress too).
Play with it, test it, and see what’s happening with it but remember that even when the spec is out and its up and running in 2022, it will be up to a decade after before the specs used properly, and that’s assuming people bother to use it!.
I’m glad that a lot of web standards are being incorporated into CSS (it certainly cuts down on a lot of graphic work needed to achieve the same functionality), but at times I find it useless when most people are still using Internet Explorer, and IE is so behind in the times as well as having random compatibility issues.
I’d love the day when I don’t have to code fixes for Internet Explorer, but when I look at my browser statistics, I’m not sure when that will be.
Definitely looking forward to XHTML 5. I know that there are ways to do things in other languages that HTML5 now gives us the capability to do, but the point is that HTML5 will make it easier for us. Embedding SVG alone will make me a happy camper. Style and markup will still be separate despite what others say. More importantly the form validation should definitely be a part of the attributes in the input tag, not in another script. The submit scripts should only be used in handling, delivering, and or manipulating the data. Not to mention this will save me quite a bit of time with ifs, empty()‘s, &&, XOR, ><, ||, etc.. etc.. Thanks for the inspiring article. Can’t wait to start playing with it.
What I’d like to see is some things that were put forward in XHTML 2.0.
The href attribute turning any element into a link and src tuning any element into an image. Lovely navigation list with only two (<li>, </li>) tags and three attributes (id, src, and href) per link instead of five tags (<li>, <a>, <img>, </a> </li>) and four attributes (id, src, alt, and href), here I come.
The <h> element. Yes, I’d love to see just a generic header element when I want a header for something that does NOT fit into a normal outline.
I have my doubts about html5, its being pushed as a flash killer and it doesnt enable you do everything flash does even though it solves a good percentage of it, there is still going to have to be solutions there. If its used with Javascript constantly your going to have tons of code and conflicts. Not only that but it will be many years before the spec is even complete and in use and adopted by all browsers meaning it will be useless until it is. They do some things right but it has a LONGGG way to go and while it may solve some problems, it sounds like it will create new ones.
I have gone trough both HTML 3 and table design and its really time to start some new standards to serve website visitors a much more interesting interactive experience. I have also tried HTML5 and its not as difficult as i thought, new components due to an easier way to use it and faster development situation.
Media implementation should be very good so it will be competitive to the SEO useless Flash technology.
I am looking forward to be more technical complicated in order to serve nicer and better experiences…
While it’s true that HTML5 in the desktop/laptop realm is not an implementation option at present, in the mobile space it is ready for prime time. AFAIK, >90% of the smart phone browsers understand HTML5 and this is a significant and fast growing segment of users. Many IT departments are beginning to realize that a mobile-optimized website is something that they need and are reaching out to developers for this service, and the solution is going to incorporate HTML5. Yes, corporate IT departments who don’t want to upgrade their desktop browsers from IE6 are not going away anytime soon (although IE9 promises as robust an HTML5 experience as the best of them), but those same folks who use Blackberries WILL be able to see HTML5 mobile-optimized sites, not to mention the millions of iPhone, Android, Palm and iPad users out there. So maybe the importance of the mobile web will accelerate these critical changes in the more traditional browser realm? Here’s to hoping!
37 Reader Comments
Back to the Articleweb page designer
I can’t seem to get enough of HTML5. Great article, especially the demos of canvas & javascript elements. Thanks!
Brad-Bice
Shouldn’t this article be using the standard name of “HTML5,” with no space? I think that needs to be an important part of articles like this that introduce HTML5 to new people.
wjoell
Thanks for a great article—it was an education. One little nit:
([0-9]{5}(-[0-9]{4}))?|([A-Z][0-9][A-Z]\s+[0-9][A-Z][0-9])
should be changed to:
([0-9]{5}(-[0-9]{4})?)|([A-Z][0-9][A-Z]\s+[0-9][A-Z][0-9])
the first time the regex appears in the arcticle. Your code example has it right.
Aaron Payne
I see a lot of potential in the svg vectoring. I think that we will see come really cool designs implementing this without eating up much bandwidth!
Jeffrey Zeldman
Until last night, official documents at WHATWG and the W3C referred to the specification as both “HTML 5” (per normal W3C styling; see “HTML 4”) and “HTML5” (the original WHATWG styling). There was no standardization of the name.
Following the publication of the “HTML5 Super Friends”:http://www.zeldman.com/superfriends/ documents and related blog posts yesterday, Hixie fixed the inconsistency in the WHATWG version of the specification, so that at least one of the two working groups now has a consistent standard name: HTML5, with no space.
But “HTML 5” is still the correct name on the W3C’s version of the same specification (and the W3C refers to it as both “HTML 5” and “HTML5” with some randomness in that document).
Jeffrey Zeldman
This has been fixed. Thanks!
blepore
One thing that I don’t believe that this article fully explained that I see as a common misconception is that many people believe that if you use HTML5 instead of XHTML5 your elements must not have the closing slash on self-closing elements. This is absolutely not the case. You may self-close elements.
I’ve seen people torn on this because they like having the self-closing elements, but do not/can not serve a page using the application/xhtml+xml MIME type.
That said, I have absolutely no idea how to write a META tag that is both HTML4/XHTML1 and HTML5 compatible for Content-Type/charset that serves the same purpose. Am I mistaken in that HTML5 requires the use of the http-equiv format and HTML4 can use either http-equiv or name?
Dominic Neagle
You mention in you article that HTML 5 has support for numerous other XML-based markup languages (such as SVG, XPath, XSLT, etc.) but that HTML 5 can be written according to the HTML “rulebook” or the XML “rulebook”. Surely it would be best to stick to the XML rules if you intend on embedding SVG graphics for example?
(Unless it’s possible to embed SVG in a document that only complies with the HTML rules…)
Karlosb
Thanks for a great introduction to HTML 5. I have several projects coming up in the next few months and I may experiment using it in one these.
Nice article :-)
J. David Eisenberg
Quick experimentation shows that Mozilla 3.5 doesn’t display the SVG unless the file ends in .xhtml (when loaded locally) or served as xhtml+xml from the server. In either case, the document has to follow XML syntax. Also, if I don’t add the xmlns=“http://www.w3.org/1999/xhtml” attribute to the <html> element, paragraphs show up as inline rather than block elements. YMMV with Opera or Safari.
Jakub Pawlowicz
As somebody said before HTML5 is really about web applications with all of its extensions to AJAX requests, new web forms, dedicated tags, offline storage, etc.
But it’s really nothing wrong with this as HTML4 wasn’t created to describe web applications but static web pages, so something new like HTML5 is definitely needed. One will be able to create the same static or semi-static pages with HTML5 as with HTML4 so really nothing will change there. Plus browsers will still support HTML4 in the coming 20 years so there’s really nothing to worry about.
From my perspective I found HTML5 features really interesting as WebKit, Gecko and Presto rendering engines already catched up with the drafts but there’s a serious problem with lack of HTML5 features in IE8 and a serious need for yet another set of hacks.
Recently I rewrote “my website”:http://edge.jakubpawlowicz.com/ with a couple of HTML5 technologies inside and so far I’m very happy with the overall effect.
LPent
@Jakub: That somebody was me. And let me clarify a bit more. HTML is (the name says it all) a MarkUp Language. As such, HTML401 was lacking in some respect in doing a good job of that, but all in all it at least tried to keep itself HTML.
HTML5 is heralded as the new HTML. I say no. Because when you look purely at the Markup side of this new spec, you will see that HTML5 gives us very little more and very little improvement over HTML4.
On the other hand, it does give us a lot of things that are not Markup. One may argue that these non-markup things are an improvement; at the very least they are fun. But what are they? Not markup. In fact, they are more like scripts built into the browser.
So HTML5 is only partly HTML, and that part is seriously lacking in good improvements as far as I can tell. HTML5 should have been called HTML4.5 and the non markup stuff should have been called DOM4 and WebApp1 resp.
When I want a meter on my site or graphic abilities, I’ll use existing technologies like JavaScript, Ruby or
if worse come to worseeven Flash. And when I want accurate date formatting or logical separation of my content I’ll use PHP and MySQL.Look, I don’t want to rant or put the whole thing down. It’s fine. I just think that all these people who were working on this spec have done a great job, that has cost a lot of effort, energy, money and creativity that could have been used more productively in my personal opinion.
Hans Verhaegen
Html 5 is fun, great and I guess ‘wow’, but also very superfluous for us daily web workers. We are all but prisoners of IE and outdated CMS systems for many years to come. We only gaze in wonder to all this beautiful novelty from outside and hope in our dreams that once we will all be able to escape from IE-Alcatraz. Oh, beautiful, senseless progress. Thank you for the addictive sense of probably nothing more than false hope. But hope must be. So write on guru people! Infuse us with your dangerous naive believes in better times and smooth techniques. For the walls of our prison are digital and our terabyte memory is packed with thousands of paradise promising examples of supercode. Hell yes, we are always ready for a new dose! We are all addicts. More, more!
Shaneod
Fantastic article David, thanks a million for that – i must bookmark this page and have a right good read of this when I have more time.
Divya Manian
This article seems to insinuate that Canvas is a “replacement” for SVG. It is not. I wrote about the http://nimbupani.com/blog/bit-of-svg-and-canvas.html
This article also does not mention the lack of accessibility of the Canvas element. http://is.gd/373vb
Martijn ten Napel
You would have thought that editing and maintaining a webpage would have become, much, much easier with the 5th incarnation of HTML.
Well, look at the examples in this article, if that doesn’t put you off to ever venture into the websphere I don’t know what would! IT has become less and less human over time, and IT professionals should be ashamed of the mess they put us up with. SVG or canvas, really, COME ON! It should be as easy as drawing a circle in OmniGraphle.
So far, HTML5 leaves me very cold, except for better form handling and validation (thank you!) and easier embedding of multimedia content, but the missed opportunities outnumber the nerdy innovations and that’s a shame.
bobin1983
This is a good article. It’s been very interesting to see the response to the HTML5 proposal. It has really split web developers/designers. Some are excited and desperately want to start implementing this technology, others are very hesitant and critical.
The fact is, the days of static web pages are numbered. A vast number of web developers/designers have been happily churning out static HTML web sites that are easy to produce. The push towards HTML5 means that clients are increasingly aware of new, more interactive technologies and so it means the developers/designers need to step up to the mark.
Web apps are increasingly becoming the standard across the web, and the consumer browser experience is changing. No longer do companies simply have a static business card website, but they have an immersive site where social media can connect and the user has control over the format, style and even choice of information received.
The answer to ‘making a website’ has changed dramatically over the past 10 years and HTML5 is a great step forward to the web app environment that is so desperately needed. This will, however, mean that the web community will need to learn HTML5 and step up their game.
Diane Vigil
Thanks for this. I’ve been a bit remiss in coming up to speed with HTML 5.
Thanks also for the server MIME tip; this is the kind of thing that promises to make you crazy if you didn’t know it was necessary. :)
Chris McKee
WOW HTML5, cool, exciting snore.
By 2022 IE7 may have just about been laid to rest, if were lucky IE6 will be gone (or I’ll have made it a personal mission to hunt IE6 users with a machine gun). If were lucky IE 9/10 will be CSS3 compatible and will be able to parse XHTML 1.0 + XHTML5 (+html5).
Of course we can all laden our pages with large JavaScript libraries that will sit there and re-parse our html5 into html at the expense of memory and processing, rendering time, the additional strain placed on the JavaScript engine and of course the inevitable reduction in browser speed as the JS engines fail to handle >80% of the garbage collection… we could do that, or we could carry on building web pages with xhtml and javascript for progressive enhancement.
I’m all for development but the HTML5 buzz is just bloody ridiculously over promoting its existence before a decent specs even been pushed out. People rushing to build their sites in HTML5 just because Zeldman thinks its fantastic (note his page is xhtml & transitional at that, and wordpress too).
Play with it, test it, and see what’s happening with it but remember that even when the spec is out and its up and running in 2022, it will be up to a decade after before the specs used properly, and that’s assuming people bother to use it!.
psuhiker
I’m glad that a lot of web standards are being incorporated into CSS (it certainly cuts down on a lot of graphic work needed to achieve the same functionality), but at times I find it useless when most people are still using Internet Explorer, and IE is so behind in the times as well as having random compatibility issues.
I’d love the day when I don’t have to code fixes for Internet Explorer, but when I look at my browser statistics, I’m not sure when that will be.
comet
Definitely looking forward to XHTML 5. I know that there are ways to do things in other languages that HTML5 now gives us the capability to do, but the point is that HTML5 will make it easier for us. Embedding SVG alone will make me a happy camper. Style and markup will still be separate despite what others say. More importantly the form validation should definitely be a part of the attributes in the input tag, not in another script. The submit scripts should only be used in handling, delivering, and or manipulating the data. Not to mention this will save me quite a bit of time with ifs, empty()‘s, &&, XOR, ><, ||, etc.. etc.. Thanks for the inspiring article. Can’t wait to start playing with it.
Mr. Initial Man
What I’d like to see is some things that were put forward in XHTML 2.0.
The href attribute turning any element into a link and src tuning any element into an image. Lovely navigation list with only two (<li>, </li>) tags and three attributes (id, src, and href) per link instead of five tags (<li>, <a>, <img>, </a> </li>) and four attributes (id, src, alt, and href), here I come.
The <h> element. Yes, I’d love to see just a generic header element when I want a header for something that does NOT fit into a normal outline.
bpaul
I have my doubts about html5, its being pushed as a flash killer and it doesnt enable you do everything flash does even though it solves a good percentage of it, there is still going to have to be solutions there. If its used with Javascript constantly your going to have tons of code and conflicts. Not only that but it will be many years before the spec is even complete and in use and adopted by all browsers meaning it will be useless until it is. They do some things right but it has a LONGGG way to go and while it may solve some problems, it sounds like it will create new ones.
cleverclick
I have gone trough both HTML 3 and table design and its really time to start some new standards to serve website visitors a much more interesting interactive experience. I have also tried HTML5 and its not as difficult as i thought, new components due to an easier way to use it and faster development situation.
Media implementation should be very good so it will be competitive to the SEO useless Flash technology.
I am looking forward to be more technical complicated in order to serve nicer and better experiences…
bpaul
Clevelick Flash isnt actually useless to SEO, Google catalogues flash if its built right.
albeeboy
While it’s true that HTML5 in the desktop/laptop realm is not an implementation option at present, in the mobile space it is ready for prime time. AFAIK, >90% of the smart phone browsers understand HTML5 and this is a significant and fast growing segment of users. Many IT departments are beginning to realize that a mobile-optimized website is something that they need and are reaching out to developers for this service, and the solution is going to incorporate HTML5. Yes, corporate IT departments who don’t want to upgrade their desktop browsers from IE6 are not going away anytime soon (although IE9 promises as robust an HTML5 experience as the best of them), but those same folks who use Blackberries WILL be able to see HTML5 mobile-optimized sites, not to mention the millions of iPhone, Android, Palm and iPad users out there. So maybe the importance of the mobile web will accelerate these critical changes in the more traditional browser realm? Here’s to hoping!
dilvie
All these new features are interesting – but is there any compelling reason to upgrade an existing website to HTML5?