Waiting for 5.0

Michael Dain, Wednesday, December 5, 2007 @ 3:56 pm

I want to thank my colleague Brian for posting in our sister blog (or the main blog, whichever way you look at it) about HTML 5.0 article in a list apart. I have been working on an entry about some persona work we did at World Usabilty Day a few weeks back and have been stuck coming up with something profound, so stay tuned. As it so happened a part of that article also caught my eye and caused me to flare up a bit in disbelief, and it was a different part, so thus my impetus to get this out, since rash reactions make for the best blog posts anyway. Here is the offending statement:

<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>

<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>

When I first read the article that IBM put out on HTML 5, I was smiling for the semantic goodness of all these new elements. Somehow, I imagined this was a way to clear up one of the biggest problems in semantic design, naming conventions and inheritance. In one swoop you could get rid of the scourge of 'classitis, and add a whole level of drop and drag functionality without the baggage of a proprietary solution ala scriptaculous (class='draggable'). I was hoping that you could just create rulesets like;

header {
the box looks like this
}
header h1 {
the logo/branding looks like
}
header ul li {
the 'utility' navigation looks like
}
menu {
the box is like
}
menu ul li {
main navigation looks like
}

Semantically I would then have places on an interface that revolve around specific purposes, and have the alphabet soup of tags (h1, p, ul) which when put in those buckets pick up a purpose and display. Then we need no classes, since you should be able to stick to just the tags that brung you. The descriptive simplicity of not having to worry about #nav p and .nav li but you have menu container, fully ready to accept things that make menuing possible. Anyway, this was the illusion, after reading the example passage in the article I thought:

What? There are two headers? Now how do you manage a header (display:none) situation for a print style? Would it be header class=realheader and header class='subheader? Doesn't that defeat the purpose?

Then of course the p class=byline bit - can't any p within the header be considered a paragraph, why call a byline a paragraph? Why invent a subsidary element, could it be made into a <span> just to keep it clear?

So, I somehow thought that HTML 5 would eliminate the need for custom naming conventions, and perhaps classes and ID's were a thing of the past. Then, the article this made me realize that the tags are not necessarily unique in a page, and therefore the 'hook' quality of: getelementbyID finding a single instance is out the window. Then I wept, as this trashes some of my imagined utility of this addition to the language.

I wanted this because my experience is that XHTML and CSS are not well and truly separated. CSS makes little sense on it's own, and reading someone else's CSS while not impossible, is not ideal. You have to find instances of each element in the production code and piece together the puzzle of how things are used and why. Some programs like CSSedit make it a bit simpler, but since XHTML doesn't enforce good practices, and with little effort, you can 'break' the stylesheet by adding elements without definition, or that inherit unwanted or unintended styles. In your own work, this makes things confusing, in trying to understand others work, it becomes a real pain.

<div id="header">
<ul class="nav">
<li><a href="here.html">Go here</a></li>
<li><a href="there.html">Go there</a></li>
</ul>
</div>
<div id="content">
<div id="nav">
<ul class="sidenav">
<li><a href="here.html">Go here</a></li>
<li><a href="there.html">Go there</a></li>
</ul>
<div class="content">
<p>stuff is here</p>
</div>
</div>
</pre>

an example of a screwy, yet valid page markup

So HTML 5 gives the addition of a few new tags, and the appearance of some semantic 'hooks' that could lead to a better standard (video is welcome), not to mention search engines can spider and parse our sites more effectively. I think Google is already hip to the id='nav' convention - see an earlier post on my site for this. I am confused and somewhat disappointed by the lack of uniqueness to these elements. While I don't understand the DOM hook thing completely, this seems to make things tougher by having to deal with arrays, but perhaps Brian can explain it to me (or us) if it is a good thing after all.

I started this blog with a long history of HTML and the 22 original elements and their morphing into the however many there are in use today. I dumped that part since explaining the history of why text markup and navigational markup are two different beasts so why expect Berners-Lee or any standards body to tackle all the desires we have for the language. My own goal is to have some level of semantic abstraction so I can classify the user experience in words and elements that everyone can agree upon so we can focus on our unique or non standard elements, for the maximum value add. Messing with navigation techniques for the past 10 years seems a bit of a futile endeavor (could they have come up with a <tabs> tag?), and I'm certain not to have contributed as much as some to new ways to interact with a set of information. I suppose along with classes, ID's and the tags we have we are doing pretty well, and my paradise may be your nightmare, so best leave it up to the browser makers. But thats another post.

user experience design

Comments

• Leave a comment
• Comment feed for this post
• TrackBack URL

None so far.

Leave a comment