Log in

Ramblings Journals I Read Calendar The Dirt MegaZone's Waste of Time Older Older Newer Newer
KBlogger: Tidy Up Your HTML - MegaZone's Safety Valve
The Ramblings of a Damaged Mind
KBlogger: Tidy Up Your HTML

Hello again everyone. Sorry I didn't post something earlier this week, I've been very busy with work and dealing with a lot of frustration trying to buy a house. With the closing postponed twice and lots of just unbelievable events, it hasn't been a fun week. The good news is that I finally closed today. Now I have the pleasure of moving... happy happy, joy joy. Well, anyway, this is supposed to be a tech blog, not my Live Journal - so, let's get to it.

So, if you've been reading my entries you know I have a fondness for the standards. I know a lot of people dismiss the need for standards and say it is too much trouble to deal with. But, in all my experience, when someone does bite the bullet and begins applying the standards to their site, and they begin to reap the benefits, they kick themselves for not doing it earlier. I'm not going to lie and say it is trivial to do, it is like breaking any bad habit and retraining yourself. If you're a newbie you're actually better off, you can train yourself from the start to do it the right way. The more bad habits you have to unlearn, the harder it is to learn to do it the right way. I had to force myself to stop slipping into old habits when I started using the standards. And sometimes standards change too, or something that wasn't covered gets standardized - and not in the way you had been doing it.

For example, it used to be recommended to write your HTML element tags in ALL CAPS to help visually distinguish them. So you'd have <BODY>, <HEAD>, etc. But them XHTML came along, which standardizes HTML as an XML implementation. There are benefits to doing things this way, and I've embraced XHTML 1.0 for all my work. But XML standardized elements in lower case. So <BODY> is no longer valid, you have to write <body>, <head> etc. After ~10 years of writing it the other way, it took me a while to get used to not hitting shift when typing an element name. Oh well, such is life.

Odds are if you're reading this you're not starting from a clean slate, you already have some web content. Now, if it is already standards compliant, I applaud you. But knowing the state of the web, you probably started off working through trial and error. You copied from other sites, used FrontPage, and just poked at things until they looked decent enough in IE, and maybe some other browser. Now you're sophisticated, worldly, and you like to play the field. You know there is more than one browser in the bitstream, and you want to be able to share the love with any and all of them. You've learned about the standards for XHTML and CSS, and you know using them would make you compatible with all the finer browsers.

But you have a ton of pages you've already created and the thought of manually cleaning up that mess makes running away to join a monastery sound oddly appealing. Going back and updating all of the old pages is something no one likes doing. Plus there is always new work waiting to be done, so when do you have time to slog through all of the old pages to manually fix them? If only there were some tool to help you.

There is, and that tool is HTML Tidy. HTML Tidy was originally created by Dave Raggett of the W3C as a tool to help people 'tidy' their HTML up - hence the clever name. The tool was open sourced and turned into a code library, which is how it stands today. That library has been incorporated into a number of tools - from standalone Tidy applications, to text editors with built in Tidy support. It isn't going to save you all of the work, but it can sure reduce the amount of manual cleanup you'll need to do.

On the current homepage for HTML Tidy are links to many libraries, tools, etc, that incorporate HTML Tidy. Just look at the list running down the right side, one is probably right for you. The historic homepage is worth looking at if you're curious.

I'm planning to do a full entry on the Firefox browser extensions I find very useful, but I'll mention one in this entry since it is HTML VALIDATOR (based on Tidy). Yes, that's the full name. This embeds the Tidy engine right into the browser and it will validate every page you load. Down in the lower right-hand corner a green check means the page is valid, a yellow '!' means there are warnings, and a red 'X' means there are errors. I find this visual cue extremely useful as I'm developing pages. I should ALWAYS see a green check, if I'm doing things right, so the second I see something else I know I've goofed.

Hover over the icon and you'll get a tooltip that gives a little more information, and it updates View Source to to have multiple panes which show the warnings and errors. You can even use Tidy to clean up the errors for you, right in the browser.

You know how I'm writing this? As 'fifth-entry.html' in Notepad, with it open in Firefox. I save the file and reload the browser periodically to check myself. And I just caught a mistake, I typo'd an </a> tag in the previous paragraph, breaking one of the links. The extension caught it, told me right where I goofed, and I fixed it in seconds. If you do development and you use Firefox (and you do test in Firefox, right?), you should check this extension out. For a very simple tool I find it extraordinarily useful.

Tags: , , ,
I am: tired tired
Current Media: Nine Inch Nails: The Fragile (Left) - We're In This Together

bdragon From: bdragon Date: June 18th, 2005 07:32 pm (UTC) (Direct Link)
I've always been a big fan of this.
zonereyrie From: zonereyrie Date: June 18th, 2005 10:07 pm (UTC) (Direct Link)
Yeah, I'm trying to thinkg of a way to slip it into the corporate pages I do. ;-)
cos From: cos Date: July 11th, 2005 03:53 pm (UTC) (Direct Link)
and you do test in Firefox

Unfortunately I have to avoid Firefox because it's insanely buggy on OS X. Is there a good reason why I should be using it? And if so, any chance they'll take the OS X version seriously enough to make it usable?

(I don't do much web development currently, only occasion web pages for political things I'm working on)
zonereyrie From: zonereyrie Date: July 11th, 2005 09:14 pm (UTC) (Direct Link)
I know others who use it on MacOS X OK - what kind of problems have you seen? And is it with the latest?

The best reason to test with it is that it is the #2 browser, by far. IE is still #1, of course, but Firefox is #2 and growing - plus the Gecko engine in Firefox is used in Mozilla Suite, Camino, and other browsers. So if it works in Firefox you're likely OK in those. Opera is #3 but trails Firefox by a wide margin.
cos From: cos Date: July 12th, 2005 04:43 am (UTC) (Direct Link)
The most recent time I downloaded a new version of Firefox, gave it a chance for a while, and gave up in frustration, was probably about a month ago.

A partial list of problems:
  • If you click anywhere inside the body of a page, you get an active text cursor on the page itself (not on form elements - this happens even when there is no form), and lose the ability to scroll with the arrow keys, since arrows are now moving the cursor. You can undo that by switching to a different tab.
  • When Firefox first starts up, usually only the "Firefox" top level menu appears. "File", etc. aren't there until you switch to some other app, then switch back.
  • Spurious problems when hiding and un-hiding. Sometimes dialog boxes, popup windows, etc. get "stuck" and cannot be closed or hidden at all. Sometimes if you try to hide Firefox it won't hide. Other times it's finicky about unhiding.
  • About half the time, if you open a pulldown menu that's part of a form (like the ubiquitious state menus in address forms), after you make your selection, the area previously covered by that menu remains white - and stays white even if you switch to other apps, hide firefox, etc. the only way to restore that portion of the display to usability is to pull up the menu in firefox again, make a selection, and hope to get luckier this time. this also happens when Firefox offers you a pulldown of suggestions for a text entry field.
  • If you're entering data into a form and click the mouse outside the element you're currently typing into / making a selection in, it does not finish your entry / make your selection and honor the mouse click. Very annoying if, for example, you're trying to use the mouse to select the next form element you wish to type into.

    There's a lot more. Basically it feels like a poorly thought out hack job based on something that looks really neat, and is too frustrating to use.
  • zonereyrie From: zonereyrie Date: July 12th, 2005 06:04 pm (UTC) (Direct Link)
    Wow, that does sound shitty. I've never heard of it doing that kind of thing on MacOS before, I wonder what's wrong...