Clean Messy HTML Codes with HTML Washer

By . in Coding. Updated on .

If you’re editing someone else’s web page or want to copy a code of a layout it can be tough wading through the formatting. You’ll have to clean up a lot of the messy areas and this is not fun to do manually.

With the HTML Washer web app, you can automatically clean up any HTML code with the click of a button.

This web app removes all extraneous features out of the HTML, including excess CSS and JavaScript. It’ll also strip most classes and attributes to leave just the bare-bones HTML template.

Read Also: A Look Into Proper HTML5 Semantics

This is perhaps the most useful when studying the structure of another website. If you want to clone a layout you can easily view the source and copy/paste the code in your own editor.

You may also want to strip HTML comments and simplify the code further. This is where HTML Washer comes in handy.

It has a handful of neat features and these are the most useful ones for developers:

  • Converts the code into HTML5 (from HTML4/XHTML)
  • Fixes improperly formatted tags
  • Reformats HTML with proper indentation
  • Removes all inline scripts & CSS

Note that HTML Washer isn’t a full solution for transferring an older layout into HTML5. Nor is it a perfect tool for literally copy/pasting an existing layout and making it your own.

But, as a starting point, this tool can help you clean up messy HTML fast. It’ll help you focus on just the fundamentals of the code, so you’re not bogged down by classes or extraneous HTML attributes.

Although, if any <img> tags don’t have alt attributes this HTML Washer will add them to the page. It’s meant to output HTML that’s fully compliant with modern coding and accessibility standards.

One feature I would like to see is the optional inclusion of classes or IDs. Sometimes, you’ll want to keep the classes, so you can copy/paste code along with the original stylesheet to keep the same look.

Right now, this is not possible with HTML Washer, although here’s hoping it can be added in a future update!

For an automated tool, this thing is great and it lets you either copy/paste code or upload a file directly from your computer.

HTML washed code preview

To see it live in action, check out the main site and give it a go. If this is something you could see yourself using be sure to bookmark it.

And, if you have any suggestions for improvements shoot a quick message to the developer on Twitter @HtmlWasher.

Read Also: Write HTML & CSS Faster with Emmet

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail