Mark IJbema's Blog

Entries for October 2004

Displaying html structure

27th October 2004, terribly late | 2061 comments

Two days ago a read a "post on Angie McKaigs Blog":http://www.angiemckaig.com/archives/2004/10/24/assortedsweets20041024/index.html referring to the "3d CSS Zen Garden":http://www.stuffandnonsense.co.uk/archives/3dcsszen_garden.html of Malarkey. She also said:

bq. What would be really cool is if someone could make a script that would do this with any web page, complete with the pretty graphics.

Which i did, but without the pretty graphics, since that's just css and code fiddling. A small difference with Malarkey's picture is that i show all elements, so if you have multiple tags with the same (or no) class, i show them all. Also, it has some other shortcomings which i intend to fix in a next version.

So here is the "script":http://www.markijbema.nl/static/htmlstructure/showstructure.cgi , here is the "highlighted source":http://www.markijbema.nl/static/htmlstructure/code.html and here is the "downloadable source":http://www.markijbema.nl/static/htmlstructure/show_structure.pl.txt.

Your mileage with the results may vary. How usable the rendering is really depends on what elements a site uses for the structure. A few examples.

  • "CSS Zen Garden":http://www.markijbema.nl/static/htmlstructure/showstructure.cgi?url=http%3A%2F%2Fwww.csszengarden.com%2Fzengarden-sample.html
  • "Anne van Kesteren":http://www.markijbema.nl/static/htmlstructure/showstructure.cgi?url=http%3A%2F%2Fwww.annevankesteren.nl%2F

The second isn't really helpful of course. So i'll make it possible to define what to display as block, what as semiblock, etc in the form in the next version.

Update: What i forgot to mention is that it only works with XHTML

Work in progress

12nd October 2004, just after midnight | 4 comments