A Book Apart: HTML5 For Web Designers By Jeremy Keith
Posted September 17, 2010 at 10:13 AM by Ben Nadel
When the buzz about HTML5 started to spread, my first thought was, "Dang it!" This reaction was not a reflection of the technology itself; rather, it was a frustration that a technology I had previously thought of as, "being in the bag," was now evolving and required further exploration. In an industry that is growing so rapidly, it was comforting to think that one of the major technologies in use - HTML - was static. This allowed me to allocate my efforts elsewhere, furthering my understanding of things like ColdFusion, Javascript, and CSS. But, all of this has now changed; or, has it?
| | | | ||
| |  | | ||
| | | |
I believe that much of my frustrating with HTML5 can be attributed to a lack of understanding. What is HTML5? How much has changed? Can I use it yet? What is core? What is vendor-specific? What about IE6? With all of these questions floating around in my head, the idea of learning HTML5 seemed somewhat overwhelming. But, not anymore; last night, I read HTML5 For Web Designers by Jeremy Keith - the first book from, "A Book Apart," the literary side of, "A List Apart."
At 86 pages long, HTML5 For Web Designers lives up to the Book Apart slogan: Brief books for people who make websites. I'm a slow reader and it took me about two hours to get from cover to cover. In the book, Jeremy Keith describes the roadmap of HTML and provides a good overview of the tag-based side of HTML5 (he explicitly leaves the Javascript APIs to those developers more versed in the individual technologies).
Not only does the book quickly and efficiently cover what's new (and what's "obsolete") in HTML5, it acts as a sanity check - a re-grounding in reality; it takes this amorphous technology and codifies it, transforming it from a daunting task into an exciting opportunity. It's very comforting to know that HTML5 wasn't the beast that I perhaps thought it was.
If I had one complaint about the book, it was that it didn't really outline any "best practices." Of course, it might be too early for any HTML5 best practices to exist. Even the author echoes this sentiment to some degree:
What's more problematic is that Article and Section are so very similar. All that separates them is the word "self-contained." Deciding which element to use would be easy if there were some hard and fast rules. Instead, it's a matter of interpretation. You can have multiple articles within a section, you can multiple sections within an article, you can nest sections within sections and articles within articles. It's up to you to decide which element is the most semantically appropriate in any given situation. (Page 68)
Much to his credit, however, Jeremy does go on to iterate through a Section example and how one can use "The Outline Algorithm" in order to ensure that content organization remains meaningful. What would have really brought the concept home, however, would have been a screen shot of a web site with the various elements outlined and labelled with their appropriate HTML5 tags (ie. Header, HGroup, Section, Article, etc.).
All in all, I really enjoyed this book. Much like Cody Lindley's "jQuery Enlightenment" eBook, it definitely hit the sweet spot of brevity and clarity. It made me much more comfortable with the idea of HTML5 and left me feeling excited to embrace it rather than overwhelmed at the thought of having to learn it.
Reader Comments
So what was your takeaway? Is there much you can even reliably use with acceptable browser coverage right now? If not how many decades can we expect before it's safe to do so? Can we expect some follow up posts on specific things you liked/hated about HTML5?
I personally hate the HTML language design. Div? P? A? Link rel? Ugh.
@David,
Yeah, you can definitely start using most of the HTML5 markup tags. With IE (pre IE9), you have to include a tiny bit of Javascript in order to allow styling of the new tags; but, other than that, things like Article, Section, Header, etc. and the micro formats should all be usable.
The embedded tags, on the other hand, are a bit trickier. Audio, Video, and Canvas don't work everywhere as they require much more functionality (not simply layout). But, there are ways to allow graceful degradation (into Flash for example) in browsers that don't support it.
At I get more into this, I'd definitely like to post more follow up stuff.
You just sold a book.
@Aaron,
Agreed. Like I said, it really hits the sweet spot.
@Ben,
When I went to the iBookstore in my iPad yesterday, it was among the 6 or so featured books on the home page! I went to the A List Apart website and saw that they had it in ePub format there too, which I believe is also iBook compatible.
I first got into HTML5 when I noticed the drag-and-drop part of jQuery UI (draggables, droppables and combining both: sortables). I figured, if jQuery UI could do it in a cross-browser way, I could look into how they did it, and then I could do it in a cross-browser way too. I discovered quite a lot of current browser support for within-the-page drag-and-drop. Then I discovered that HTML5 had plans to allow dragging something from outside of the page onto the page too! (Most cited example: dragging files from the desktop to a file upload droppable.)
Drag-and-drop really caught my imagination. It allows data entry without typing. Imagine a manager's lists of personnel and projects, and initiating a task assignment by dragging a person's name onto a task's name, or vice versa. That event could trigger a dialog with person name and task name already filled in, and all you have to type is the billable hours estimate. There's even a WAI-ARIA spec for handicapped-accessible drag-and-drop, believe it or not.
And I was hooked. HTML5 is the most fun web development has been since the mid-90s.
Another good overview: http://diveintohtml5.org/
Some Examples: http://apple.com/html5
Another book you may want to look at is "Introducing HTML5" by Bruce Lawson and Remy Sharp. It really helped to me understand "why"! I still reserve judgement, it feels like a step backwards in some respects (why not XHTML 2?), but the bigger picture is much clear now. Its not a book on how, but why.
I agree with @Glyn - I was going to suggest Introducing HTML5 but he beat me to it. Great book, and it does have some screenshots and notes showing how HTML5 block tags (article, header, etc) can be effectively used on an existing website (starting on p43 with the guardian.co.uk website as the example).
@Steve,
Yeah, the drag and drop stuff is very cool. We are planning to use it in a internal application that we use and I am very excited to get more into it. Of course, the drag-n-drop is only have the battle, right? Once the events are registered, the files still need to be uploaded through a different process (ex. Flash upload, form POST, etc.). Any way, really looking forward to looking into it.
@Marcin,
Thanks for the links. I've taken a look at the Apple one - good stuff.
@Glyn, @Jen,
Cool, I'll have to check that out. I have two other HTML5 books in the queue right now:
- HTML5 Up and Running
- Pro HTML5 Programming
I'm really excited for this stuff!
Check this out this is a game done in full HTML5 with some small add-ons: http://www.youtube.com/watch?v=LH6DRBcB2hs
who need flash anymore :)
I remember the days of nesting tables, often 5 deep, in order to get the layout that we needed, and having to hunt down that missing TD tag here and there.
I'll take HTML5 with its use of DIV and such any day over that, and use TABLE for what it was properly designed for, displaying tabular data.
Sounds like a good read.
For a quick hit on html5 best practices check out http://html5boilerplate.com/
It's a treasure trove.
@Bob,
Yeah, I particularly liked line 109 of .htaccess:
ExpiresByType text/cache-manifest "access plus 0 seconds"
Not that we ColdFusion types have to worry about that sort of stuff. See Ben's article Experimenting With HTML5's Cache Manifest for Offline Web Applications:
If your cache manifest is a CFM, ColdFusion won't set the HTTP headers Cache-Control, Expires, etc, so that the browser will always attempt an If-Modified-Since (at the very least). That gives CF a chance to serve up a different manifest.
But not every reader of this blog is a CF type, so it's really great to see the ExpiresByType syntax. So thanks for the URL.
We've just implemented Kroc Camen's Video for Everybody (http://camendesign.com/code/video_for_everybody) in our latest webshop: click here (click on "live it >>>" to watch the video - then do View Source to show the HTML5 goodness).
So simple and so easy, cannot wait to chuck out the Flash-fallback when IE9 comes up to speed.
Hi Ben,
Your code for autolinking links in comments works for most things but HTTPS-links (see above example). Could you fix this for me?
Thanx!
@Marcin,
That looks really bananas, right? I don't even begin to understand how they do that stuff.
@Lola,
I remember those days indeed! The worst was having to create tables that has 1px borders on it before the table border could really be controlled with CSS. I always had to have a table with one cell and background color and then a nested table with a cellSpacing of "1"... JUST to get a 1px border. Super junky :)
@Bob,
Yeah, that HTML5 template looks awesome. I also found http://html5doctor.com which looks to have a lot of really great content.
@Sebastiaan,
Consider the link fixed. The video stuff is cool.
http://www.wired.com/geekdad/2010/09/10-geeky-web-tricks-with-html5-and-css3
Has that Chrome music video and nine others that will blow your mind. You'll swear it's Flash-based.
I felt exactly the same way you did - what, now I have to keep with changes to HTML??
Thanks for the reminder, book recommendation, and the reassurance that it isn't that big of a deal after all. But, is worth learning. It's about time to start seriously looking into this!
Hello Ben,
I got a copy of the book and went through it. I never I could learn HTML so fast with reading through so many pages. Thanks for your overview on the book. I don't know if you could recommend any good book teaching CSS3.
Thanks
@Randall,
Chome definitely does some really awesome stuff with HTML5. That whole Google Gravity thing was awesome. I wasted like 5 minutes playing with that the other day :)
@Julian,
Yeah, it was definitely comforting to read the book. Now, I'm taking a look at "HTML5 Up and Running" which looks like it has some more robust examples and Javascript aspects. I'll have a review up of it later this week if I can finish it.
@Samson,
CSS is definitely something a bit trickier to recommend a book about. It's been a while since I've read a book on that stuff. From what I remember, the following books were very good:
- Bulletproof Web Design
- CSS Mastery
http://www.bennadel.com/blog/993-Bulletproof-Web-Design-By-Dan-Cederholm-Thanks-Javier-Julio-.htm
That was a couple of years ago. I am sure it would be beneficial (for you AND me) to find a CSS book that is more updated with the times.
