Improve your web design - tidy up your HTML & CSS code


Updated: July 6, 2009

There are two ways to go about web development: the text editor way and the GUI editor way. The first way is intended mainly for more advanced developers, who understand the code, know what they want and do not require visual aids to build their web pages. They work with programs like vim, emacs, Notepad++, Kate, or other text editors and simply load webpages into browsers when they feel the need to see the end result of their work. This approach is minimalistic, efficient - and harder.

Teaser

The second way is what most people do: use some sort of a program that usually hides the code away from users and lets them focus on content. Programs used for this purpose are known as web editors. Moreover, they fall into the category of What You See Is What You Get (WYSIWYG), meaning that the page displayed inside the editor's GUI will match the end result. Some of the more popular titles include KompoZer, Dreamweaver, Quanta, Bluefish, and other friendly web development software that let people approach the subject with the mindset of Lego building. The WYSIWYG editors are far easier to work with than text editors, but they are usually less efficient.

And they leave behind a lot of crud.

When you work with text editors, every byte of code in the web files has been placed there by you. On the other hand, web editors usually quite liberally pepper the code with auto-generated meta fields, self-promotional comments and lots of unneeded breaks and whitespaces, rendering the code much bigger than you intended.

Most people will not notice or care about the surplus, but if you like to go about your web development in a clean, orderly, spartan way, but still want to use GUI editors, there is a number of tools that can help you maintain lean and neat code.

These tools are known as lint/tidy utilities and are used to render the output of HTML and accompanying files smaller, cleaner and better laid out. In this tutorial, I'm going to present a collection of these utilities, most of which I personally use, so that you can too enjoy a more elegant and cholesterol-free web development. Let's start.

HTML Tidy

HTML tidy is the probably the most popular HTML tidying utility available. This little program can do wonders with your code, helping fix invalid HTML, removing extra whitespace characters, improving layout and indentation of the final markup.

It can be used on all major operating systems. Furthermore, most web editors are capable of running tidy from within their own GUI, making it easier to both work and maintain clean code.

Here's an example in Bluefish on Linux Mint 6 Felicia:

Bluefish

Here's an example of Tidy configuration in KompoZer on Windows XP:

KompoZer Tidy options

For more about these two excellent web editors, please check this article. A popular Windows text editor Notepad++ comes with the Tidy plugin already installed, so you can edit the code without leaving the editor.

Notepad++ options

Here's an example of how Tidy works. I'm going to write a few words in a blank text document and then run Tidy against it. Not only will Tidy beautify the output, it will add the missing, necessary HTML (XHTML) tags and create proper indentation:

Before:

Before

After:

After 1

Or this:

After 2

You can also convert HTML to XHTML, convert to or reindent XML, use wrap, and even clean Microsoft Word documents!

In general, Tidy is a command line utility. All it takes to run is to invoke it against a desired HTML file by running tidy filename.html. The HTML file should not have any dots, except the expected extension, or whitespaces in its name, as these can break the functionality of the utility. Which stands to reason and general "good' coding guidelines.

Working

Similarly, if you invoke Tidy inside one of the web editors, depending on how they're configured, you may get a long report of all discrepancies, errors and warnings found. Bluefish will do this for you:

Tidy output

Get Tidy

Tidy comes in many shapes and forms. The best source of information is the official page. You're also welcome to take a look at Dave Raggett's page, the original developer, although development, fixes and improvements in the project are now all consolidated at the SourceForge site.

Linux

Tidy comes included in the repositories of most, popular distros, so obtaining it should not be a problem.

Tidy install

Windows

Windows users have several choices: they can use Notepad++, for example, or go for a Windows executable, which can be then invoked either from the command line against HTML files or use a web editor like KompoZer and call it via one of the plugins.

If you dislike command line, Dirk Paehl has also developed a GUI version, also available on other operating systems.

GUI Tidy

Online services

Tidy can also be used directly online, no installation required. Several websites offer this service, including the W3C international WWW standards organization itself. You merely need to link to the URLs of your HTML files and run them through Tidy.

Online

Firefox extension

There's also a Firefox extension available, although for Windows only. The extension is quite hefty, 2.6MB of downloads, but it provides you with extended validation capabilities inside your browser. You should also visit the official site for more details.

Valid

Errors

Results

Then, there's also Java, Python, PHP, and Ruby version of Tidy. The list is almost endless.

CSSTidy

CSSTidy is an open-source CSS parser and optimizer. Like HTML Tidy, it is used to clean the code of CSS files, convert property strings to hex code where available, remove whitespace characters, remove and merge duplicate properties, and more. This way, CSSTidy can bring down the total size of CSS files by tens of percents.

CSSTidy is a cross-platform solution, available on Linux, Windows and Mac. C++ and PHP versions are also available. There's also an online formatter and optimizer, available in five languages, very similar to what we've seen with HTML Tidy.

CSSTidy online

Like HTML Tidy, CSSTidy is a command line utility and extremely simple to use.

CSSTidy

Here's an example of CSSTidy optimizing a CSS file:

CSSTidy done

Weblint

This is another HTML optimization utility you may want to consider, although it is less powerful and less portable than HTML Tidy, since it only works with HTML 4.0 documents. It comes included with Bluefish. In general, Weblint is only available for Linux (in the repos).

Weblint install

Weblint working

Conclusion

HTML and CSS tidying utilities are very useful, whether you're an amateur or a professional developer. If you strive to create high-quality content that meets the strict international standards of compliance, you should consider using them.

Not only will they help create a better laid output and make the files more compact, they will force you to change the way you think and work, by adhering to web standards. You will improve the overall quality and consistency of your web documents. And your readers will be able to enjoy first-class content, without worrying about how the output may look like in this or that browser, on this or that resolution.

If you want to enter the world of web development or are making your first steps in it, this is the best time to consider using HTML Tidy and CSSTidy. Not only will you make your own work more pleasant, you will help the big world of code become a tiny bit better. Hey, every humble contribution matters.

Cheers.

RSS Feed icon

del.icio.us del.icio.us stumbleupon stumble digg digg reddit reddit slashdot slashdot



Advertise!

Would you like to advertise your product/site on Dedoimedo?

Read more

Donate to Dedoimedo!

Do you want to
help me take early retirement? How about donating
some dinero to
Dedoimedo?

Read more

Donate