HTML5 is here, and the Web will never be the same.
You’ve no doubt heard that before, or something like it. I’d guess that when you did, you got excited, rolled your eyes, or mouthed the word “why?” and furrowed your brow a bit. Perhaps your reaction was a mix of all three.
I wouldn’t blame you for any of these. HTML5 is exciting, and it does have the potential to change the Web as we know it, but it also gets blown out of proportion. What’s more, its true meaning can be elusive. I’ve experienced each of those reactions myself while building applications with HTML5. It’s a broad topic, so it’s difficult to wrap your head around HTML5, much less know where to begin with this exciting new set of technologies.
This is the first article in a series for MSDN Magazine, and the goal is to give you a complete picture of why the first sentence in this article is true—and important. Over the next several months, I want to help you understand what HTML5 means to you—both as a Web developer and as a developer who uses Microsoft tools and technologies. I hope to simplify some of the complexity around HTML5 for you, and demystify much of the hype. I’ll also introduce some HTML5 features that are available today, as well as some exciting technologies that, though a bit further out, are worth paying attention to. Finally, I’ll leave you with some tips that will help you adopt HTML5 technologies now, while you continue to
provide great experiences to users with older browsers.
If you’re excited about HTML5, I want to help you turn that excitement into ideas you can put into practice immediately. If you’re skeptical, I want to help you understand just why HTML5 is important. And if you’re just confused about what HTML5 even means, fear not: that’s our first stop in this series.
You might have discovered by now that HTML5 means different things to different people. To some, it just means new tags like <header> and <footer> and a handful of new attributes available in markup. To others, it means everything that’s new and interesting on the Web, including technologies implemented in just a single browser or other specifications not officially part of HTML5. To be sure, understanding the real meaning of HTML5 is often the first roadblock many of us face.
And, honestly, there’s some justification for the number of varying definitions. HTML5 is huge! Formally defined by an international standards body known as the World Wide Web Consortium (W3C), HTML5 consists of more than 100 specifications that relate to the next generation of Web technologies. By putting all 100-plus of these specifications under the moniker HTML5, you could argue that the W3C oversimplified things. And while it’s hard to take something as broad as HTML5 and define it in an unambiguous way, I believe that the W3C was trying to address the scope of what’s changing on the Web by introducing HTML5 as a unifying concept for that change.
With a definition in hand, let’s spend a few moments talking about where Microsoft fits into the HTML5 space.
As I mentioned, the set of specifications that make up HTML5 are stewarded by the W3C. The W3C consists of staff, organizations and individuals invested in helping to drive and define the future of the Web. The WC3 is a consensus-based organization, and typically operates by forming committees (called working groups) to divide up chunks of work on related specifications. Specifications can be proposed by any member, and all specifications owned by the W3C—more specifications than those that fall under the HTML5 umbrella—move through a five-stage process from first draft to official recommendation.
Microsoft is a member of the W3C and plays a very active role in the specification process for many HTML5 standards and working groups. Just like all of the major browser vendors, Microsoft is heavily invested in HTML5 and is working with the W3C and other vendors to ensure that developers can count on HTML5 technologies being reliably implemented in an interoperable way on all major browsers.
In the context of Microsoft the browser vendor, the approach is fourfold:
“Site-Ready HTML5” is the term Microsoft uses to describe HTML5 technologies that you can use today because they have broad support across all major browsers. Technologies like the new HTML tags, Canvas, Scalable Vector Graphics, Audio and Video, Geolocation, Web Storage and many new CSS3 modules all fall into this space, and they’re implemented in Internet Explorer 9, as well as the other mainstream browsers. We’ll spend a fair amount of time in this series discussing these technologies, as well as how you can adopt them today.
Beyond what’s available at present, Microsoft is using public Platform Previews to inform developers of what’s coming in the next version of the browser, as well as to gather feedback. For Internet Explorer 9, Microsoft released Platform Previews every six to eight weeks, each time announcing new HTML5 enhancements, features and performance improvements for developers to try out and evaluate. Internet Explorer 9 was released in March and as of early July, Microsoft has released two Platform Previews for Internet Explorer 10, signaling that Microsoft is continuing a regular release cadence for Internet Explorer previews. As a developer, you’ll want to take advantage of the latest previews to learn, test and influence how the browsers evolve. You can download the latest Internet Explorer Platform Preview at IETestDrive.com.
To ensure that HTML5 works consistently across all browsers, Microsoft has invested heavily in interoperability, creating and submitting the single largest suite of test cases related to HTML5 to the W3C. For the first time, this suite of test cases will be used by the W3C as the authoritative source of HTML5 “readiness” in each browser. The end result for you and me as developers is that we can adopt and implement HTML5 technologies once, and trust that they’ll work consistently across all browsers. For more information on Microsoft’s work around interoperability, go to bit.ly/dxB12S.
While some HTML5 technologies already exist in Internet Explorer 9, and others are being announced for Internet Explorer 10 via Internet Explorer Platform Previews, some popular and newsworthy specifications need a bit more work by the W3C and the browser vendors before they’ll be ready to implement in our applications. One such example is Web Sockets, an exciting specification that lets developers open bidirectional communication channels with back-end servers, thus enabling a level of “real-time” connectivity not previously available in Web applications. As a developer, you can no doubt imagine countless uses for Web Sockets in the applications you’re building right now. But the Web Sockets specification is still changing at a rapid pace, with key aspects still in flux and being discussed within the W3C. Given that situation, it would be difficult to provide this feature consistently and reliably across all browsers today.
For unstable or evolving specifications like Web Sockets (which we’ll cover in depth in a future article), Microsoft created HTML5 Labs, a site for developers to experiment with draft implementations of these technologies. The site provides prototypes you can download and try locally, as well as hosted demos for some specs. The goal is to give you a place to try these specs out for yourself, and for you to give both Microsoft and the W3C feedback on these specs as they stabilize and near implementation in browsers. For more information on HTML5 Labs, go to html5labs.com.
Beyond Microsoft’s involvement with the W3C and the HTML5 technologies supported in the browser, there’s another dimension to Microsoft’s approach to HTML5 that’s important for developers: its approach to HTML5 tooling.
In early 2011, Microsoft updated two of its development tools with service packs: Visual Studio 2010 and Expression Web 4. The service packs for both of these tools provided an HTML5 document type for validation, as well as IntelliSense for new HTML5 tags and attributes. If you’re using Visual Studio 2010 SP1, you can enable the HTML5 Schema by clicking Tools | Options | Text Editor | HTML | Validation, and then selecting the HTML5 option in the Target drop-down list, as shown in Figure 1. You can also set HTML5 as the default schema from the HTML Source Editing Toolbar in any HTML file, as shown in Figure 2.
Figure 1 Enabling the HTML5 Schema via the Options Dialog
Figure 2 Setting the HTML5 Schema on the HTML Source Editing Toolbar
Once your default schema is set, you’ll gain IntelliSense support in Visual Studio for the 28 new semantic tags in HTML, as well as new tag-specific and global attributes, as show in Figure 3.
Figure 3 HTML5 IntelliSense in Visual Studio 2010 SP1
For Expression Web 4 SP1, setting the HTML5 schema under Tools | Page Options offers the same IntelliSense, and the tool also provides CSS3 IntelliSense for several draft CSS3 modules like border-radius, box-shadow, transform and the like.
If you’re using WebMatrix (see http://www.microsoft.com/web/webmatrix/next/), you may have noticed that all new .html, .cshtml or .vbhtml documents you create contain default markup similar to what’s shown in Figure 4. As I’ll discuss in the next article in this series, this is a basic, valid HTML5 document. Most notably, the doctype and meta charset tags have lost a lot of cruft. Using this simple doctype triggers HTML5 mode across all modern browsers, and WebMatrix makes it easier for you by providing an HTML5 document by default.
Figure 4 A Default HTML Document in WebMatrix
<meta charset="utf-8" />
The takeaway here is that even though HTML5 is just emerging in our browsers, official tool support is quickly being added, and Microsoft is even adding support for libraries (like Modernizr) from the community. You can target HTML5 with some help from Microsoft tools today, and expect that that HTML5 support will continue to grow and improve over time.
By now, you should realize that HTML5 isn’t a single entity that you can adopt or migrate to in one fell swoop. Adopting HTML5, rather than being a wholesale choice, is about making a technology-by-technology evaluation and determining which technologies are right for your application. For each HTML5 technology you evaluate, look at (at least) the following factors when deciding whether that technology is ready for you to adopt:
The first factor is the most important, and when combined with an understanding of the browsers commonly used by visitors to your site, should give you a clear picture of which subset of the 100-plus specifications is worth evaluating further. That subset should consist of a set of stable specifications you can reliably adopt today for your users.
However, even with that stable set of HTML5 technologies, you shouldn’t ignore your users who haven’t moved to a newer browser. If you’re heavily involved in the day-to-day development for your site, you no doubt have some rough idea of the percentages of users visiting your site with a given browser. For most of us, it would be easy to look at the percentage of users visiting with an older browser and come to the conclusion that adopting any HTML5 technologies would negatively impact those users. Luckily there’s “polyfilling” to save us from waiting until some foggy date in the future to adopt HTML5.
Paul Irish (a developer on the jQuery and Modernizr projects) defines a polyfill as “… a shim that mimics a future API, providing fallback functionality to older browsers.” A polyfill is like spackle for your Web sites; it’s a way to determine if a given HTML5 feature is available to the user currently browsing your site, and to provide either a shim that “fills in” that support or a course of graceful degradation that enables your site to still function fully.
When it comes to choosing which technologies to adopt, your final list may be a combination of widely supported specifications and other specifications for which you’ll have to polyfill support for certain browsers. Only you will know the exact makeup of that list based on your current needs and context.
In the coming months, I’ll discuss several notable specifications, from Geolocation and Forms and Canvas, to Web Workers, Web Sockets and IndexedDB. Some of these are widely supported and “site-ready,” and some, like Web Sockets, are too groundbreaking to ignore, regardless of where they stand today. With each specification, I’ll discuss current and known future support, some basics about how you can implement the specification’s features on your sites, and how to polyfill support for browsers that don’t support a given feature.
If you want to dig more into HTML5 today, I suggest you pick up a couple of books on the subject. In particular, I recommend “Introducing HTML5” (New Riders, 2010) by Bruce Lawson and Remy Sharp and “HTML5 Up and Running” (O’Reilly Media, 2010) by Mark Pilgrim. Also, be sure to visit W3C.org for up-to-date information on all specifications, as well as BeautyoftheWeb.com and IETestDrive.com to download Internet Explorer 9 and the Internet Explorer 10 Platform Preview, respectively, and learn more about the great HTML5 experiences Microsoft is delivering through the browser.
Above all else, start adopting HTML5 today. The Web won’t ever be the same, really, and you can be part of the catalyst by building the next great Web applications using HTML5.
Brandon Satrom works as a developer evangelist for Microsoft outside of Austin. He blogs at UserInexperience.com and can be followed on Twitter at Twitter.com/BrandonSatrom.
Thanks to the following technical experts for reviewing this article: Jon Box, Damian Edwards and Clark Sell
HTML5 and web technologies have transformed the browser into a first-class application platform. I definitely am also agree with this fact that HTML5 and CSS3 gives the flexibility to developers to play with UI at their own. http://www.mobilepundits.com/HTML5_Development.html
HTML5—so far—is a 'bastard son' i.e. impossible to explain compared to haploid-daughters: 1. iframe, canvas, should have innerHTML that does something up-front, AND in case of nonsupport it's supposed to have ALT=blahblahblah-text; BUT instead the upfront is inside and called SRCDOC=weirdo-html.... 2. frameset—in HTML5/transition—should have been easily compatibilized SUCH that noframes-iframe sh/would take the preference when available; BUT instead we have to serve second-file-pages to compatibilize.... 3. onmousedown over iframe is missing-in-action... AND right-click-drag-the-document never got implemented.... 4. DIV-scrollbar is—apparently—missing (I have a 600-page doc to edit). 5. I'm just starting on this—or rather I'm just trying, to start on this. Ray.
HTML5 today is use to build rich, interactive web pages , the benefits of using HTML5 as a tool to deploy across multiple browser and OS platforms. Cross-platform apps built on HTML5 are a logical extension to model, where the platform is not a browser but the internal web runtime on the target platform. http://www.mobilepundits.com/HTML5_Development.html
Indeed a great article. But I believe that f you are writing productivity applications and want to target only the important platforms like android, ios, windows mobile etc. then html5 + Phonegap should do the job and help you to take the product to the market much faster than trying to do it native.
Thanks, but AppJS is the best platform so far.
But mobile users are moving away from browser based applications and adopting apps instead. How is HTML5 going to help in this move?
It's nice to see that Microsoft's Visual Studio 2010 is utilizing HTML5 features and that they are finally making use of it in the latest IE. HTML5 is the future! If you think they'll continue to be native apps your badly mistaken because as the web and bandwidth become more and more ubiquitous so does cloud serving software. The browser is merely the interface for software of any choice thus HTML5 is the universal interface for all programs. To ignore this fact is the demise of any programmer.
I have to admit to really liking XHTML and its insistence on correct closing of tags, consistency etc. HTML5 does seem to be more democratic somehow and has added some exciting possibilities for people (like me) who never thought they could build an app as the article points out. I just hope the predictions about mobile browsing taking over aren’t true, designing for small screens isn’t fun really, the only things that look better small are insects and spots!
Look at this good initiative example from ComponentArt.Com: "ComponentArt's unique technology delivers rich BI dashboards to any tablet, smartphone, PC or Mac. Develop once in XAML, deploy anywhere via HTML5." There is no reason to discontinue SilverLight as the platform for the .NET Developers... just translate XAML to adapt to the market. No panic, just strategy and planning. Long Live SilverLight !!!!!!!!!!!!!!!!!!!!!!!!!!!!!
My sincere opinion as an ISV CEO/Software Architect to resume all that discutions: SL/WPF/XAML/WCF/WF, that's all about evolution of software development since Clipper. I'm sure that a team of warriors will arise to build something like Mono for translating our strong programming model of SL to this HTML5 MSFT panic strategy. Indeed, MSFT it self have the obligation to continue the evolutions of .NET/XAML/SL and not the oposite (what a paradoxal shit). Tools that implements patterns like MVC and/or MVVM like Visual Studio LighthSwitch shall have an automatic mapping to all that HTML5/CSS3 trash. Since various flavors of ORM frameworks exists back from the first versions of VS (and developed from other ISVs) to allow the developer work with a consistent and ever evolving programming model to interact with a total different platform (the RDBMS), MSFT or other company/partnership shall (I hope) release an "ORM like" framework to deploy/translate/map our ELEGANT, UNIFIED Model of XAML/SL code to any of these emerging techynologies like HTML5/CSS3. But one thing I'm sure about, if MSFT remain silent about that, third party tools will be developed to do these mappings. But if in some moment MSFT get the head cooler and customer feedback are really important for then, in some way MSFT, in a near future, will implement in VS those kind of mapping tools like that (as Xamarin.Com does to develop Andoid and iOS native apps using Mono with their frameworks MonoDroid and MonoTouch - iOS). This initiative will allow the evolution of the .NET platform and solve the compatibility issues. This a pattern of software development evolution history, translation/mapping tools.
Nice article to start with HTML5 Thanks.
Html5: Microsoft has no right tools and not a concept for the future. Silverlight would be a solution.
Nice article to start with HTML 5, need more information on Visual tools to develop HTML 5 apps.
Microsoft should stick with the robust engine that is Silverlight and make a real effort to create browser plugins that work cross browser and cross device. Really, HTML5! Why not put some MS staff to work instead of downloading a week spec on every MS loyalist. For shame!
heard some concerns on Silverlight support life cycle. Silverlight 5 will be supported till 2021 which is a very long time. Please feel free to refer the SL Support page which details the support cycle http://support.microsoft.com/lifecycle/?LN=en-us&c2=12905&x=5&y=13
Developers need a Visual Design tool like those for WPF/SilverLight. IntelliSence is not enough.
TBoen: I absolutely agree. Thanks very much for expressing this community opinion.
Loved the article! Look forward to the series.
I love CSS and CSS3 is amazing! The challenge with it is that in large applications it can quickly become a disorganized nightmare. First it exists, more often than not in a separate file from the code it is formatting. Also, there is no indication of how changing one element may effect the functionality, yes functionality of the entire application. I envision a solution to this being a plug-in editor for Visual Studio which pulls up only the css which effects the html currently being edited changes would then be distributed back into their various physical files. Also hovering over any element would yield a complete list of items in the solution which would potentially be changed if the CSS itme were to be changed. Any CSS conflicts in the application would also be highlighted. I may get around t
Hello Brandon, Thank you for the article. I have a somewhat unusual request. Is there a way for us to get notified when your next article is published ? I am new to this and not quite sure how others are managing this. Please advise if there is a way to be notified via email of new postings in this series. Thank you.
Microsoft needs to step up a bit. I can't figure out if I should bail out of aspx and go stictly php . . . dump Silverlight and run with Flash . . . now I'm supposed to put my marbles into HTML5. I get better performance and reliabiliy building aps with classic ASP and ADO running on IIS 7 than anything right now. This was a good article and I'm looking forward to the next one.
Looking for the coming Articles.
Hi M. Satrom, Really nice article, thank you very much !
The Silverlight vs HTML5 argument is really tiring. Both are fantastic technologies, and there's a place for each. If Silverlight is the right technology for your application, go ahead and use it. Does anyone really believe that Silverlight will just go away? Remember FoxPro? It has only been a few years since Microsoft discontinued support for it. If Silverlight was to truly go away - and there's no way in hell that would happen - you'll get at least 10 more years of support.
I took the faithful plunge into Silverlight and got my butt handed too me. Deciding to write an application with a new technology was exciting, but I failed to deliver a stable application because the frame technology in Silverlight sucks. Even though I know the article here is about HTML 5 the fact is Microsoft still has not addressed the basic mindset of the developer. One of the biggest shifts they have fallen away from is that we do this because we enjoy the craft of developing working applications that can be used by everyone. We don't enjoy the daily drudge of relearning new code methods every time a flashy update comes down the pipeline. Make the Visual Studio Suite deliver a strong HTML 5 Experience using RAD controls. Let the engineers figure out how to write the output, don't put this on the developers.
HTML5 tools will allow moving MVC pattern to client side and this requires changing mind from developers: good WEB application will consist of tons AJAX, jQuery code with tinny well built JSON services on server side. Microsoft did its homework: MVC data services (http://msdn.microsoft.com/en-us/data/bb931106) is right tool at right time and place. On other hand some steps of W3C look strange at least: 1. instead of enhancing old SVG tag it started new one – CANVAS; this will make problems for application designers selecting the tool, 2. Introducing PORTS is excellent gift for WEB garbage writers; I agree that initialization of the dialog from server side is mandatory for event driven applications but it would allowed in secure, VPN networks where me (user) knows in advance who opens connection and what and when the information will be written into my computer.
I for one will be glad once HTML 5 will work in Internet Explorer as well as it does in the other browsers like Firefox, Safari, and Chrome. It would be nice if it worked the same for most of the functions, but I know that is too much to ask for. While you may want to develop in Silverlight and C# for certain things there are plenty of applications and uses that only require a browser and HTML 5 and it would be nice if IE were available as an option, but given that more and more devices and users do not run IE that may not be a major problem like it once was especially if HTML 5 is not as usable in IE as the other browsers. It would be nice to have the ability make an HTML 5 app that can work on all browsers. Right now IE seems to be the only browser that is not able to do most of the new functions in HTML 5. I will check again and I hope this article is true that IE 9 now has the ability to perform some of the functions, but I pulled up a simple app that is mainly using the video and audio tags. I have IE 9 and it still had major issues, but still works flawlessly in Firefox, Safari, & Chrome weather on a Mac, Linux, Windows 7, Ipad or an android. Thank you for the article and I really hope that one day IE is able to run HTML 5. I will look at it closer soon to see if there is something different I need to code just for IE so that it will work. At least now I have hope. I thought it would be IE 12 before HTML 5 would become available.
I wish people who Comment would "READ" the article first. First of all HTML5 can be used alongside your current projects with a separate object for pages defined using HTML5. That is what is meant by choosing what technologies to start adopting. Secondly the Reason we are turning from Silverlight and Flash for instance is that smaller and smaller devices are what people are buying and paying for and HTML five has proved lighter to run and inadvertently consume less power which portable devices have. Also having more cross device browser compatibility gets us more consumers as well. Leading to more revenue for developers so adopting technologies while not replacing gives you an opportunity to sell up new software products that perform better or are tailored for a device type. Since in a bad economy people are buying a lot less anyways this seems like a good thing not bad to me.
As Todd said: "Sure is getting harder to keep up and make a living at this.... "
Brandon: Thanks for nicely dissecting HTML5! I'll try to keep up with this series and hopefully you'll also be providing Pros & Cons of implementing each of the different pieces that make up HTML5 -- with respect to disparate environments. 'Polyfill-ing' sounds very interesting... if not challenging! All on-board!
Everything I have seen so far from Microsoft in the past year has been embracing of HTML5. As far as application development with complex business logic, like whiskey, pick your poison! Be it ASP.Net (MVC or some other pattern) or SharePoint/Office 365 using WCF. HTML5 is perfect for building well-structured views, add some jQuery and it sweetens up further, on top of an enterprise platform and well... it's just a good cross platform idea. Think iPhone/iPad + Android + Windows phones and then all the browsers that are increasingly compatible with the spec. And if you want backwards compatibility, there is always Modernizer and Scripting in the new DOM elements. You can still use all the tools you currently use, HTML5 is just another step in the evolution of web application development. Good article and good work!
Microsoft is panicking. Their vision of platform leadership is becoming murky as they are frightened by the successes of competitors and upraises of small companies during the fast cloud shift. They can’t sit out for Silverlight to catch up to where Flash is now in years to come, they need the traction, they need the frontier, and they need it NOW. They are not confident to CREATE something hot now, they are just glad if they could CAPTURE something hot. It’s a right move for Microsoft – after all cross-device is much more important than cross-browser now, and to penetrate to other devices, you’ve got to have something that doesn’t have Microsoft’s marks all over.
Great! Very good article, very detailed!!!
Im finally getting up to speed on SilverLight and like that you can create tightly formatted screens that behave alot like desktop apps. The idea of going back to dealing with postbacks, browser inconsistencies and HTML formatting issues seems like a step back to me. So is SL another idea getting thrown out before it has a chance to mature? Sure is getting harder to keep up and make a living at this....
Please not this HTML5 stuff again; if anything more focus needs to be put on WPF and SL! SL5 is looking good but where is WPF 4.5/5? Start unifying the two (SL5 is making good headway there) and leave HTML5 for non Apps or "Lite" version of our LOB apps. Can't wait to hear all the stuff that we've been told to "wait for BUILD 2010" for. gpk
No go html 5 isn't for web applications. It's just a surface not suitable for rendering complex applications. I'm not buying and I'm not alone... SL way of coding with tools like BLEND for UI and VS for Business Logic, this is the future and if it's not enough for all platforms, MS should come with a behind the scene creation of HTML X + JS, plumbing that the developer doesn't need to see. I did not learn C# + xaml + blend + vs for nothing. I want to continue but I want my app to be seen everywhere Good luck to all.
Basically script kiddies love this stuff, and the rest of us programmers, were were riding on a horse all this time, now we have to settle for a donkey.
HTML was always the way to go for the web, a cloud app could not care less for the browser, all iphone, ipad and android apps that bear any meaning are NATIVE APPS, but now microsoft seems to think HTML is an universal hammer, what saddens me is that all that shenanigans is completely avoided if you use silverlight! But hey! our strategy has shifted, time for you to deal with polyfills and Modernizrs have fun!.
Very nice article, i can't wait to read the next one. Very well written!
Hello! Nice article to start deal with HTML5. Thanks!
More MSDN Magazine Blog entries >
Browse All MSDN Magazines
Subscribe to MSDN Flash newsletter
Receive the MSDN Flash e-mail newsletter every other week, with news and information personalized to your interests and areas of focus.