Revisiting Tidy

By Blane Warrene

I was in a situation recently where I was working remotely with none of my own equipment and had to edit a rather lengthy article supplied in Microsoft Word HTML.

While Word is easily considered one of the best in the word processing field, the majority agree it aboslutely stinks as an HTML generator. Being required to post this article in as standards-compliant format as possible, I strained at the the thought of manually removing several hundred lines worth of code.

Tidy comes to the rescue! Many of us may have used Tidy individually in the beginning — however it and variations on its function have now been built into so many web development tools we take code cleanup for granted.

I was quickly able to drop the HTML source from the article in question into Tidy and output pristine HTML — saving time and reminding me why I like to keep it simple. Tidy is an excellent example of the KISS theory and why it works for many open source software solutions – keep it simple, focus on a niche and do what you do well.

I happen to keep Mac Tidy, managed by Terry Teague, around on my own gear when not using Macromedia Dreamweaver and BBEdit. The original Tidy resided with the W3C and the current project has been handed off and can be found on Sourceforge.

  • there is now a tidy function built into the Firefox web-developers toolbar…

    it is simple and easy, and free :)

  • easy

    there is? where in the toolbar?

  • when you do a view source… there is a tidy button inside that interface…

    I am pretty sure you have to install the developer tool bar though, you might double check me on that…

  • Sergeant

    Have it installed but can’t find it!

  • here is an image that I have when I push the view source button…

    and instead of the button saying tidy it actually says… “Clean Up..”
    sorry about that ….

  • in the image above you can see in the bottom right corner the “Clean up the page…” button

    that is what I was refering to….

  • Anonymous

    Can you post a link to the toolbar?

  • easy

    got it, I kept looking under ‘Validate HTML’, but it’s actually under ‘View Source’ as you said.


  • CodeLes, I think you’re actually referring to a separate extension by Marc Gueury called (strangely enough) HTML Validator.

    It is cool though.

  • kyberfabrikken

    Shamelessly I would like to draw attention to a petproject of mine :
    Realtime code-cleanup in-browser widget. It’s based on feeding the html through a XSLT sheet and then loop it back to the source-document. The resulkts are quite good, and given a better XSLT, the engine could easily be reproduced on other platforms (anything capable of processing a XSLT)

  • sorry if I was mistaken about what the product exactly was… it seems similar though… anyway, inrequest to a link below is a link to the firefox extension library for developers, there are a lot of cool things there, the color Picker is very helpful, and there is also a CSS editor for live CSS editing, I suggest this for anyone serious about working with CSS, unless you have already mastered it ;)


    hope this helps

  • oops I seem to have messed up the link above…. sorry
    [URL=]Firefox Extensions[/URL]

    hope that works

  • Sergeant

    mm, I don’t have the [Tools] menu on my version. Is that a new feature?

  • I have FF 1.0, but not sure what version of the Developer Toolbar I have installed, fairly new…

Get the latest in Front-end, once a week, for free.