From Word to HTML. How to Make a Document Well Convertible to HTML

CEO LMS Collaborator, Founder & Mentor El'Lab, PhD

The good news

LMS Collaborator can create training resources from a finalized MS Word document. All you need to do is to download the file of the DOCX format, and the system will offer to convert it to a resource of the “Page” type. This significantly saves time for resource authors.

Procedure:

  1. Create a new resource of the “File” type.
  2. Download the document.
  3. After loading, the system will offer to “Convert the file to Resource Page? You need to agree.
  4. Save and view the result.

The result come as a single page HTML resource, which loads quickly and has every chance of being perfectly displayed on any device – from desktop to mobile phone.

LMS Collaborator can create training resources from a finalized MS Word document.

LMS Collaborator can create training resources from a finalized MS Word document.

The bad news

Conversion implies that in the layout of the DOCX document, you used generally accepted rules and formatting, which have a direct alternative in HTML format. If there is no direct correspondence, the result of the conversion will not match the original.

You can easily check what will come out of your document on services converting Word to HTML. For example, these:

You can check how MS Word handles the conversion of its document to the HTML format. Follow the procedure: “File” – “Save As …” and choose the format “Web Page Filtered (.htm)”.

If the result is adequate to the original, your document is formatted well.
Absolutely accurate conversion (or as close as possible) of a DOCX document to another format can only be achieved by converting the document to PDF.

Still, there are ways to make the document convert to HTML without critical deformation.

The best practices for formatting an MS Word document

Heading and text styles

MS Word standard heading & text styles

Use standard heading styles: Heading, Subheading, Heading 1, Heading 2, etc.
Type the text in the standard “Normal” style.

2. Intervals and indents

If you need to indent paragraphs, change spacing or font, do it in the text. You can change styles, but this does not always work.

Intervals and indents

3. Text alignment

Usually there are no problems with this. Everything is converted correctly.

Text alignment

4. Font formatting

All usual means of changing the font – its style, color or size – will convert well.

 Font formatting

5. Changing the font type

A font can be displayed correctly only on condition that the fonts installed on the viewer’s computer are the same as yours. Use “safe fonts” (learn more about safe fonts):

Changing the font type

6. Lists

There will hardly be any problems with simple bulleted and numbered lists. Hierarchical lists are also converted well, but there will be differences.

Lists

7. Inserting pictures

Images inserted to the text as a sign will be displayed correctly, while those inserted as a separate object with the possibility of text wrap may be problematic. Double check what is configured in the parameters of the image: “Size and Position” – “Wrap Text” should be like this:

Inserting pictures

The most reliable way is to insert a separate picture in a separate paragraph of the text.

The most reliable way is to insert a separate picture in a separate paragraph of the text.

No settings for text wrapping around the picture will bring a good result. The images will miss their places and ignore your settings.

No settings for text wrapping around the picture will bring a good result.

The only reliable variant is text wrapping to the right. Insert the picture first in the paragraph before the rest of the text. In the “Size and position” – “Wrap Text” settings, select the wrap style “Square” and wrap the text “To the Right”. In the same place, you can optionally adjust the indents from the text.

The only reliable variant is text wrapping to the right.

8. Changing the size, design and parameters of pictures

You can resize images and experiment with other transformations.
As a rule, simple changes are correctly transferred to HTML. But some special changes will hardly be recognized correctly.

Changing the size, design and parameters of pictures

9. Tables

Tables are converted mostly without any faults.

Tables

If you want the table to stretch across the entire width of the page, you need to set the “Auto Fit to Window Width” option for it. In this case, it is better to make the table as simple as possible, without merged and broken cells, as conversion may be inaccurate.

the table to stretch across the entire width of the page

Summary

There is no magic tool that accurately converts any DOCX to HTML. It just can’t exist, as there are too many specific differences between the two formats.

If your priority is the speed of creating educational resources in the LMS and their adaptability to mobile devices, you should clean up and simplify the formatting of your documents and convert them to HTML. You will have a prompt and acceptable result.

If you need accurate document compliance, converting to PDF is the best way to achieve it. But you will have to forget about the convenience of reading the document from the smartphone screen.

If you have time and inspiration, you can study the layout of HTML documents using the Bootstrap rules and its alternatives Bootstrap Alternatives (Top 10 Best Frontend Frameworks).

P.S. We have an example of a properly prepared Word file. It can be taken as a template for your documents. Go to the Training Assignments Catalog at the demo-portal of LMS Collaborator and pick it up from this link:

Just download.

P.S. If you have any suggestions, questions, comments or ideas, write them in the comments.


Join our corporate learning community on Facebook and Linkedin, and subscribe to our e-learning newsletter to receive the April discount for using LMS Collaborator with the promo code: LMS2020-04

Подписка на рассылку

Новости сайта на email

Leave a Reply

Your email address will not be published. Required fields are marked *

*