Elements and Attributes in HTML 5

If you are as curious as I am about what will and will not be in HTML 5, the list of HTML5 Elements and Attributes that Simon Pieters has created will help you keep an eye on the progress (via Anne’s Weblog).

As noted in the working draft of the specification, HTML 5 (a.k.a. Web Applications 1.0) is a work in progress, so things can change on a daily basis. However, I did notice that the div element is now included in the specification after being mysteriously missing (it was added on 2006-12-21).

Regardless of what you think about the usefulness of the div element, I think keeping it is a good move, if only for the sake of backwards compatibility.

Here are some interesting new elements:

article
A section of a page that consists of a composition that forms an independent part of a document, page, or site.
aside
A section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
dialog
A conversation.
footer
The footer for the section it applies to.
header
The header of a section.
nav
A section of a page that links to other pages or to parts within the page: a section with navigation links.
section
A generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header, possibly with a footer.

Posted on January 12, 2007 in (X)HTML, Quicklinks

Comments

  1. This is really, really interesting. I’ll be watching that list like a hawk. Thanks!

    The header, footer, nav and section elements will be really useful!

  2. Definitely an awesome list, thanks for sharing. The HTML future is looking bright =)

  3. That’s some good stuff. I especially like the new “dialog” element. This was the topic of a recent post about Writing Dialogue/Dialog on the Web. Do you know if the element’s default styling will mirror what I discuss in the article? (Namely no top/bottom margin/padding, and some indentation.)

    I’m glad to hear the div is sticking around. I don’t what we use for a generic grouping container without it.

  4. Wow. That’s VERY interesting. I’ve been reading through Transcendent CSS and thinking a lot about the semantic web, but this changes things all together. Do you have any resources on what tips folks toward html 5 vs. xhtml 1.0 or 2?

  5. After several failed attempts to peruse the HTML5 spec, this provides a nice snapshot for lazy people like myself. Thanks.

  6. I don’t really see the semantic difference between calling something a section and a div(ision). It feels like an unnecessary change.

    I’m also surprised that nav is being treated as a block element… An nl tag would make more sense to me.

  7. What I like is that they are proposing layout and functional for things people have been creating CSS and JS workarounds. There shouldn’t be workarounds. Here is a list, my favs:

    • header
    • nav
    • footer
    • section
    • progress
    • draggable
    • command
    • datagrid
  8. All we now need is for the WHAT WG and the new W3C HTML WG to find a way to collaborate. HTML 5 has been a worthwhile endeavour but I personally believe that, now that the W3C are getting their HTML work back on track, we really should be looking to them to incorporate this work. Chris Wilson seems to feel that one of the major sticking points may be the WHAT WG’s lack of a patent policy. Now that the interesting technical work on HTML 5 is really starting to firm up, they need to address the boring-but-necessary matters like this.

  9. Hmm, not sure how that got double-posted. Can you remove the dupe please, Roger?

  10. January 12, 2007 by Roger Johansson (Author comment)

    Nick: Fixed. I have no idea how it happened either - it does seem to happen once in a while though.

  11. The WHAT WG Mailing List is a wonderful source of information. Its proceedings are both education and informative.

    It will be interesting to see how the W3C HTML WG accepts (X)HTML5.

  12. I have got to ask, isn’t XHTML supposed to continue the standards tree? Isn’t it supposed to continue as XHTML 2.0?

  13. Has the “required” attribute for form controls been present in Web Forms 2.0 earlier? Anyway, that’s a good one though! Don’t really like all those AJAX and JS workarounds to controll required inputs.

  14. Article and section tags make this online newspaper worker drool. section id=”sports”, article class=”basketball”, etc. rather than div id=”sportsSection”, div class=”basketball”…

  15. @Kyle Korleski: XHTML 2.0 is dead in the water. W3C failed on that one. We’ll (hopefully) get HTML 5 and an XML-ified version of that, similar to HTML 4.01 vs. XHTML 1.0.

    Our documents sure will make more sense with proper use of the new elements - once we can use them across browser-land.

  16. Wow, we can ultimately put an end to the div abuse. As an exercise to familiarize myself with the new elements, I redid the markup of my site in HTML5 and ended up with 1/10th as many divs.

    It seems like section is the low-hanging fruit now. One problem I encountered with it is I found myself applying it to portions of a page wildly varying in scope: individual menus on the navigation bar get the section treatment and yet so does the main content area. Or should the entire content area be designated as an article? Is it a little too soon for me to be worrying about this? (Yes)

  17. I’d seen that list before, it really is quite nice and will make for many more fruitless arguments on whether something has been marked up semantically or not. or ? Ooh.

    And I like the nav idea, though it reminds me of a lot. Also, if section, article, nav and div are all going to behave in exactly the same way, it might confuse a lot of people and simply lead to a new version of divitis, sectionitis for instance.

  18. Thanks, Roger. I will post this info to my Slovak blog quoting you.

  19. I wonder what the nav element will be. If it’s going to behave like a div it would be rather pointless. making it behave like a list would be a welcome change to <ul id=”nav”>, though.

    It’s good that they turn often used ID’s into elements, but I also fear that “section”, in this case, is too generic and would cause the same (ab)use as with div’s.

  20. Rather than create loads and loads of new elements, I would prefer LESS elements and more use of standardised class and id attributes a la mircoformats.

    For example in Ryan’s newspaper example why not just

    div class = “sports section”

    The whitespace indicating that this is two separate classes, section being a ‘standardised’ class and sports being just for that particular site.

    If everybody was to adopt these standard naming conventions for classes (and some such as div class = “footer” already are pretty standard) then things could really start to move forward.

    DAZ

  21. Very interesting. I’m looking forward to work with markup that’s much more semantic than what we have today. What worries me though is the potential for backward compatibility and how they propose to handle it.

  22. I agree with DAZ. Embracing microformats allows much more extensibility than “hard-coding” new elements into HTML 5. If something becomes important enough to implement, the W3C should simply recommend a standard class name that can be implemented by developers immediately, rather than recommending it to browser vendors then… waiting….

  23. What really matters of course, is implementations. Specifically, what will IE implement. An IE with canvas and full SVG support would be fantastic… but maybe not likely :(

  24. @Georg
    @Kyle Korleski: XHTML 2.0 is dead in the water. W3C failed on that one. We’ll (hopefully) get HTML 5 and an XML-ified version of that, similar to HTML 4.01 vs. XHTML 1.0.

    I dont understand how xHTML 2.0 is dead. I thought the draft is still being worked on.

  25. @Anjanesh:

    I dont understand how xHTML 2.0 is dead. I thought the draft is still being worked on.

    Yes, it is (and probably will be by some), and something may actually come out of it one day in the distant future - if/when what remains of the WG manages to put all pieces together.

    Some pretty mixed messages about the whole xHTML 2 “thing” though. Some say: let XHTML 2 rest in peace… and that it is a waste of scarce resources to continue working on it. I tend to agree.

  26. Wouldnt some advertisement tag be useful too? I know the advertisers would like to forbid publishers to put their ads in an ad tag, but such a page would have to be invalid according the spec :)

  27. If that’s all the WHAT WG could come up with I don’t understand the hype. There is nothing original about their proposal.

    section is a new element borrowed from XHTML 2 to give better structure to the document. The W3C HTML WG chose it because div is already in use in a different context. But footer, header, aside (= sidebar?), nav or article are just more sections with different roles. That’s where the XHTML role attribute kicks in.

    I don’t see why you need half a dozen structural elements when one is sufficient. And with the role attribute you are more flexible when adding values since they can be defined by RDF.

  28. Hmmm…

    Do we really need:

    < article > < h2 >Title< /h2 > < p >Text here… < /p > < /article >

    instead of:

    < div class=”article” > < h2 >Title< /h2 > < p >Text here… < /p > < /div >

    Maybe we do… I’m no expert to such extent… But for the moment divs with a few classes did the job well.

    Let’s see what else will come up out of the work of this W3C working group… :-)

  29. January 23, 2007 by Stevie D

    Wow, we can ultimately put an end to the div abuse. As an exercise to familiarize myself with the new elements, I redid the markup of my site in HTML5 and ended up with 1/10th as many divs.

    But did you reduce the number of elements you used?

    Or should the entire content area be designated as an article?

    From what I can gather, you can nest [article] elements. So, for example, a blog page could have an [article id=”blog”] followed by an [article id=”comments”], the latter of which contained multiple articles, each of which being one reader’s ramblings…

  30. Wow, interesting. Thanks for the article!

  31. January 28, 2007 by Andras Nemeseri

    @Martin Kliehm: I totally agree with you.

    Do we really need this when a lot of popular browsers even don’t fully implement CSS 2? Why WHATWG blame W3C for the slow work? They are slow, but browser vendors are sometimes slower then the REC.

    What’s the problem, with the xhtml 2 draft? There is a lot of great and usefull ideas behind it.

    This draft can break the web developpers / browser vendors into two group… I don’t think that’s a good idea and we need it.. or maybe I’m just a shortminded people and don’t see the great posibilities behind this thing…

  32. March 18, 2007 by Jess

    This is all fine and dandy, as I can see the added benefit to expanding the abilities of standard XHTML, my concern is in how slow assistive technologies will be to incorporate these new elements. Currently, assistive technologies are supporting about 85% of HTML 4, and supported less or more on different browsers.

    Instead of spending all this time and effort on developing new coding standards, why not spend some time on “arm-twisting” the assistive technology companies into supporting the current code with a greater precentage and a more uniform borowser coverage.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.