It's really intuitive to use the online HTML Web Editor. Click the Demo menu item to populate the editor with a sample text with headings, paragraphs, a table, some styles you can experiment with.
Use the visual WYSIWYG editor just like any other word editor to adjust the content and see the HTML source code changing in the source editor. When you want to adjust the code just type the changes there and that will update the preview section on the right. The syntax highlighting helps to make the text more readable.
Below the source composer you can find the options to undo the last change and to start a fresh page. Adjust the font size with the +/- commands. There's another option to compress the HTML code removing new lines, tabs, successive spaces. The two arrows give you access to the replace tool, and the page sheet icon brings up a popup where you can generate the lorem ipsum text. Decide whether you want to add the gibberish paragraphs to the end of the editor or you'd rather populate the section allocated for this without the working area and copy the bits manually from here.
Cleaning options – clicking the header activates/deactivates all options.
Clear inline styles – removes the code from the tag attributes that looks like style="...."
Clear classes and IDs – every class and ID will be deleted
Character encoding – decide whether you'd like to see £ or £ in the source editor.
Clear comments – all text written in comment will be removed: <!-- .... -->
Clear span tags – span tags are used to style inline elements and with this option you can remove the span tags but not the content inside of them
Clear successive s – it's a common mistake to use successive spaces to set gaps in Microsoft Word. This erroneous formatting can be removed with this option.
Clear tags with one – another bad HTML tag practice is to add empty paragraphs to set empty lines instead of setting the line height or margins. You can filter these out with this one.
Clear empty tags – empty tags are usually automatically removed by the visual editor but you can set it from here as well.
Clear tag attributes – leaves behind the HTML tag structure but removes every style, class and other attributes. We have separate options to control images and links and this is the reason why this doesn't affect the src of images and the href of the links.
Clear all tags – leaves behind a plain text, deleting every HTML tag but not the content inside of them.
Clear images – every image tag will be removed but not the images set by background-image styles.
Clear links – remove the anchor tags from the document.
Clear tables – takes every text out of the tables.
Convert tables to structured <div>s – you'll have to apply a CSS code to make the tables look as desired. Read more about table to div converion and find the css code.
Organize tree-view – sets text indentation to make the source more readable.
