Last checked by the TextEditor.com team
How to use the online HTML editor
Write and format in the visual side, like in a word processor. The code side shows the HTML for it and updates as you type. You can also type or paste code on the code side, and the visual side follows.
- Format your textUse the toolbar for headings, bold, lists, links and tables.
- Clean itClick Clean and pick a preset. The report says what was removed.
- Copy or saveClick Copy code and paste it into the HTML block of your site, or save an .html file.
Your document saves in this browser as you work, like in the plain text editor. Nothing is sent to our server.
Convert Word or Google Docs to clean HTML
Copy your document in Word or Google Docs and paste it into the visual side. A paste from Word brings a lot of extra code: font names on every line, mso styles that only Word reads, class names and empty paragraphs. Google Docs wraps text in spans with long style lists.
That's why the editor keeps only the structure by default: headings, lists, links, bold and italic. A note under the editor lets you keep all the formatting or paste plain text instead.
What each cleaning option removes
| Option | Before | After | Keep it for email? |
|---|---|---|---|
| Word and Google Docs junk | <p class="MsoNormal"> | <p> | No, remove it |
| Inline styles | <p style="color:red"> | <p> | Yes. Email apps ignore most style sheets. |
| Classes and IDs | <p class="intro"> | <p> | No, email has no style sheet to match them |
| All attributes except href, src and alt | <img src="a.png" width="80"> | <img src="a.png"> | Yes, keep them. Width and height help email layouts. |
| Span and font tags | <span>Hi</span> | Hi | Only if the spans carry colors |
| Runs of non breaking spaces | 9 to 5 | 9 to 5 | No, remove them |
| Tags with only a non breaking space | <p> </p> | (nothing) | No, use margins instead |
| Empty tags | <b></b> | (nothing) | No, remove them |
| Comments | <!-- note --> | (nothing) | Keep the ones that start with [if mso] |
"Text only" removes every tag and leaves the words in paragraphs. To change the case of headings after cleaning, use the case converter.
Visual editor or code: what does WYSIWYG mean?
WYSIWYG means "what you see is what you get". You see the finished text, and the editor writes the tags for you. Point at a word below to see which tags it makes.
We bake fresh bread every day. Find us at the market.
<p>We bake <strong>fresh</strong> bread <em>every</em> day. Find us at <a href="/map">the market</a>.</p>
Is it safe to paste HTML from other sites?
HTML can carry code that runs when the page opens. A script tag, an onclick attribute or a link that starts with javascript: can all run code. On this page, that code could read what you type. So the editor removes them before anything reaches the visual side, the preview or a shared link.
The preview runs in a sandbox: a frame where scripts can't run at all. A shared link always opens as a preview first, so you can look before you load it. Click the button below to see what gets removed.
<p onclick="stealData()">Win a prize!</p> <a href="javascript:alert(1)">Claim it</a> <img src="cat.jpg" onerror="stealData()" alt="Cat"> <script>stealData()</script>
Bold, italic and headings in HTML
| Tag | Means | Looks like | Screen readers |
|---|---|---|---|
<strong> | Important text | bold | Some voices stress it |
<b> | Stands out, no extra meaning | bold | Read like normal text |
<em> | Stress, like when you say it louder | italic | Some voices stress it |
<i> | Titles, foreign words, terms | italic | Read like normal text |
<h1> to <h6> | Headings, from the page title down | Big to small | Announced as "heading level 2" |
Use one h1 for the page title, then h2 for sections and h3 inside them. Don't skip from h2 to h4: screen reader users jump by headings and may think a part is missing. The status bar under the editor warns you when a heading skips a level.
Social apps like Instagram don't read HTML. For those, use the bold text generator. It makes bold letters from special Unicode characters. Need an arrow or a © sign? Find it with its code in special characters and HTML entities, or look up ASCII codes.
Keyboard shortcuts and hidden tools
| Tool or shortcut | What it does | Example |
|---|---|---|
| Tools, Ctrl + K | Every command in one list. Type to find one. | Type "minify" and press Enter |
| Tag tools | Delete, unwrap or rename tags, or list their values | Delete img tags that have no alt |
| Find and replace | Search the text, the code or attribute values, with patterns | Change every http:// link to https:// |
| Placeholder text | Adds Lorem ipsum paragraphs for a layout | Ctrl+K, then "lorem" |
| Share as link | Packs the page into a link. Nothing is uploaded. | Send a draft to a friend |
| Ctrl + S | Saves an .html file | In Chrome and Edge it saves back to the opened file |
| Shift + Enter | Line break inside a paragraph | Addresses and poems |
More tools for web text
- Write with bold, lists and linksB I UThe rich text editor. Copy it formatted into email or Word.
- Write in Markdown
**bold**→ boldThe Markdown editor shows a live preview as you type. - Fill a layout with sample textLorem ipsum dolor sit ametPlaceholder paragraphs as plain text, HTML or Markdown.
- Encode or decode textHi → SGk=Base64, URL codes, HTML entities and six more formats.