Language
Word to HTML - Convert Word to Clean Web Code | ButDoc

Convert Word to Clean HTML

Pasting straight from Word into a website is the classic way to break a page. Upload your .docx above and you get HTML with the Office debris removed — headings, lists, links and tables intact, ready to paste into WordPress or any other CMS.

Below: what Word actually puts in your clipboard and why it causes so much damage, what survives conversion and what should not, and the one accessibility habit that makes converted documents genuinely good on the web.

What Word actually pastes into your page

If you have ever copied from Word into a CMS and watched the layout collapse, this is why.

Word does not put plain text on your clipboard. It puts a full HTML document designed to reconstruct the page inside Word — not inside a browser. That payload typically contains hundreds of mso- properties (Microsoft-specific style declarations no browser understands), <o:p> and other XML-namespace tags, absolute font sizes in points, hard-coded colours, and often a <style> block of generated class names like MsoNormal that leaks into the rest of your site.

Two things then go wrong. Your theme's typography stops applying, because inline styles from Word override it. And the page becomes almost impossible to edit later, since every paragraph carries its own private formatting.

Conversion solves this by reading the document's real structure rather than its clipboard representation, then emitting markup a browser and a CMS both understand.

Use Word's heading styles, not big bold text

This single habit determines whether your converted HTML is good or merely acceptable, and it has to happen in Word before you convert.

A converter cannot read intent. If you made a section title by selecting text and setting it to 18pt bold, the document contains a bold paragraph — so the output is a bold paragraph. If you applied the built-in Heading 1 or Heading 2 style, the document says "this is a heading", and the output is a proper <h1> or <h2>.

The difference matters more than it looks:

  • Search engines use heading hierarchy to understand what a page is about and how it is organised.
  • Screen readers let people jump between headings. Bold paragraphs are invisible to that navigation.
  • Your CSS can style every <h2> on the site at once. It cannot style "paragraphs that happen to be bold".

The same applies to lists. A list built with Word's list buttons becomes a real <ul> or <ol>. A list typed with hyphens and manual line breaks becomes one paragraph containing hyphens. Fixing this in Word takes a minute; fixing it in HTML afterwards takes considerably longer.

What should survive, and what should be discarded

Good conversion is as much about what it throws away as what it keeps.

Kept, because it is structure: headings, paragraphs, ordered and unordered lists, tables, hyperlinks, bold and italic emphasis, block quotes.

Discarded, because it is presentation: font families, point sizes, hard-coded text colours, page margins, line spacing, Word's generated class names.

That second list is deliberate, and people occasionally expect otherwise. A web page is not meant to carry the document's own typography — your site's stylesheet is. Keeping "Calibri 11pt, dark grey" from a Word file would fight your theme on every device and break responsive layout on phones. Stripping it is what lets your content look like part of your site instead of a document pasted into it.

Page-specific concepts have no HTML equivalent at all: page numbers, headers and footers, footnotes tied to a page, section breaks, and comments. A web page is one continuous scroll, so those are dropped rather than approximated.

Images: the part that needs your attention

An HTML file does not contain images. It contains references to them, which means images always need handling separately.

There are two ways this normally goes. Images may be extracted as separate files that you upload to your server or media library, then reference by path. Or they may be embedded directly in the markup as base64 — convenient, since the file is self-contained, but it inflates the HTML enormously and images encoded that way cannot be cached by browsers, which slows every page load.

For anything published on a real website, upload images properly and link to them. Base64 is fine for a quick email template or a one-off snippet, not for a blog post.

While you are handling them, add alt text to each image. Word stores alt text if you set it there (right-click → Edit Alt Text), and a converter will carry it across — but most documents have none, so it usually has to be written by hand. It is required for accessibility and it is one of the few genuine SEO wins available on an image.

Pasting into WordPress

Use the code view rather than the visual editor, or the editor will re-interpret your markup as you paste.

In the block editor, add a Custom HTML block and paste there, or use the three-dot menu and choose Code editor to work on the whole post. In the classic editor, switch from Visual to Text before pasting. Either way, preview the result before publishing — converted tables in particular can need width adjustments to work on mobile.

One habit worth adopting: paste the body content only. If the converted file includes <html>, <head> or <body> tags, strip them. A CMS supplies its own page wrapper, and duplicating those tags produces invalid markup that some themes render badly.

Frequently Asked Questions

Why does pasting from Word break my website layout?
Word puts a full HTML document on the clipboard, complete with Microsoft-specific mso- style properties, XML namespace tags and a generated stylesheet. Those inline styles override your theme and are almost impossible to edit afterwards. Converting reads the document's structure instead of its clipboard output.
My headings came out as plain bold text. Why?
Because they were formatted as bold rather than styled as headings. Apply Word's built-in Heading 1 and Heading 2 styles in the document, then convert again — those become real <h1> and <h2> tags.
Why were my fonts and colours removed?
Deliberately. Document typography fights your site's stylesheet and breaks responsive layout on phones. Let your CSS handle appearance so the content looks like part of your site.
What happens to images?
HTML links to images rather than containing them, so they are either extracted as separate files or embedded as base64. For a real website, upload them to your media library and reference them by path — base64 bloats the page and prevents browser caching.
Are footnotes, headers and page numbers kept?
No. These are page-based concepts with no equivalent on a continuously scrolling web page. If footnotes matter, convert them to inline links or an endnote section before converting.
How do I paste this into WordPress?
Use a Custom HTML block, or switch the classic editor from Visual to Text. Pasting into the visual editor re-interprets the markup. Strip any <html>, <head> or <body> tags first — the CMS supplies those.
Do tables convert properly?
Yes, as real <table> markup. Preview on mobile before publishing — a wide document table often needs a responsive wrapper or narrower columns to work on a phone.
Is my content private?
Files are transmitted over an encrypted connection, processed automatically without human review, and permanently deleted from our servers within 60 minutes. Full detail is in our Privacy Policy.

Related tools

Going the other way, HTML to Word turns web content into an editable document. Word to TXT strips everything back to plain text, and HTML to Markdown suits static sites and documentation. Browse all Word tools.