Thoughts on HTML 5
I’ve just finished taking a look at the working draft of HTML 5 and thought I’d share my thoughts. Clearly, HTML 5 is meant as an evolution of HTML 4, which has both its good and bad points. Accordingly, there are both good and bad parts of the specification. My thoughts are as follows:
- I almost laughed when I saw the
irrelevantattribute. First, because that’s a word that web developers throw around a lot and second because I can’t imagine ever using it. The spec says, “When specified on an element, it indicates that the element is not yet, or is no longer, relevant. User agents should not render elements that have the irrelevant attribute specified.” If it’s not relevant, why is it in the page in the first place? Further, do you know how many people will spell this wrong 100 times before they spell it right? Unless there’s a deeper meaning or requirement behind this attribute, I think it’s just a waste of a section. - The
scopedattribute is a welcome addition to the<style/>element. Being able to apply styles to just a section of the page is something that I’ve personally struggled with mightily. I’m glad to see a logical solution. - I’m not sure what the
<section/>element offers over the<div/>element. I thought the purpose of the<div/>was to indicate a section of the page. If there’s not a clear distinction between these elements, I don’t see the need for a second one. - I like the
<nav/>element. It’s helpful in a number of ways to have an area marked as being for navigation. The accessibility implications alone are outstanding. - I’m a bit unsure of the
<article/>element. As with<section/>, it seems only vaguely different from<div/>and too focused on solving the question of what markup to use for a blog. - The
<aside/>element really pushes the boundaries of marking up literary devices. I’m not sure enough web developers know what an aside actually is. Short asides are typically indicated by parentheses and I don’t see any reason not to keep doing that (seriously). Any element that requires someone to ask an English teacher when it should be used is probably a bad idea. - I understand the concept of the
<dialog/>element but it’s named completely wrong. The point is to markup a conversation between two or more parties. The problem is that the word “dialog”, when in used in user interfaces, refers to small windows that can be interacted with. When I first read about this element, I assumed it was a way to indicate that part of the page is a dialog window outside of the normal flow of the document (which I thought was cool). After reading the rest, I was disappointed to find out that wasn’t the intent. I’d rename this element as<conversation/>or<discussion/>to avoid such misunderstandings. - The
pingattribute on the<a/>element is a stroke of pure genius. We’ve been left hacking solutions for click monitoring for way too long. - The
<dfn/>is another that stresses the understanding of grammatical structure for web developers. The intent is to designate the defining instance of a term, abberviation, or acronym. Does that make sense to you? If it did, give yourself one point; if it didn’t, don’t feel bad, most people won’t get it. Again, any element that leaves people scratching their heads probably isn’t necessary or useful. - Speaking of confusing, I’ve read the section about the
<meter/>element five times now and still have no idea what it’s used for. - The
<video/>and<audio/>elements bring some much-needed sanity to the embedding of media into web pages. - The
asyncattribute is a welcome addition to the<script/>element, allowing it to perform non-blocking code execution. Realistically, this is useful only for a small number of JavaScript files as there are often dependencies between JavaScript files.
The entire specification is insanely long and, interestingly, covers much more than just markup. It also covers related and unrelated DOM interfaces as well as additional JavaScript APIs. I think it’s heading in the right direction, but HTML 5 does miss some things that seem to be issues that should be addressed:
- I’d like to see some treatment of rich text input controls. Right now we all use a hack (an iframe in design mode) that has to be copied over into a form field to be submitted. It would be nice to have this handled natively and have reliable HTML formatting of that content (instead of the per-browser implementations we have now).
- I’d like to see a common attribute that can be used on any element to indicate information related to the element. I’m tired of fighting the custom attribute battle. The fact is that it’s a very common need to include extra data related to an element. I’d propose a “reldata” attribute (short for “related data”) be considered as an optional attribute on all elements. We then, as developers, could use that attribute as we see fit and the document would still validate (for people who care about such things).
So that’s my perspective on where things are with HTML 5. There’s a lot I didn’t cover, and I’d recommend that you read through the whole thing yourself and come to your own conclusions. Evolution is a difficult process, but at least it’s progress.
Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.
Both comments and pings are currently closed.




11 Comments
The irrelevant attribute is intended to be used in web applications, where content may only be relevant part of the time, and that can be modified dynamically with scripts.
The section element differs from div in the way it interacts with the heading algorithm. Using it in conjunction with the h1 (or possibly h2-h6 as well), it allows document structures to be created that aren’t limited to the traditional 6 levels availalbe. It also makes it easier to mark up a section, which on one page (e.g. an article page) may start at level 2, and on another (e.g. an archive page) start at level 3.
The spec already includes the contenteditable attribute for creating rich text inputs.
(P.S. For this comment form, please make sure the spam prevention comments can actually be answered by a real person with minimal effort. The first one I got was about your favourite football team, about which I have no clue and it doesn’t seem to be mentioned on your about page.)
Lachlan Hunt on February 28th, 2008 at 10:14 am
I encourage you to send your comments to the mailing list ( http://www.whatwg.org/mailing-list#specs ). That will guarantee that I reply to the feedback and fix the spec accordingly.
Ian Hickson on February 28th, 2008 at 11:56 am
Thanks, Ian, I’ll post followups to the list.
@Lachlan – As for the question, it’s not that hard to figure out. If you do a search such as "site:nczonline.net favorite football team" the first result gives you the answer.
Nicholas C. Zakas on February 28th, 2008 at 1:12 pm
RE: reldata attribute
A reldata attribute is presumably for use in your private scripting – I can’t see it ever being used by search-engines, browser-extensions, shared js libs, etc.
In that case there already is a more flexible option available:
[button id="toggle"]On[/button]
[script]
if (!reldata) var reldata = {};
reldata["toggle"] = { onText: "On", offText: "Off", initialState: "on" };
[script]
Sean Hogan on February 29th, 2008 at 4:43 pm
Most attributes aren’t used by search engines or browser extensions. What I don’t want to do is create a bunch of script blocks, one for every element on the page that needs extra information, nor do I want to create unnecessary global variables. JavaScript evaluation is a blocking operation that can alter how quickly the page is rendered and the amount of time it takes for the page to become interactive. There’s no need to use it unnecessarily.
Nicholas C. Zakas on March 1st, 2008 at 1:13 am
Maybe my example was misleading – I was trying to keep it self-explanatory.
The typical way one would implement this would be to combine all the reldata declarations in one place, (at the bottom of your file if you are concerned about JS blocking):
[script]
MyPrivateNameSpaceThatIAlreadyUse.reldata = {
toggle: { onText: "On", offText: "Off", initialState: "on" },
boggle: { number: "fish" }
}
[script]
I think this addresses all the issues you raised:
- One script block
- One more variable in whatever namespace you want
- No significant increase to file-size
- Doesn’t slow down page rendering (comes after all content, and anyway, it’s an inline-script)
- No need to parse the reldata attribute
- JS evaluation time will be insignificant (especially since it’s an inline-script)
The advantages I can see to a reldata attribute are all about the author’s maintenance of his files:
- as you read the html code the attribute is more obviously associated with the applicable element
- if you change the id of the element you don’t need to remember to change the script
- you don’t need an id for the element
Do you see other advantages?
You could always just preprocess your file to put the reldata into a script… or just use reldata attribute anyway, because it will probably work forever.
Sean Hogan on March 1st, 2008 at 5:32 am
I think perhaps I also was misleading in my response. I know that there are other ways to accomplish what I want and I’ve tried several of them. The end result is that custom attributes always ended up as the best solution. That then led me head-first into a battle with the standardistas who screamed that the solution didn’t validate. My response was, of course, I don’t care.
If this were XML, then I could just define a new namespace for my attributes and everyone would be happy. Sadly, since HTML isn’t based on XML, namespaces don’t exist and we have no way of adding extra attributes while making sure the document is still valid. The reldata attribute to the rescue!
Nicholas C. Zakas on March 1st, 2008 at 2:39 pm
I think HTML5 creates more problems than it solves. It’s very confusing. There is no logic to it. It’s like it’s a justification of all the bad practice in use today. It takes a kitchen sink approach to markup and thus has an "amateur" feel to it. I am very disappointed that HTML5 is the future of the Web.
Matt on March 1st, 2008 at 11:11 pm
@Matt – I think that’s going a little far. There are some really great ideas in HTML 5, as I outlined in my post. There are certainly some confusing ones, as well. One of the main goals of HTML 5 is to add more semantic value to HTML so that we all don’t resort to use <div/>’s 100 times on a page. They’re going in the right direction on that one, but there’s certainly some rough edges to be sanded down.
Nicholas C. Zakas on March 2nd, 2008 at 2:22 pm
Nicholas, I don’t see the goals of HTML5 as being to add more semantic value to HTML, it’s certainly not an explicitly stated goal of HTML5.
The new elements they do add are very confusing and are begging to be abused. Take the NAV element for example. It can contain anything, including paragraphs or tables. Compare that with the NL element in XHTML2 which is very precise in what it can contain. The SECTION element is just another DIV. ASIDE is … well, I don’t really know what it is supposed to be. ARTICLE only offers margin value. DIALOG, do we really need an element for this, when its structure is identical to DL – how about an attribute on DL that says it’s a conversation, transcript, lines in a play, etc.?
How is HTML5 going to reduce the number of DIVs? Maybe by replacing DIVs with other DIV like elements?
Matt on March 2nd, 2008 at 8:21 pm
I think you’ve actually described it pretty well. The <nav> element is used to contain markup that is used for navigation. I described what <aside/> is, though I agree that it seems kinda dumb. The <dl/> element can be used both for definition lists and discussions right now so its semantic meaning is ambiguous. While I don’t like the name "dialog", I think a separate element is needed to disambiguate <dl/>. The <article/> element semantically means "prose content", as opposed to layout or ancillary information.
Right now, we all use <div/>s for pretty much everything. Replacing them with elements that have semantic value could really go a long way for a more usable, valuable web.
Nicholas C. Zakas on March 3rd, 2008 at 12:54 am
Comments are automatically closed after 14 days.