HTML5 training: Taking a first look at HTML5

Published by | Tuesday, July 13th, 2010

In all my years of teaching and writing about web design, I don’t think I’ve ever seen a topic explode in terms of interest level and passion as quickly as I have with HTML5. Despite the huge amount of interest in the topic, there is still a great deal of confusion about what HTML5 is and how to go about learning it. In my opinion, one of the best ways to approach HTML5 is by first comparing it to HTML 4 and learning the differences. That way, it’s easier to understand exactly what is changing in regards to HTML and cut through some of the hype and clutter that is currently surrounding the topic.

Although HTML5 represents an ambitious step forward in the evolution of HTML, it is largely a revised version of HTML 4. If you are comfortable writing HTML4, you should find yourself quite comfortable with the majority of the HTML5 specification. With that in mind, let’s take a closer look at the differences between HTML5 and HTML 4.

First, it’s important to note that the HTML5 specification is designed not just to replace HTML 4, but also the XHTML 1.0 and DOM Level 2 specifications. That means the serialization of HTML to XML and the DOM specification are now contained inside the HTML5 specification, instead of belonging to separate specs. It also contains detailed parsing rules that are designed to improve the interoperability of systems that use HTML documents. As such, the HTML5 Specification is much larger than HTML 4 and covers a lot more ground.

One of the first places you’ll notice a difference in writing HTML5 documents is in the doctype and character encoding. In the past, based on the version of HTML they were using authors have had to use long, arcane doctypes to trigger standards mode in modern browsers. You may recognize this code, for example:Now, rather than having to deal with multiple complex doctypes, you simply use a single doctype that declares the document as an HTML file. Since HTML is no longer SGML-based, no DTD is required. Character encoding is likewise simplified. All that is required now is a meta tag with a charset attribute. Here’s what the above code looks like in HTML5:

Much simpler!

There are, of course, new elements in HTML5 that are not part of HTML 4. These new elements assist with page structure and code semantics, allow embedded content, and include new phrasing tags that help add additional meaning to content within the page. By now, you’ve probably heard of new elements such as the section, article, and header tags that will make structuring pages more meaningful and elements like the video and audio tags that make it much easier to add multimedia to sites. In addition to new tags, several new attributes have been added to existing elements to extend their power and functionality as well.

Forms undergo a dramatic update in HTML5 as well. Much of the work done on the Web Forms 2.0 specification has been added to the HTML5 spec. The result of this is new form controls and input types that allow you to create more powerful forms and more compelling user experiences. New form elements include date pickers, color pickers, and numeric steppers. The input element is now much more versatile, with new input types such as url, email, and search that will make it easier to control the presentation and behavior of form content both on the web and within mobile applications. It’s worth noting that HTML5 also adds support for the PUT and DELETE form methods, making it easier to submit data to a wider array of applications.

By far the addition to HTML5 that is getting the most attention is the introduction of several new API’s that are designed to make developing web applications easier across multiple devices and user agents. These APIs include the much talked about video and audio API, an API for building offline applications, an API for editing page content, one that controls Drag and Drop functionality, another that focuses on history, and one that controls Application protocols and media types. Other API’s like Geolocation, Web Sockets, and Web Messaging are associated with HTML5, but are defined within their own specifications.

Those are a few of the highlights of the differences between HTML5 and HTML 4, and should give you a good idea of how HTML5 will change the way that web sites and web applications are authored. Sign up for the lynda.com Online Training Library® New Releases announcement so you’ll know when my HTML5 tutorials are available.

Share this:Share on Facebook31Tweet about this on Twitter36Share on Google+0Pin on Pinterest0Share on LinkedIn0

lynda.com - start learning today

Tags: , ,


25 Responses to “HTML5 training: Taking a first look at HTML5”

  1. Howard Callahan says:

    Great comparison James, thank you for the insight to HTML5.

  2. Matt says:

    Has anyone weighed in on the debate between HTML5 and Job’s snubbing Flash? From what I’ve heard it seems the Droid phones are handling it just fine. At the same time, I haven an iPhone and love it and except for those sites with Flash, the apps and browsing work wonderfully. Is this just a matter of technologies companies pushing for their own leverage, or do you think it really is a matter of what the next best thing will be?

  3. Matt, that’s a question that has generated a lot of interest recently. Honestly, I try to stay out of the HTML5 .vs Flash debate, since I think in many ways it is comparing apples to oranges. As far as Jobs snubbing Flash, my personal opinion is that Apple’s decision to not include Flash was certainly related to encouraging standards-based design and development, but that Apple was also less than honest regarding all deciding factors. I’ll leave it at that.

    Thanks for the kind words Howard. I’ve really enjoyed writing this title and I’m looking forward to adding it to the library!

  4. ED says:

    Hi James, If I can get your insightful opinion – I have never taken a single coding class, but want to take a class that will provide marketable skills as a freelancer. In other words, I’d like to take a class that I can put to work asap, that will also be in high demand for the foreseeable future. My preference would be something having to do with mobile and video. What do you suggest for a novice? Web design, Apple iPhone apps development, HTML 5, SEO, Final Cut, other? Thanks in advance.

  5. Palenoue says:

    When you make your tutorials are you going to cover canvas? One thing I’m really eager to learn is how to make web games and from what I’ve been hearing about the new graphic capabilities of html5 this sounds like the venue for me. Problem is, almost all of the stuff I’ve found so far on how to handle graphics and games in html5 are written for people with twenty years experience with html4 and javascript. Absolutely nothing for beginners who want to learn.

  6. Hey Ed,

    That’s a really broad question! It really depends upon your personal tastes and what you want to do. HTML, CSS, and JavaScript form the backbone of the web, so if you are going to do any web development work at all I recommend starting with those. The Apple SDK is fine if you want to build apps for the App Store, but it’s a fairly specialized market, so I’d advise checking out what type of freelance jobs you are interested in. It’s a good niche to be a part of for the time being, but who knows how the mobile market is going to evolve? Other than that, I’d recommend taking up PHP. PHP is used in most CMS applications and is widely used throughout other web apps, so it’s another really good skill to have, especially if you want to get into development. Check out the Essential training series in the lynda.com OTL in all those areas and you’ll have a good starting point for moving forward.

  7. Palenoue,

    I will indeed be covering Canvas in the HTML5 course, and it will include a few hands-on exercises so that you can play around with it as well. There is JavaScript involved, but I promise I keep it digestible!

    Thanks!

  8. Milan says:

    Hey there! This is going to be a great course. When will it be available on lynda.com?

  9. Benjamin says:

    Hi James,

    I just want to say hi and thank you for all of your videos. The videos that you have produced are all very insightful and I look foward to HTML 5.

    Thanks,

    Benjamin.

  10. Palenoue says:

    Thanks for the response about canvas. I’ve been checking out a lot of HTML 5 beginner stuff on the web and canvas is rarely mentioned, let alone explained.

    As for javascript, bring it on! I plan to learn that and several other things, the problem is finding a good source for a beginner. Speaking of which, can I ask you a question? I want to make web games of various types and styles and the more I look into it the more confusing it becomes on how to get started. While I’m going through your HTML 5 course what do you recommend I study as well? Javascript? Ajax? XML? Something else? I can’t study all of them at the same time without my brain malfunctioning, yet I can’t find any good guidelines on which to study first. Any suggestions on what would go well with your course?

  11. Milan says:

    @Palenoue

    In my opinion, Adobe Flash is the best tool for game development on the web. And you can find two or three titles in Adobe Flash section on lynda.com that are covering that topic.

  12. Palenoue says:

    Three problems with Flash:

    1) it’s a resource hog, constantly crashes web pages with two or more flash ads or freezes them up for a long time before sending the message that flash video player has shut down. I’d say 95% of the problems I have with web sites are caused by Flash. Most of my friends use some browsers specifically for the option of eliminating all flash from websites so they can surf quickly and easily. The performance tests I’ve done comparing experimental HTML 5 sites with similar Flash sites show HTML 5 to be a lot smoother and more stable.

    2) doesn’t work on iDevices. If I make a web game I want it available to all my friends and myself. I have a Touch and iPad so I want to make games that I can play when out and about.

    3) complexity and proprietary. Every updated version seems to get more complex and interconnected with every other Adobe product, pretty soon you won’t even be able to launch Flash without having Photoshop, Illustrator, Bridge and a dozen other Adobe apps installed on your computer. When they come out with CS6 I bet they’ll change everything around again to make things even more complicated. Don’t get me wrong, I love their apps, have CS5 Design Premium, After Effects, and use Flash to make animations and Dreamweaver for all my web creation needs, but it’s getting to the point where you need six years of college for a doctorate’s degree to use them all. Also, Adobe has ignored Macs before, so who’s to say they won’t get into a saber-rattling match with Apple and only come out with Flash updates for Windows? That can’t happen with HTML 5.

    From what I’ve seen, including looking at code and reading up on the processes people go through to make stuff, it looks like HTML 5 is the right way to go for me. Less coding, more versatility, better standards, and it’s open, not proprietary. True, Flash is a bit more capable right now, but HTML 5 is just starting to take off and there are a _lot_ of people playing with it, pushing the envelope, and developing it into something that will surpass Flash.

  13. Thyago Ohana says:

    Can’t wait to have an advanced HTML5 training on lynda.com
    Any idea when this will ever be out?

  14. The First Look title will be out soon, keep watching lynda.com for more detail. In terms of advanced HTML5 training, what types of things are you interested in?

  15. Palenoue says:

    Things for Advanced HTML 5 Training:

    Multi-user interactivity: Being able to set up a whiteboard so multiple people can use it at the same time would be useful. I saw an HTML 5 demo several months ago that they set up like a fridge word magnet set, where people visiting could pick words from a stack and place them on the large empty space (with a built-in wiggle so they’d always stick at slightly odd angles), then move them around, swap out words, things like that. Wish I bookmarked it. This would also be useful for card games and the like.

    Wiki-Like Web Pages: how to use the new HTML 5 and CSS 3 stuff to make web pages that select people (via password) can edit in real time for group projects or moderated events. Example: a cartoon draw-off that gathers some cartoonists from around the world and lets them take turns drawing in a large area while visitors can comment via a scrolling text box on the right side as the moderators and artists text chat on the left side.

    Multi-Platform configurations: how to set up a page so it will automatically adjust depending on how you’re viewing it, like from a big screen, a tablet, smartphone, etc. I’ve heard this is supposed to be a lot easier with HTML 5 and CSS 3 but I haven’t found anything that goes into specifics.

    Typography: can’t get enough of this! I’d love a whole chapter on the fun things you can do with fonts and such.

    Audio: especially how to play and mix multiple sound files triggered by user activity.

  16. Thanks for the feedback Palenoue. Doing something on the Editable Content API would be a good title. Although I can’t be specific about it, we do have some other HTML5 and CSS3 titles on the way.

    As for Flash, it’s only a resource hog if it’s poorly planned and scripted. The same as with JavaScript.

    Thanks for the feedback guys!!

    I’ll be doing a few more HTML5 blog postings soon as well.

  17. Looking forward to this course which I will definitely check out!

  18. jay says:

    When will HTM5 be available on 98% of computers? With people still using IE (pick your version), won’t it be years?

  19. Hey Jay,
    Well….it depends. People are upgrading their browsers at a much faster rate these days, and IE’s market share dominance is trending down. Frankly, the most encouraging thing about HMTL5 adoption is Microsoft’s embrace of it in IE9. While not perfect, IE9 offers very solid HTML5 and CSS3 support. A better way to approach HTML5 is a piece at a time. Take a look at the areas of the specification that are supported now, and adopt what you need out of those areas. I think overall we’re looking at around 2 years before you can totally switch over to HTML5 and perhaps 3 or 4 before certain areas are fully standardized.

  20. baran says:

    I think the future is HTML 5 and please cover canvas, Mr. Williamson.

    Regards.

  21. marcos says:

    James Williamson, as you asked: The smile face is done by holding the left alt key (in pc) and than pressing the number 1 ♥☺☻♥

  22. Thanks Marcos!

    Any idea for the Mac?

  23. Bobby says:

    I can’t find anywhere in your videos on HTML 5 any information regarding the way to style the new tags such as NAV and HEADER. I tried doing your video on converting a traditional document to an html 5 document but changing the names broke the structure of my code in design view within Dreamweaver CS 5.5. The Css has has for instance #nav to set the styling for the div id= “nav” but what is the syntax one would use for styling a tag? Classes and ID’s seem to be made for Divs. I’m by no means a pro at this, far from it. What am I doing wrong if I am to use id and class with the tag?

    • Chelsea Adams, managing editor says:

      Hi Bobby! We’ve contacted author James Williamson and he will get back to you just as soon as he can.

  24. Bobby, simply style, and treat them the way you would a DIV tag. If you have IDs in place in your CSS, you can continue to use them. For example, if you replaced with the selector #header would continue to work. Since you can have multiple navs, headers, and footers in your document, using classes or IDs to correctly identify them is fine. You could also simplify your CSS depending upon how you are structuring your page. If you only use one for example, you can drop the ID and simplify your selector to just “header.” It’s less weight on your code and a bit faster. The main thing is to have a consistent strategy in place. Don’t just change the tags to change them, think about why you’re using the new structural elements and then plan your CSS accordingly. The transition might take some time, but eventually it will feel just as natural as what you’re currently doing! Thanks for watching!

Leave a Reply