Simon Willison’s Weblog

Hey Simon, how are we supposed to send you pingbacks? I don't see a URL for that purpose.

Joe Grossberg - 9th July 2003 19:20 - #

The pingback URL is embedded in a link element on each entry page: http://simon.incutio.com/pingback.php - see the Pingback specification for details on how to send a ping.

Simon Willison - 9th July 2003 20:09 - #

Very nice... and I'm in no way trying to detract from the achievement of Doug and Adaptive Path, but I'd disagree with one of the comments you made about it: a great example of best practise structural markup

I disagree. For me, all the extra div and span tags added to the markup make it too "dirty" to give it this accolade. Yes, I know it's impossible to do something like this without them (as I've been finding out over the past couple of days working on a new site) but it does seem a shame to have swapped semantically incorrect tables for semantically meaningless divs and spans. I'd love to be able to do a design like this or any in the CSS Zen Garden and just have a pure XHTML source below - no extra tags needing to be added.

A dream? Yes, and I don't expect it to be done, as from my research it looks to be impossible with the current technology. I'd love someone to prove me wrong!

Peter Bowyer - 9th July 2003 21:19 - #

You can't do it with standard code, but for Mozilla derivatives, XBL does the job quite well.

Jim - 9th July 2003 21:43 - #

Oh come on, a few extra DIVs and SPANs don't instantly make the markup's structure vanish. It just isn't possible to pull off some effects without a few extra elements at the moment.

Why does it matter? Does it harm accessibility? Validation? Go against any standard? It adds a tiny bit of bloat to the HTML, yes, but compared with using tables it's almost nothing.

Making CSS-based layouts without extra elements isn't a mad dream and should be possible - the proposed ::outside pseudo-element in CSS3 should make things a lot lot easier.

Adaptive Path is a lovely design and pretty much as close as you can practically come to structured markup in a commercial site.

Tom Gilder - 9th July 2003 22:18 - #

I agree with Tom. I think the key thing is that divs and spans ARE semantically meaningless. Compare this to tables, which have some pretty hefty semantics attached to them (although to be fair accessible web design practises suggest that a table only becomes a semantic structure if it uses semantic elements such as th, summary, caption and so on) and divs and spans become a far preferable way to add extra presentation. Spans in particular have no semantic value at all, so I see no problem in sprinkling them liberally to achieve presentational effects. Where this approach does fall down is in achieving absolute separation of structure from presentation, but considering elements such as site headers / navigation menus (which are arguable more a part of the site's presentation than key content for each and every page) have to be embedded in the markup anyway true separation is something of a pipe dream.

Obviously the less additional markup the better, but I really don't see it as something to worry about.

Simon Willison - 9th July 2003 23:22 - #

Actually Peter, to answer your question about whether a complex design like that is possible with pure Markup and current technology, the answer is a definite "yes" provided you through Javascript and the DOM in to the equation. With the DOM you can add additional elements to the document at will once it has loaded, so you could concievably use those for the styling. The only problem with this solution is that non-javascript browsers would render the site poorly, but the content would remain completely available and clever use of CSS could apply at least some semblance of style to it even without the additional elements.

Simon Willison - 9th July 2003 23:29 - #

Simon, I find myself disagreeing with you again. Loading extra elements after page load is exactly the same as having those extra elements there to start off with except that fewer people will be able to see them. IMHO this is no different to those people who add deprecated elements in after page load just because that will fool the HTML validator.

I also disagree that these elements are necessary for CSS page design. If you want to pander to the modern browsers then at the moment it is all too necessary, unfortunately, but if you were designing for say, Mozilla, you can use <html> as your background, and <body> can be positioned instead of needing a main <div>. Then you can follow that with such things as positioning your nav <ul> independant of the body, etc..

It gets a bit trickier once you start needing to group elements together, such as if you give the navigation a heading, but in that case I don't see what's unsemantic about using a <div> with an appropriate class or id, as a means of grouping them together. you are, effectively, saying "This is my nav". Of course, if you wanted to get really finicky there's no reason you can't use xml namespaces to add your own elements with specified meanings, but for adding semantic meaning to a <div> it's overkill to have to go to the trouble of setting things up so you can use <myns:nav> instead of just using <div id="nav">.

One other, completely unrelated thing: it'd be nice if we were allowed to use xml:lang in comments.

Lach - 10th July 2003 04:54 - #

There's plenty of cruft that has not the slightest relation to the limitations of CSS2 or the exigencies of his design. Take as a simple example the email form at the bottom-left of the main page:

  <div class="mailbox">     <form id="mailinglist" method="post" action="h ttp://scripts.dreamhost.com/add_list.cgi">       <h3>Mailing List</h3>       <div>Sign up to receive information about ou r latest publications and upcoming appearances.</d iv>         <div>                               <label for="address">Your email address: </label>                     <input type="text" id="address" name="ad dress" size="20" class="text" />           <input type="hidden" name="list" value=" announce" />           <input type="hidden" name="url" value="h ttp://www.adaptivepath.com/publications/subscribe/ announce.php?s=1" />           <input type="hidden" name="emailconfirmu rl" value="http://www.adaptivepath.com/publication s/subscribe/announce.php?s=2" />           <input type="hidden" name="unsuburl" val ue="http://www.adaptivepath.com/publications/subsc ribe/announce.php?s=3" />           <input type="hidden" name="alreadyonurl"  value="http://www.adaptivepath.com/publications/s ubscribe/announce.php?s=4" />           <input type="hidden" name="notonurl" val ue="http://www.adaptivepath.com/publications/subsc ribe/announce.php?s=5" />           <input type="hidden" name="invalidurl" v alue="http://www.adaptivepath.com/publications/sub scribe/announce.php?s=6" />           <input type="hidden" name="domain" value ="adaptivepath.com" />           <input type="hidden" name="emailit" valu e="1" />         </div>                                                                     <div>                                                    <input type="submit" value="submit" clas s="button" />         </div>                                                    </form>                                                                                   </div>                    

With little or no change to the CSS, this could be replaced by

    <form id="mailinglist" class="mailbox" method= "post" action="http://scripts.dreamhost.com/add_li st.cgi">        <h3>Mailing List</h3>            <p>Sign up to receive information about  our latest publications and upcoming appearances. </p>        <fieldset>                               <label for="address">Your email address: </label>           <input type="text" id="address" name="ad dress" size="20" class="text" /><br />           <input type="hidden" name="list" value=" announce" />           <input type="hidden" name="url" value="h ttp://www.adaptivepath.com/publications/subscribe/ announce.php?s=1" />           <input type="hidden" name="emailconfirmu rl" value="http://www.adaptivepath.com/publication s/subscribe/announce.php?s=2" />           <input type="hidden" name="unsuburl" val ue="http://www.adaptivepath.com/publications/subsc ribe/announce.php?s=3" />           <input type="hidden" name="alreadyonurl"  value="http://www.adaptivepath.com/publications/s ubscribe/announce.php?s=4" />           <input type="hidden" name="notonurl" val ue="http://www.adaptivepath.com/publications/subsc ribe/announce.php?s=5" />           <input type="hidden" name="invalidurl" v alue="http://www.adaptivepath.com/publications/sub scribe/announce.php?s=6" />           <input type="hidden" name="domain" value ="adaptivepath.com" />           <input type="hidden" name="emailit" valu e="1" />           <input type="submit" value="submit" clas s="button" />         </fieldset>                                              </form>                                         

Now, OK, we didn't save a lot of bytes there, but the <div>s that we eliminated were pure cruft; they served no purpose either semantically, or in terms of site-design. Whack away at the rest of the page in the same spirit, and you obtain a markup that is considerably more transparent (I'll eschew "semantic") and more-easily maintainable.

P.S.: you should make our lives easier and permit the <pre> element.

Jacques Distler - 10th July 2003 07:00 - #

I DON'T WANT NO MORE EMAILS. THANKYOU BARBARA ROMAN

BARBARA ROMAN - 12th July 2004 03:04 - #