Free online instant HTML editor and cleaner
HTML Editor is the best tool to compose web articles quickly and error-free. See the rich-text content and its source code side by side in this real-time composer. Adjust the content in any of the editors and the changes will apply to the other one automatically.
The built-in HTML cleaner can tidy up your code with a touch of a button. Adjust the cleaning options in the dropdown below the source editor, clicking the gear icon:
- Get rid of unwanted inline styles. A very useful feature when copying content from MS Word or any other text editor.
- Remove classes and IDs that don't belong to your website. This can come handy when you are copying HTML code from another website that is using a different CSS style sheet.
- Empty tags, such as paragraphs, spans or any other occurrence of elements that are closed immediately after the opening tag are also unwanted leftovers you might want to discard. For example <span></span> will be removed if this option is checked when you perform the cleaning.
- Setting vertical gaps using empty paragraphs in your documents is a very common mistake. Remove tags that contain only a space with this option.
- Similar to the previous bad habit, people often use repeated spaces to set indentation or to shift the text to the right. Clean them out with a simple click.
- HTML documents often contain comments, written between <!-- and -->. This cleaning option allows you to strip them altogether.
- Remove all tag attributes, except the src attribute of images and the href attribute of links. Otherwise these tags would become invalid.
- The convert to plain text option removes each HTML tag and leaves only the text like you would paste it in Notepad.
How to use the HTML editor?
Depending on your source document, you can use the HTML editor for two things:
Convert rich-text documents to HTML code
Let's say you've got a PDF document you'd like to publish on a website. Select the souce then copy-paste it in the visual editor on the left side. This will convert the content and show the corresponding source code on the right instantly. Use the forementioned cleaning options or make further changes with either of the editor areas - whichever you're more familiar with.
Edit and compose HTML code
To compose the document having an existing HTML source as a starting point first you have to copy-paste the code in the right-side area. The preview will show and change in real time and you can further modify your article.
If you don't have any source doc or code to start with then compose in whichever field you are more comfortable working with. You can jump between them as you wish. The word editor toolbar might come handy above the WYSIWYG area.
Save and publish the document
When you have finished your article and it's good to go online you can copy the source code from the syntax-highlighted editor. Depending on your CMS there are many ways to publish an article.
To save the content as a .html file, first create a new .txt file on your system. Add the necessary head and body sections to the file (visit the HTML cheat sheet and look for the Blank page template section) finally and paste your code between the opening and closing body tags. Save the file then rename it, changing the extension to .html. Open it in a web browser to see it in action. The cheat sheet (linke above) will help you add other necessary header sections to your file.
Wordpress is the most popular website platform. Learn how to write a post here. Contact a webmaster if you're unsure what system your website is using or if you need help publishing the article.
HTML editing and every operation on this website is executed on the client-side and your confidential documents are never sent to our server. We don't collect personal data but we use Google Analytics to collect anonymous visitor statistics.
HTML-Editor.Tools might also show ads (AdSense or other platforms) so we kindly ask you to disable ad blockers to keep this service free.