Create HTML Email Signatures

To create a HTML email signature fast you can use our built-in templates.

Templates are the easy way for you to create the text you need fast. This feature is only for PRO users.

All you have to do is click the insert template icon from the menu:

Then select your template:

Once you have selected the template you can edit the content in the editor.

If you want to add more icons to your signature (like the social media links) we recommend you use an icon stored on a CDN like Webicons.

Once you have created your signature you can then copy/paste it into your email application.

Important, you need to copy from the Visual Editor. Go to the edit menu, select all, then the edit menu again and select copy.

For instructions on pasting into the various email platforms and applications have a look here.

Create Amazon Seller Listing Descriptions

You can use Word To HTML to create descriptions for Amazon seller listings.

Amazon restricts the code you can use for listings so we have created a simplified version of the Visual Editor that will create code that is Amazon compatible.

To get started all you need to do is click the ‘Amazon Editor mode’ link above the Visual Editor:

 

You will notice that the toolbar icons switch to simplified controls:

 

Amazon has a limit of 2000 characters for the description field, our system will warn you if your text is over 2000 characters. We also have a character count tool in the bottom right of the Visual Editor that will help you keep track but be aware you might see different numbers in the count vs our warning message. The issue is Amazon counts every HTML character not just the text, so for example, if you add a new line with just one character in it eg <p>X</p> this is actually 8 HTML characters.

 

Once you have edited the text, copy the HTML from the HTML Editor box and paste it into the Amazon listing display field.

How to add and use custom CSS for Visual Editor

The Word to HTML Visual Editor is able to customize CSS styles for specific HTML tags and allows you to add your own CSS classes that can be used to format your content.

You can add/paste custom CSS from your website if you want to style the content the same way as on your website.

In order to add your custom CSS you have to go to the Settings page:

This is how you can have custom styles for tags in your Visual Editor content. In the example above you can set a blue color to all <h1> tags, custom padding for all <p> tags and add a custom class style called ‘redBoldStyle’ that styles are then available for your use under the Formats menu. To apply the style please select your content and click the Formats menu, and then click the style you want to apply.

Visual Editor will add the class to your selected content:

How to create sub lists in Visual Editor

To create sub lists under Visual Editor you have to follow these steps.

  1. Create a list by entering first list item:
  2. Then once you want to create a sub list please hit Enter to create new empty list item and click Increase Indent icon:
  3. Visual Editor will create a new sub list item (1), optionally you can change list type by clicking list type icon (2):
  4. If you want to end that sub list, then just create new sub list item and click Decrease Indent icon:
  5. Now you can enter new items for your top list:

If you want to change sub list type, just click at the first item on your sub list to place editor cursor (1) there and click either numbered (2) or not list type icons:

Clicking Lower Roman will change list type like this:

Convert Word documents with images to HTML and then post them to a CMS like WordPress

If you are using our service to prepare content for pasting into a CMS like WordPress this feature can save you a lot of time and effort. Basically, it gives you the option to change the image links to the actual path of the site you will be putting the content on.

If your HTML contains images that are stored on WordToHTML.net (either you have uploaded them via Visual Editor File Manager or you have used Upload file & convert to HTML feature) and you would like to quickly add your HTML content and images to any CMS then you can use the ‘Custom media URL’ option shown when you use the ‘Download HTML with media’ option:

If we detect media files then we will show the following screen where you can optionally enter a custom media URL that will be prepended to all images in HTML.

For instance when using WordPress, if your media files are not organized under month/year folders then you can enter /wp-content/uploads/ and WordToHTML.net will automatically add this relative URL to all <img src=”…” /> src attributes in HTML.

If you do not enter any value then nothing will be added to image files, there will be only file names in src attributes.

Once you click the Next button we will generate a zip file that will contain your HTML file and all related images.

After that you can unzip the downloaded file, then upload all images to your media folder on your website (via CMS admin or FTP), then open the HTML file in any text editor and copy the HTML to the clipboard for pasting it into your CMS.

Manage Tags & Attributes

This feature lets you customize the tags and their attributes. You can add and delete attributes, for example, say you had this code in your file:

<p>First paragraph.</p>

And you wanted to apply your CSS Stylesheet to the text, then you could use this feature to add this attribute:

<p class="className">First paragraph.</p>

Actions

Add attribute
Remove attribute
Append HTML to elements
Prepend HTML to elements
Remove elements
Wrap elements
Wrap inner content of elements
Unwrap elements
Replace elements


Here is an overview of the section options

1 – Tag or attribute actions drop down – select what you would like to do.

2 – HTML tag (element) like p, span, div or jQuery selector like div.p or .someClass
More info about jQuery selectors: https://www.w3schools.com/jquery/jquery_ref_selectors.asp

3 – HTML attributes like id, class, style etc. Please note that class and style attributes at treated differently if you enter some values for them.
4 – Enumerate attribute values on/off.

5 – Start number when enumerating attribute values.

6 – Attribute or tag values. This field can contain HTML too.

7 – List of actions that will be performed on HTML.


Add attribute examples:

Add a class attribute to p tags. Input HTML:

<p>First paragraph.</p>

<p>Second paragraph.</p>

<p>Third paragraph.</p>

<div>

Last section.

</div>

Output HTML after clicking Cleanup my HTML green button:

<p class="className">First paragraph.</p>

<p class="className">Second paragraph.</p>

<p class="className">Third paragraph.</p>

<div>

Last section.

</div>

Please note that div tag does not have a class attribute.


Add class attribute to p and span tags. Input HTML:

<p>First paragraph.</p>

<p>Second paragraph.</p>

<p>Third paragraph.</p>

<span>Fourth line.</span>

<div>

Last section.

</div>

Output HTML:

<p class="className">First paragraph.</p>

<p class="className">Second paragraph.</p>

<p class="className">Third paragraph.</p>

<span class="className">Fourth line.</span>

<div>

Last section.

</div>

Please note that div tag has no class attribute only p and span tags.


Add enumerated (starts from 1) id to p tags. Input HTML:

<p>First paragraph.</p>

<p>Second paragraph.</p>

<p>Third paragraph.</p>

Please note that you can add numbers (enumerate any attributes, but usually it only makes sense for id attribute).

Output HTML:

<p id="prefix1">First paragraph.</p>

<p id="prefix2">Second paragraph.</p>

<p id="prefix3">Third paragraph.</p>


Add a class to p tags. Input HTML:

<p>First paragraph.</p>

<p>Second paragraph.</p>

<p>Third paragraph.</p>

Output HTML:

<p class="className">First paragraph.</p>

<p class="className">Second paragraph.</p>

<p class="className">Third paragraph.</p>


Add or replace a single CSS style to p tags. Input HTML:

<p style="color: red">First paragraph.</p>

<p>Second paragraph.</p>

<p>Third paragraph.</p>

Note: to add or replace particular CSS style please enter only one CSS rule. If you enter more rules then whole style attribute value will be replaced if style attribute already exists for a given tag.

Output HTML:

<p style="color: red; font-weight: bold;">First paragraph.</p> 

<p style="font-weight: bold;">Second paragraph.</p> 

<p style="font-weight: bold;">Third paragraph.</p>

Remove className CSS class from p tags. Input HTML:

<p class="className className2">First paragraph.</p>

<p class="className className2">Second paragraph.</p>

<p class="classNameTest">Third paragraph.</p>

className was removed from first two p tags. Output:

<p class="className2">First paragraph.</p>

<p class="className2">Second paragraph.</p>

<p class="classNameTest">Third paragraph.</p>


Remove class attribute from all p tags. Input HTML:

<p class="className2">First paragraph.</p>

<p class="className2">Second paragraph.</p>

<span class="classNameTest">Third paragraph.</span>

Value field has to be empty in order to delete all class attributes from p tags.

Output HTML:

<p>First paragraph.</p>

<p>Second paragraph.</p>

<span class="classNameTest">Third paragraph.</span>


Remove class attribute from every HTML tag (element). Input HTML:

<p class="className2">First paragraph.</p>

<p class="className2">Second paragraph.</p>

<span class="classNameTest">Third paragraph.</span>

Enter * char in tag field in order to remove class from every HTML element. Please note that * char can be used for other tag actions too.

Output:

<p>First paragraph.</p>

<p>Second paragraph.</p>

<span>Third paragraph.</span>


Remove class attribute from <span> tags inside <p> tags. Input HTML:

<p class="className">First paragraph.</p>

<span class="classNameTest">Second paragraph.</span>

<p>

<span class="classNameTest">Third paragraph.</span>

</p>

Entering ‘p span’ means that all <span> tags inside of <p> tags will be affected.

Only class attribute from ‘Third paragraph’ span tag was removed. Output:

<p class="className">First paragraph.</p>

<span class="classNameTest">Second paragraph.</span>

<p>

<span>Third paragraph.</span>

</p>


Append HTML to elements (tags). Input HTML:

<p>First paragraph.</p>

<p>Second paragraph.</p>

<p>Third paragraph.</p>

Each <p> tag was added <span class=”red”>some text</span> before ending </p>. Output:

<p>First paragraph.<span class="red">some text</span></p> 
<p>Second paragraph.<span class="red">some text</span></p> 
<p>Third paragraph.<span class="red">some text</span></p>

Prepend HTML to elements (tags). Input HTML:

<p>First paragraph.</p>

<p>Second paragraph.</p>

<p>Third paragraph.</p>

Each p tag was added <span class=”red”>some text</span> after starting <p>. Output:

<p><span class="red">some text</span>First paragraph.</p> 
<p><span class="red">some text</span>Second paragraph.</p> 
<p><span class="red">some text</span>Third paragraph.</p>

Remove elements from HTML. Input HTML:

<p>First paragraph.
<span class="red">some text</span>
</p> 
<p>Second paragraph. 
<span class="red">some text</span>
</p> 
<p>Third paragraph. 
<span class="red">some text</span>
</p>
<span class="red">some other text</span>

Selector ‘p span’ will remove all <span> tags in <p> tags. Last <span> was not removed because it was not inside of <p> element. Output HTML:

<p>First paragraph.</p> 
<p>Second paragraph.</p> 
<p>Third paragraph.</p>
<span class="red">some other text</span>

Wrap <p> tags with <div> elements. Input HTML:

<p>First paragraph.</p> 
<p>Second paragraph.</p> 
<p>Third paragraph.</p>

Each <p> tag will be wrapped with <div class=”wrapped”>… </div>. Output HTML:

<div class="wrapped"><p>First paragraph.</p></div> 
<div class="wrapped"><p>Second paragraph.</p></div> 
<div class="wrapped"><p>Third paragraph.</p></div>

Wrap <p> tags inner content with <div> elements. Input HTML:

<p>First paragraph.</p> 
<p>Second paragraph.</p> 
<p>Third paragraph.</p>

Each inner text inside of <p> tags will be wrapped with <div class=”innerWrap”>…</div>. Output HTML:

<p><div class="innerWrap">First paragraph.</div></p> 
<p><div class="innerWrap">Second paragraph.</div></p> 
<p><div class="innerWrap">Third paragraph.</div></p>

Unwrap <p> elements (remove surrounding <p> elements but keep inner content). Input HTML:

<div><p>First paragraph.</p></div>
<div><p>Second paragraph.</p></div> 
<div><p>Third paragraph.</p></div>

Output HTML:

<div>First paragraph.</div>
<div>Second paragraph.</div> 
<div>Third paragraph.</div>

Unwrap <div> elements (remove surrounding <div> elements but keep inner content). Input HTML:

<div><p>First paragraph.</p></div>
<div><p>Second paragraph.</p></div> 
<div><p>Third paragraph.</p></div>

Output HTML:

<p>First paragraph.</p>
<p>Second paragraph.</p> 
<p>Third paragraph.</p>

Replace elements with HTML or text. Input HTML:

<div><p>First paragraph.</p></div>
<div><p>Second paragraph.</p></div> 
<div><p>Third paragraph.</p></div>

Every <p>…</p> tag was replaced with <span>replacement text</span>. Output HTML:

<div><span>replacement text</span></div>
<div><span>replacement text</span></div> 
<div><span>replacement text</span></div>

Using find and replace

You can use the find and replace section to further customize your HTML. You can search for any text and replace or delete it. Find and replace supports regular expressions. You can have multiple several find and replace entries and you can also choose the order in which they run (entries are executed from first to last).

Please note that every occurrence of a given text to find will be replaced or deleted.

Usage examples

Simple find and replace of text in HTML

  1. Select some text in your HTML Editor (1) and click Add to Find button (2). Word to HTML will automatically add selected text into find input field (3). The same can be done with Ctrl+C (copy) and Ctrl+V (paste).
  2. Then add replacement text (4) or leave it empty if you want to delete given text occurrences from HTML.
  3. Click Add button (5). You should see find and replace item on the list (6).

Click Cleanup my HTML button to see results of find and replace:


Delete HTML or text

  1. Select some text in your HTML Editor (1) and click Find and Delete button (2). Word to HTML will automatically add selected text into items to delete (3).

Click Cleanup my HTML button to see results of find and replace. As you can see below <p>Second paragraph.</p> was removed:


Change all <p>…</p> to <span>…</span> tags (basic scenario without regular expressions)

Input HTML:

<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>

Find and replace items:

Output HTML after cleanup (all p tags changed to span tags):


Change all <p…>…</p> to <span…>…</span> tags (more advanced scenario with regular expressions)

Usually, HTML start tags contain attributes so find replace is not that simple and the best way to do it is to use regular expressions. Input HTML:

<p>First paragraph.</p>
<p id="test">Second paragraph.</p>
<p style="color: red">Third paragraph.</p>

In order to find (match) any <p…> tag you have to use regular expressions (1). Basically <p([^<>]*)> will find any <p…> start tag. Replace value (2) has $1 which means that anything that was found/matched by ([^<>]*) will be copied to replace value. In order to use regular expressions please tick ‘Use regular expression’  checkbox (3). Below you can see find and replace with regex on the list (4).

Output HTML after cleanup (all p tags changed to span tags and all attributes are there):


Typical uses for find and replace

  • Replacing words or phrases in your text
  • Changing font types, eg change arial to verdana, modify CSS styles
  • Find and deleting code you do not need

More information about regular expressions (RegEx)

Advanced users can use regular expressions to create more powerful find and replace commands. This is a good introductory guide to RegEX https://www.w3schools.com/js/js_regexp.asp

Using the HTML cleanup options

These options let you easily control what you want to be removed from your code. All you have to do is enable the toggle of the options you need.

You can hover over any option to see more information:

Remember you always need to click the green ‘Cleanup my HTML’ button to run the options, it is not automatic.

If you don’t like how an option affected your code you can click the undo button below the code editor to revert it to how it was then you can try a different option.

Creating cleanup templates

When you find the cleanup options that work best for you, you can easily save them to a template for future use.

Every option you have in the HTML cleanup section, find and replace, CSS styles to keep/remove and custom Javascript will be saved to your template file.

All you have to do is click the blue save button to save your template. You can then reuse your template anytime by selecting it from the drop-down templates list.

If you click on the arrow to the right of the save button you will be able to rename, duplicate and delete your template.

It is important that you click the green cleanup my HTML button to run your template.

Uploading and converting Word, PDF and other documents

Word to HTML lets you upload your own documents to convert them to HTML instantly. All you have to do is click the blue upload button to select your file.

The file formats we support are:

  • MS Word doc and docx
  • PDF files
  • Rich text format
  • Open doc format
  • Txt files

Embed images

Selecting the embed images option converts your images to code. This means you do not need to have separate image files, everything is in the one document. This option is useful for small images like graphics but if you have a lot of images in the file it may increase the size and complexity of the code. Be aware when you embed images the code can look strange, you will see lots of random looking code as shown in the screenshot below. But don’t worry when you put the HTML live the images will show ok.

Full page mode

Creating standalone HTML files? No problem, this option adds the <head> and <body> to HTML, you need this so the page displays correctly. If you are pasting into a web-based system like WordPress, Amazon, eBay etc. you will not need this option.

Fixed HTML

If you need your HTML to look exactly like your input document then tick this fixed HTML option, but please be aware that fixed layout may not look great on mobile devices. It’s useful when used as standalone HTML page or when shown in an <iframe>. This option enables Full page mode option which is required to correctly display fixed HTML page.

Converting images to text with OCR

If your PDF file has text content in an image format we will attempt to OCR it and convert it to text.