Word to HTML Made Easy

A neat and fast way to convert your Word document to HTML

Background and arrow from Unsplash. Microsoft Word logo on the left and HTML5 logo on the right.

Introduction

I’ve come across this problem multiple times now, maybe a few of you have faced the same too. I’m talking about that time when you were sent a Word document and were told to transfer its contents onto a website. Yes, that time. What did you do? Did you copy-paste the contents and then typed the HTML tags by hand? What if I told you that there was a better way? Don’t believe me? Read on to be delighted.

Problem

Imagine you’ve been given multiple pages worth of content in Word and have been told to transfer this on a website. Not only must all the content be transferred, but the formatting of the content must also match the Word document. How would you approach this problem?

A sample Word document with rich text content.

Fun fact: If you want to generate lorem ipsum content in Word like the screenshot above, just type =lorem(10) and hit enter. This will generate ten paragraphs of lorem ipsum content.

Solution

Option 1: Using an online tool

I’d highly recommend using the online tool HTML Cleaner. It allows you to paste in the contents of the Word document and retains the formatting of the contents. It instantly produces the HTML output for the same content. All you now have to do is copy the HTML contents and paste it into your website. The GIF below shows this in action.

GIF showing Word to HTML conversion.

In the GIF above, I pasted the HTML output into JSFiddle to quickly mock what the final website would look like. If you’d like to see this JSFiddle, click here.

Note: I’ve tried adding images to the Word document but I wasn't able to copy it across to the tool. So that’s something you might have to manually bring into the HTML document.

Option 2: Using Word’s export feature