Cleaning Up Your HTML and CSS Code

Dirty Markup interface for cleaning html, css, and javascriptTeaching HTML Fundamentals at Clark College in Summer Quarter 2012 was a step back into history and a good learning lesson for me about teaching but also about HTML.

I’m sharing a lot of the tutorials and guides I created for the class here which you can find in various categories but specifically under the HTML tag.

I’d like to share with you one of the great tools I uncovered. It’s called Dirty Markup and describes itself as the “Tidy and Beautify your HTML, CSS, and JavaScript code tool.”
Continue reading

Advertisements

Tutorial: Tidy Your HTML and CSS Code

The following is a tutorial for the HTML Fundamentals Class for Clark College. The information pertains to all web design, development, and WordPress fundamentals in WordPress Theme and Plugin development.

There programs designed to "tidy" your HTML and CSS into a format that meets typical standards for code layout. These take hard-to-read markup (code) and clean them up into a consistent format.

These tidy programs will not fix your broken code, but they may identify errors to help you fix it yourself.

Example of Tidy HTML cleaner before and after

Tidy programs were originally created by Dave Raggett to help clean up the HTML code. HTML TIDY now supports HTML5 and HTML exported from Google Docs, Word, and other publishing programs.

There is now a community supporting TIDY and you can learn more on TIDY Sourceforge Project.

There are also CSS TIDY programs. These work the same as the HTML versions. They include: CSSTidy and CSS Formatter and Optimiser/Optimizer (Online).

TIDY is available for cleaning up online or offline, and is incorporated into many text editors and programming editors. it is available for a variety of operating systems and in different programming languages such as Java, Perl, and Python.

To use these, follow the instructions provided by the developer. Always save a backup of the original file, called "about.bak" or something similar, just in case.

For online versions, it is as simple as uploading the file to be cleaned or pasting the file contents into the form. Copy the cleaned code and paste it into a copy of the file name or create a new version of the file and rename it to the desired name.

Learn More About TIDY