Online Service to Cleanup HTML Formatting

Question

There are plenty of services online that will color-code and "prettify" your code for you - I'm not interested in that for this question. I've taken over for a previous developer who loves seperating each line of markup with 3 or 4 empty lines, along with using spaces rather than tabs for indenting. This is very opposite to how I (and I think most others) operate.

Is there a service online that can remove empty lines, and handle indentation for me? I could write my own script to do this, and perhaps I will, but if the service already exists then I would much rather use them for the time being.

Convert this:

<div class="className">

   <img src="images/one.jpg" />

      <p>Foo

               <img src="images/two.jpg" />         


            </p>

</div>

To this:

<div class="className">
    <img src="images/one.jpg" />
    <p>Foo <img src="images/two.jpg" /></p>
</div>

Answer 1

Visual Studio does this. It creates totally crap bloated HTML and then formats it nicely for you :)

Answer 2

Are you using Visual Studio (or have access to it?) Then you could just do a "select all" code, then right mouse click -> format selection

Answer 3

HTML Tidy should work for you. The original Tidy is a standalone program.
There is also a library and an online version.

If you set "indent" to "YES", Tidy indents your code and also removes empty lines.

Answer 4

HTML Tidy provides an online service.

Answer 5

There is a python module call BeautifulSoup http://www.crummy.com/software/BeautifulSoup/ which is doing this very well. It is not online but it worths a try

Answer 6

Hm I think the Tidy HTML libraries can help you with your problem. Especially the HTML Tidy Online but also the other Tidy Projects e.g. html tidy on sourceforge . If you are using Eclipse most HTML Editors support even Custom Syntax Formatting (e.g. Aptana) which would be my favourite solution. Also check out the HTML Validator Firefox Plugin it has a Tidy source cleaner, too but the most important feature is the possibility to additionaly validate your HTML.

Answer 7

You could use PSPad to do the trick for you. It's reformat doesn't do exactly what you want but it's close. As an aside, I find PSPad really handy for quickly formatting/reading html, xml, perl....

Your example formatted by PSPad:

<div class="className">   
  <img src="images/one.jpg" />      
  <p>Foo                
    <img src="images/two.jpg" />                      
  </p>
</div>

PSPad: PSPad Download