Clean HTML pasted from Word, Google Docs or a page builder

How to use the HTML cleaner

1. Paste the markup into the HTML box. The sample is a typical paragraph copied out of Word.
2. Tick what to remove. By default the tool removes Word markup, inline styles, classes, on* event handlers, comments and empty elements, and unwraps font and bare span tags. Removing ids, data-* attributes and scripts is off until you tick it.
3. Copy the Clean HTML or download it as clean.html.
4. Check the counters: Attributes removed and Elements removed or unwrapped.

What it does and when to use it

Text copied from Word or Google Docs into a CMS often brings hidden baggage: class="MsoNormal", mso-line-height-rule, o:p tags, fonts and colours fixed in every span. That markup overrides your site’s CSS, bloats the page and makes later edits painful. The cleaner removes the presentation and keeps the meaning: paragraphs, headings, bold text, lists, links and tables.

It is also useful for markup copied from another website or an old template, where you want the text but not someone else’s classes, tracking attributes or inline click handlers.

How it works

The HTML is parsed into a tree in your browser. Each element’s attributes are filtered by the options you chose. After that, font elements and spans with no attributes are replaced by their contents. Finally, elements such as p, span, b or li that contain only spaces or   are dropped. The tree is then written back out. Nothing is uploaded.

Worked examples

Word export, default options. The sample loses 7 attributes and 7 elements or comments. The result is:

<p><b>Quarterly update</b></p>
<p>Sales grew 12% this quarter.</p>

Keep styles and classes, drop only Word junk. Untick Remove inline styles and Remove class attributes. The mso- declarations go, but real CSS stays:

<p style="margin:0cm"><span style="font-family:Calibri"><b>Quarterly update</b></span></p>

The MsoNormal class still disappears, because it belongs to Word markup.

A promo block with a script. Input: a div with id, class and onclick, an empty p, a font tag and a script. With Remove <script>, <style>, <iframe> and embeds ticked, the output is <div id="promo">Spring sale</div>. The id stays because Remove id attributes is off.

Limits and tips

• The cleaner does not fix broken nesting. Check the result with the HTML Validator.
• To remove only a chosen list of attributes, such as class but not style, the HTML Attribute Remover gives finer control.
• If you only need the words, the HTML to Text converter drops every tag.
• Tables keep their structure, but Word’s widths and borders are inline styles, so they are removed with the styles.