Regarding HTML5

It was a hot Summer Sunday afternoon. I’d just stepped off the Acela Express from Boston to New York City, and I was confused as ever about HTML5. I thought I was alone. Impossible in mid-town Manhatt– no, alone in being confused about the next chapter of markup specifications. I figured something was wrong with me. Was I not reading up enough about HTML5? Well no, wait, I’d been doing a fair amount of reading up about HTML5, yet there was still this partial confusion about a number of aspects of the proposed spec.

Thankfully, a few friends old and new got together at Happy Cog headquarters to walk through the spec, noting along the way the areas that seemed problematic, confusing or otherwise unsettling.

Personally, I came away from that day less confused, but more importantly feeling more positive about HTML5 in general. Along with this newfound positiveness, came some clarity in specific portions of the spec that seemed troublesome. The rest of the group (I can take zero credit for its publication) crafted a “guide to HTML5 hiccups” in the hopes that the powers that be would listen and healthy debate might begin on these specifics.
A few of those items that stood out for me were:

  • Offering an HTML5 syntax option when validating. This has nothing to do with HTML5 itself, but it’s important for the validator to simply and easily add an option for checking syntax that would help to foster good coding habits, avoid head-scratching rendering issues, etc. That’s why I choose to code XHTML today — it’s a personal preference that helps me maintain, optimize and troubleshoot code, and I’ll continue with that convention no matter the doctype.
  • HTML5 introduces a lot of new elements. All at once. Some of which seem unnecessary (e.g. article, hgroup).
  • While at first I was cringing at the idea of redefining the semantics of certain elements, it does start to make sense. Instead of introducing even more elements, HTML5 reuses and redefines. For example, the small element would now “represent side comments such as small print”, rather than a presentation instruction for font size.
  • The concept of “sectioning content” I didn’t quite get at first from the high level overviews I’d been reading, but seen in practice, it’s quite excellent (e.g. where the section dictates scope of the heading elements it contains).
  • That said, folks will use header and footer for exactly the areas that they’re now assigning IDs with those terms, while in HTML5 they can mean different things (header and footer of a section, for which there could be many on a page).
    I still have an enormous amount to learn about HTML5, am still concerned about certain aspects of it, but overall optimistic about the future of markup.

30 Comments

  1. Mike T. says:

    Huzzah! Nice to see the ‘Super Friends’ speaking up on the html5 spec–the guide brings up some great points, especially with respect to the footer element.

  2. zeldman says:

    Nicely put, Monsignor.

  3. The spec is coming along. Before we can really use html5, browser support needs to be there.
    Firefox 2, Camino, and any other browsers employing that particular branch of the Gecko rendering engine are really the only major contenders I’m aware of that do Bad Things™ with unrecognized elements.
    Specifically, they immediately close unrecognized elements, and shove all children below in the source.
    There’s a really great javascript shim to get IE in line. It’d be great to finally have a solution for misbehaving Gecko browsers.
    Any jQuery-ers up for the task?

  4. Faruk Ateş says:

    HTML5 has been an interesting thing to observe throughout its development so far. I agree with the Superfriends’ guide on the issues with it, as well as with some of the problems John Allsopp pointed out.
    For me, however, it’s ready to be explored a little bit more actively. Without trying it out right now we won’t be able to identify certain problems before they become more set in stone. Sandbox sites, pet projects and the like—these are all sites that I build entirely in HTML5 today, and I’m hoping to get others to do the same.

  5. Jason Robb says:

    Excellent. That’s just what I needed right now. Slowly and steadily catching up to speed with HTML5. You’ve given me a taste of what could be.
    Looking forward to a full palette of HTML5-goodness at the handcrafted workshop.

  6. André Luís says:

    This is the closest that we, web geeks, will ever be to having a rock supergroup.
    \m/

  7. Keri Henare says:

    The excited developer in me wants to rush forward with all of the nice new toys in HTML5, but the accessibility enthusiast in me realises that we’re not ready for the complete HTML5.
    I’m currently using a backwards compatible subset of HTML5 that I’ve dubbed HTML4.5. It’s still valid HTML5 but only using the elements supported by the older browsers which are still in use.

  8. I’m just afraid that HTML5 is going to be overcooked! I mean all this added functionality can be lost if no one knows how to use it properly.
    Just look at the table code, I’m sure no one really thought that programmers would use them to layout entire web pages.
    The question on my mind is “how much do we need?” Should the interest of the W3C in HTML5 be in making a future web, or allowing a better current web allowing developers to make necessary changes as they did using the table code?

  9. Ryan says:

    Some very valid points I’m sure the spec writers and the web community can agree on. Great work.

  10. Billee D. says:

    Thanks for the read, Dan. I first read the post on Adactio, then on Zeldman, but I wanted to say thanks to you for being part of this whole process too. The more heads we have working on the problems the easier it will be to figure things out and maybe we can help forge the way to a better HTML.
    I’ve been using HTML 5 for a few recent projects, though somewhat sparingly. But, until recently I had been using the footer tag incorrectly (according to the spec anyway). It’s nice to have the Superfriends on the job to help clarify some of the more elusive and/or ambiguous details of the HTML 5 spec. Thanks again.

  11. Dale Cruse says:

    Which Superfriend are you, Dan? You’re one of the cool ones, right? Not Zan or Jana or anything, right?
    Going to purchase the Handcrafted book today at lunch. Looking forward to going to school (again).

  12. Thanks. We just started seeing more traffic on HTML 5. It certainly is cleaning up a bunch of waste.
    Our Affordable Alaska Web Design Company can incorporate these changes nices.

  13. It seems like people have been ramping up on html5 for a LONG time now, I’ve been picking up a little bit here and there and although it looks great, I’m still unclear on when browser support will be good enough across the board to use it on client work… Kind of like wondering will ie6 ever die; will I ever be able to use this stuff?

  14. just read some more info on ALA and it seems like all the latest browsers are up to speed, but doesn’t mention how everyone is going to get around the fact that ie6&7 are still used by a large percentage of internet users… Is there a way to code it so they don’t break?

  15. I was really pleased to see the SuperFriends announcement. Good stuff!
    From explaining HTML5 over here the difference between <section> and <article> seems to be pretty confusing, as does the <hgroup> element. I’ve taken the <section> and <article> difference to be that <section> is a chunk of semantically related content, whereas <article> is a chunk of semantically related content that can stand alone (ie in an RSS feed), and still make sense. For <hgroup> it’s unfortunately mainly to hide a subheading from the outline algorithm—not the best reason to have a new element, but given outlines for free I’m cool with that.
    I wrote an overview guide on the new structural elements in HTML5 if anyone is interested:
    HTML 5 structure—HTML 4 and XHTML 1 to HTML 5
    This also covers the CSS and JS to get things working in browsers (including IE) and links to some other articles, including one on <hgroup> (with subheader usage examples):
    HTML5 structure—header, hgroup & h1-h6
    HTH
    peace – oli

  16. Erin says:

    @Brent — Perhaps it is time to start dusting off and updating the “To Hell With Bad Browsers” campaign. Internet Explorer is the new Netscape 4.0.

  17. @Erin – trust me I want to send them to hell, unfortunately ie7 accounts for a big chunk of users still, so no professional website can just not pay attention to that…
    @Oli – Great this answers a LOT of questions for me :D

  18. Pete says:

    I’m definitely in favour of a HTML5 syntax option which validates to XHTML style syntax.
    I was thinking of using some kind of doctype switcher during development so I could validate to the XHTML syntax standard, and then switch back to HTML5 if I wanted.

  19. This is something I hadn’t heard before until reading Oli’s article, sounds like HTML5 can also use most of your XHTML code and is perferred because it works on more browsers, with this said, why would anyone want to use XHTML5 and why did they even make it?
    - – -
    If you currently use XHTML 1.x you might be thinking to use XHTML 5, the XML-compatible version of HTML 5. If your website will have a general audience, don’t. XHTML 5 must be sent with an XML mime type (like application/xhtml+xml), and even IE8 still doesn’t support this. However, all of the hallmarks of XHTML coding—writing elements in lower case, correct nesting, closing tags, adding optional elements that add meaning—are all compatible (HTML 5 is case-insensitive) or encouraged in HTML 5.

  20. David says:

    I’m simply hoping that when 99% of my visitors can view html 5 properly, that it’ll be a little cleaned up by then. I figure, oh, 15 years at this pace…

  21. dusoft says:

    Dan, thanks for the short writeup and arguments. Gave me some new views of HTML5.

  22. Benga says:

    Interesting take on HTML 5 Dan. A different view is always appreciated.
    Thanks,
    Benga creative

  23. Steve says:

    Im sure Firefox will be up-to-speed with HTML5 (and CSS3) and im sure they will get it right. But how long is IE gonna take? And that’s always a problem because of their market share – designers/developers and the web as a whole is constantly being held back.

  24. Nathan says:

    I was rather confused regarding the nature of the meaning of “section” tags. At first I thought the semantic markup of header and footer was a practical joke.
    Thanks to Zeldman for the guide to HTML5 hiccups as well.

  25. Time to fire up the sandbox with all the new html5 and css 3 goodies that I can never actually put on a client site because there won’t be enough audience browser support.

  26. Awsome..I always look for information that is concerned to HTMl…Well there are lots of latest in this HTMl that has to come out in front of media..I am waiting for one who would make me little more clear about the exact and the maximum usage of html..Anyways thanks for such a nice informative information…

  27. Jonny Haynes says:

    It’s starting to make more sense after reading your ‘Super Friends’ feature.
    HTML5 should be a good new addition … still unsure about elements such as , I’m still to be convinced about the usefulness of these elements.
    Surely the element from XHTML2 would have been a better addition.

  28. Andrew M says:

    Thanks for weighing in on the matter. It’s helpful to have all of the Superfriends opinions on HTML 5.
    Also, I’m having trouble printing the Unicorn on the guide. Is this and HTML 5 issue. I did see a Unicorn! :)

  29. Jacob says:

    HTML5 does seem unnecessary to me. I liked what you said very much. I think being a good web designer takes constant research to keep up with the latest web technologies.

  30. Paul D. says:

    Is anyone else frustrated by HTML5 bugs? I’m trying to put together my first HTML5 site right now, and I started with a HEADER element and an IMG inside it. Setting the image to display:block makes the header element ignore all css applied to it.
    Back to DIVs.