Tidy UI for Windows

For PDF version of this resource click on TidyUI4Windows.pdf.

Tidy UI is a free application available for download. It cleans up excess HTML markup. This application is a helpful tool if you do not have access to a web authoring tools with built-in Tidy capabilities.

You must download and install Tidy UI on your Windows computer. To download go to http://users.rcn.com/creitzel/tidy.html#tidyui. Next, After install the application by unzipping the archive file in the location of your choosing. Then open Tidy UI.

If you have used this tutorial and you saved your Configuration Settings, go to Step 8.

Step 1: DOCTYPE

Microsoft Word’s “Save as Web Page...” option does not include what is known as a DOCTYPE statement in the resulting file. For pages to validate or pass Priority 2 Checkpoints for accessibility it is required. Tidy adds a DOCTYPE.

  1. On the left in the area known as the “Configuration Settings” double-click on doctype.
Step 2: Edit DOCTYPE
  1. Select transitional from the drop-down list. NOTE: You can leave this setting on auto if you prefer but if you might edit the HTML later this tells Tidy which format you prefer. Strict has a more rigid set of rules to follow so many authors use Transitional.
  2. Click OK.

For the next set of configuration settings the default is “no”. You will need to change each setting to “yes”.

Step 3: Bare
  1. Double-click on bare.
Step 4: Select “yes”
  1. Select yes from the drop-down list.
  2. Click OK.
Step 5: Show Styles

Repeat Step 3 & 4 for: (not illustrated)

  • clean
  • word-2000 (you may need to scroll down)
  • logical-emphasis
  • output-html OR output-xhtml

NOTE: It is possible to select “yes” for both the output-html and output-xhtml but you will not get the appropriate doctype header if you do.

Step 6: Save Configuration
  1. Above the Configuration Settings, in the lower menu, click the Save icon.
Step 7: Save As
  1. Locate the destination folder. NOTE: Our tutorial shows saving the Configuration Settings in the Tidy application folder.
  2. Type a file name. Make sure it retains the .tidy extension. Our illustration shows cleanMSWord.tidy.
  3. Click Save.

Saving the Configuration Settings is not a requirement to use Tidy to clean your .htm or .html files. If you will be running Tidy during separate sessions it will save time.

Step 8: Open Configuration
  1. Above the Configuration Settings, in the lower menu, click the Open Folder icon. NOTE: The tool tip will read “Open existing Config file” when you move your mouse over the icon.
Step 9: Select Configuration
  1. Locate the folder the Configuration file was saved to.
  2. Select the file. Our illustration shows cleanMSWord.tidy.
  3. Click Open.
Step 10: Open HTML (or HTM)
  1. Above the Configuration Settings, in the upper menu, click the Open Folder icon. NOTE: The tool tip will read “Open HTML” when you move your mouse over the icon.
Step 11: Select HTML File
  1. Locate the folder the HTML file (MS Word called it web page) was saved in.
  2. Select the file. Our illustration shows StyledWithStylesMenu.htm.
  3. Click Open.
Step 12: Tidy!

You should see code in the right side of the Tidy UI interface.

  1. Click Tidy!.
Step 13: Replace

You need to tell Tidy to Replace the old code with the new.

  1. Click Replace. NOTE: This will change the display to show the bottom of the document rather than the top. See illustration for Step 14.
Step 14: Save Tidy Version
  1. Choose File : Save As : HTML... .
Step 11: Save As
  1. Locate the destination folder.
  2. Type a file name. You can choose to overwrite the original or keep the original by giving this one a different name. Our illustration shows StyledWithStylesMenu.html.
  3. Click Save.
Page Maintained By: ctl@uncc.edu