The short answer
Clean HTML means the tags describe what the content is (a heading, a paragraph, a list, a table, a link) and nothing about how it looked in Word. No font names, no point sizes, no colors, no class names like MsoNormal, no empty spans. That kind of HTML adapts to your site's stylesheet and stays easy to edit later.
Word cannot produce it on its own, because its export tries to reproduce the page exactly. A structure based converter reads the document the other way around: it looks at which style each paragraph uses and maps it to a tag. Drop a .docx onto the converter below, keep Convert to on HTML, check the preview next to the code, then press Copy or Download.
Try it here: Word to HTML
Open the full tool pageWhy Word's own HTML is so messy
Word offers Save as Web Page and Web Page, Filtered. Both aim to make the HTML look like the printed page, so they write every visual detail into the code. A single short paragraph can turn into several lines of markup with a class, a style attribute listing font family, size and spacing, and nested spans for each change of formatting.
Copying from Word and pasting into a content management system does something similar through the clipboard: the editor receives Word's HTML and keeps some or all of those styles. The result is text that does not match the rest of the site, fonts that differ from paragraph to paragraph, and pages that are hard to edit because invisible formatting keeps coming back.
| Method | Headings and lists | Inline styles and Office markup | Images |
|---|---|---|---|
| Save as Web Page | Kept, as styled paragraphs | A lot, plus Office specific tags | Separate folder |
| Save as Web Page, Filtered | Kept, as styled paragraphs | Less, but classes and inline CSS remain | Separate folder |
| Copy and paste into a CMS | Depends on the editor | Often kept | Often lost or linked to local files |
| Google Docs, Download as Web page | Kept | Generated class names and a style block | Separate folder in a ZIP |
| Converter on this page | Real h1 to h6, ul, ol | None | Embedded, or left out |
What is kept and what is dropped
The converter keeps everything that carries meaning and leaves out everything that only controls appearance:
- Kept: headings from Word's Heading 1 to Heading 6 styles, the Title style (as h1) and Subtitle (as h2), paragraphs, bold and italic (as strong and em), bulleted and numbered lists with their nesting, tables, links, footnotes, quotes using the Quote style, and images.
- Dropped: fonts, font sizes, colors, highlighting, alignment, line spacing, page margins, page headers and footers, and Word's comments.
- Images: with Include images ticked they are embedded in the HTML as data URIs, so the code works on its own. Untick it to get lighter code when you upload images to your CMS separately.
- Full HTML page: tick it to get a complete file with a doctype, character set and title that opens on its own in a browser. Leave it off when you paste the content into an existing page.
Prepare the document for the cleanest result
The output can only be as structured as the document. The most common surprise is a heading that comes out as a normal paragraph in bold. That happens when someone made the text big and bold by hand instead of using a heading style; Word shows it as a heading, but the file says it is a normal paragraph.
- Use Word's built in styles: select the line and pick Heading 1, Heading 2 and so on from the Styles gallery on the Home tab.
- Use real lists. Lines starting with a typed dash or number become paragraphs, not list items; use the Bullets and Numbering buttons instead.
- Avoid empty paragraphs for spacing. Each press of Enter on an empty line becomes an empty paragraph.
- Keep tables simple: one header row, no merged cells if you can avoid them, and no tables used only for layout.
- Custom styles that have no HTML equivalent are converted as normal paragraphs, and the converter tells you so with a short note under the result.
Pasting the HTML into WordPress, Shopify and other editors
Most editors have a code or HTML view. Switch to it before pasting; if you paste HTML into the visual view, the editor shows the tags as text. In the WordPress block editor, add a Custom HTML block, or open the block menu and choose Edit as HTML. In the classic editor and in Shopify's description editor, use the Text or Show HTML button.
Because the code has no inline styles, the text immediately uses the fonts, sizes and colors of your theme. If a heading level looks too big for your design, change the tag (h2 to h3, for example) rather than adding a style, so the page outline stays correct for search engines and screen readers.
For email templates, clean HTML is a good starting point, but many email programs need inline styles to look consistent. Add them in your email tool, not in Word.
Common problems
- The file is .doc, not .docx: the converter reads only .docx. Open the file in Word or LibreOffice, save it as .docx and try again.
- Headings are missing: they were formatted by hand. Apply heading styles in Word and convert again.
- The HTML is very large: embedded images make up most of it, and data URIs are about a third larger than the image file. Untick Include images and upload the images separately.
- Text boxes, shapes and SmartArt are missing or out of order: these are drawing objects rather than text in the document flow. Move important text into normal paragraphs before converting.
- Special characters look wrong after pasting: save or serve the HTML as UTF-8. The full page option already includes the UTF-8 declaration.
Privacy and safety
Contracts, offers and internal documents should not be uploaded to unknown converters. Here the .docx is opened and converted in your browser, and the document never leaves your device. After the page has been opened once, it also works offline.
The HTML that comes out is checked against an allow list of tags, so scripts, event attributes and javascript: links can never end up in the result, even if the document contained them.