Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at cf.Objective() 2014 (Bloomington, MN) with:

A Book Apart: HTML5 For Web Designers By Jeremy Keith

By Ben Nadel on
Tags: Books, HTML / CSS

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?


 
 
 

 
Ben Nadel Holding HTML5 For Web Designers By Jeremy Keith  
 
 
 

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.

@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 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!

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.

@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:

http://www.bennadel.com/blog/1944-Experimenting-With-HTML5-s-Cache-Manifest-For-Offline-Web-Applications.htm

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.

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.

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.