waffle

Waffle is a weblog.
The author of Waffle, some guy in Sweden, also occasionally writes stmts.net.

Now in glorious HTML5

From this moment on, Waffle is served in HTML5.

Semantically, this is HTML5 with as much HTML4/XHTML1 as needed to get past the current browsers, and I’m a little bitter about that. There were very few markup changes needed, a testament to HTML5′s progress and ultimate idea. Where XHTML2 is going is ditching almost everything in terms of backwards compatibility but not actually including anything useful in the additions. HTML5 has ditched everything terrifyingly deprecated, kept the rest, and introduced new elements that are truly useful and truly usable.

Examples of those items include <section>, <article>, the tag-team tag team <header> and <footer>, <nav> and <dialog>, which utilizes <dt> and <dd> pairs previously seen only in <dl> (definition lists) to finally standardize written dialog.

Many of these elements would have been tremendous boons to the <div> soup that makes up today’s Waffle. However, major browsers consider the new block elements to be self-closing, self-containing, <br>-like void elements, and this wrecks havoc in the document tree, ruining CSS selectors and other things as a result. So for now, the <div>s will have to stay. It’s not invalid, but it’s a suboptimal use of the specification.

HTML5 keeps some older elements but strip them of any actual special rendering. <hr> is intended to embody a thematic break, rather than its eponym, the horizontal rule, and is void of any noshade attribute, for example. <font>, everyone’s favorite, gets to hang around in another release, but this time as a compatibility crutch for WYSIWYG editors only – everything else is deemed deeply non-conformant. Every detail has been cared for – even XHTML-style /> endings of self-contained tags are compatible with the spec.

HTML5 also brings to the table some order in the anything-goes fields. There’s a recommended ‘feed‘ value for the link attribute rel which designates that the element in question is a feed, leaving the previous standard alternate free to flag the link as also being the alternative to this very page. Predefined classes are suggested for the intention of clearly earmarking various elements on a page – a marvelous idea for an attribute popularly only suggested to serve as a CSS selector hook.

Perhaps most amazingly, HTML5 also specifies a whole lot of other stuff: the DOM (Document Object Model; as used in Javascript and other things) representation of most elements; the tokenization and parsing stage that takes the HTML from text to internal structure inside the browser, ready for processing; the painstaking demands of the modern browser’s capabilities as regards getting from one page to the next and providing full access to the metadata that’s hidden inside a well-constructed HTML5 page; the establishment of a communications interface to provide better network capabilities than the variably-implemented XMLHTTPRequest Javascript object can get you; and perhaps most of all, the ubiquitous striving to specify every important detail where the previous W3C specs just provided a few weakly-phrased sentences in guidance.

There is no doubt in my mind that HTML5 is the thinking man’s way forward in HTML development. The W3C would be wise to just move the WHATWG process over to their domain if they want to get a successful new HTML standard rolling.

Comments

  1. [...] waffle: Now in glorious HTML5 “HTML5 has ditched everything terrifyingly deprecated, kept the rest, and introduced new elements that are truly useful and truly usable.” Let’s hope so. [...]

    By Filter for 26/3 2007 - Felt · 2007.03.26 07:56

  2. This is really exciting. One can only hope that browser makers fully recognize and implement HTML5 (and properly) in a timely fashion.

    By http://openid.aol.com/chiptmatt · 2007.03.26 16:08

  3. You’re marking up your posts like so:

    <article> <header> </header> <section> </section> </article>

    Is there any semantic reason for the section tag here, or is it just a replacement for your existing div?

    If there is a semantic purpose for it, wouldn’t it be more proper to have the header be a child of the section? That is:

    <article> <section> <header> </header> </section> </article>

    The spec, afterall, describes a “section” as “a thematic grouping of content, typically with a header, possibly with a footer.”

    But then wouldn’t the nested article and section tags prove redundant, both structurally and semantically?

    I’m not trying to be a total dick here—I’m honestly interested in the discussion. (And, really, can talk of semantic markup go by without a modicum of nitpicking?)

    I think my question boils down to this…

    Isn’t using section this loosely (i.e., merely to indicate that ‘this group of paragraphs belongs together in a group’) effectively as unsemantic as using div for this purpose? After all, div itself does nothing if not loosely indicate a grouping of content.

    And, if this is indeed the case, why not just go ahead and use the unsemantic div in this instance (if you must—though better, of course, to strive to do away with it altogether) and reserve section for more meaningful uses?

    By http://protest.myopenid.com/ · 2007.03.26 18:33

  4. To reemphasise this: I’m marking up my articles (in commented-out pseudo HTML5 tags – check the source) with <article><header></header><section></section></article>.

    The header includes metadata on the article like the title and is thus very much a part of the article. The article text itself is inside <section>, which is my way of saying “this is a section of the article that’s not a header nor a footer” – it’s the only section of the article that’s not a header nor a footer, but that doesn’t really change anything.

    My main excuse for using <section> is that it’s the only way I – or anyone who reads this, my <body> has a special id so that you can restyle this page as you wish with user stylesheets – can set CSS rules for just the article text, should I want to. Every other solution involves setting rules on the entire <article>, and then undoing them on the <header> or the bread text, as applicable.

    In HTML5, at least, <div> has much less semantic-fu than <section>. I have always myself considered <div> the block element cousin of <span> – something to which you can affix classes without adding any extra semantic weight at all. The new thing in HTML5 is that you have a choice between the <div> and a range of other elements, including <section>, that actually carry semantic weight.

    That there are very few <div>s left in my supposed HTML5 source code is a testament to the spareness of waffle, not evidence of some kind of <div><section> search-and-replace.

    By Jesper · 2007.03.26 18:59

  5. Thanks for the response.

    My main excuse for using <section> is that it’s the only way I… can set CSS rules for just the article text, should I want to.

    To be clear, I wasn’t really saying I had any issue with the use of any such structural element here. Indeed, I had suspected it was probably either CSS- or CMS-related, and that’s understandable. Nor did I get the impression that you are necessarily just find-and-replacing div-soup with a section equivalent.

    I just think that, all desire for leveraging that sweet semantic HTML5 goodness aside, div would actually be the better choice for this element.

    You say yourself that the only (or, perhaps, main) reason for the element is to provide a structural foothold for your CSS. And you also note that this is exactly what the div element (not deprecated in HTML5) is good for:

    I have always myself considered <div> the block element cousin of <span> – something to which you can affix classes without adding any extra semantic weight at all.

    The question is, does replacing a non-semantic div element with a section element in this instance actually add any real semantic weight?

    Consider the following three alternative sets of markup:

    <article> <header>header text</header> <section> <p>content</p><p>content</p> </section> </article>

    <article> <header>header text</header> <div> <p>content</p><p>content</p> </div> </article>

    <article> <header>header text</header> <p>content</p><p>content</p> </article>

    What is gained by using section in the first example?

    Insofar as the section block is not explicitly associating the header with the content (which is what I gather from the spec section is intended to be used for), all three look to me to be effectively saying the same thing: this is (a) an article, containing (b) a header, and (c) two paragraphs of content.

    Again, from the spec:

    The section element represents 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.
    Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

    Each section element potentially has a heading. See the section on headings and sections for further details.

    If a section has a heading, section element should associate that heading with the content—it should contain the heading. Otherwise it’s no more semantically meaningful in that context than a div.

    If I’m starting to sound shrill, I should note that I’m only dwelling on this because I find myself in the midst of a redesign of my own site at the moment and thus spending inordinate amounts of time dwelling on the intricacies of the Proper Semantic Way®.

    In any event, HTML5′s semantic goodies look quite tantalizing and I applaud you for jumping on board so early.

    By http://protest.myopenid.com/ · 2007.03.26 21:03

  6. In my interpretation, the text of an article is a distinguished section – of the article itself, naturally, and not of the containing page. The <article> element does contain the heading (within <header>), but I consider the text a section of the article in its own right to the point where I’m happy that I will be able to change the <div> element containing it to the <section> element in the future.

    The second part of your quote is the example the spec gives – what the spec actually dictates as a requirement to conform is this part:

    The section element represents 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.

    In this, I believe my interpretation is valid. Of course, you’re free to disagree, and I don’t claim to own access to the ultimate truths in semantic markup, but I ask you to consider that I’ve thought about this a lot, and that I truly do consider the first of your three examples the best, for reasons I’ve outlined above.

    By Jesper · 2007.03.26 21:31

  7. [...] waffle → Now in glorious HTML5 (tags: html essay todo) [...]

    By links for 2007-03-27 at found_drama · 2007.03.27 01:33

  8. [...] http://waffle.wootest.net/2007/03/24/now-in-glorious-html5/ [...]

    By Coffee Powered Musings » waffle ? Now in glorious HTML5 · 2007.04.04 19:34

Sorry, the comment form is closed at this time.