How to Write Clean HTML for a Blog or Newsletter Without Coding
If your blog platform, online shop or newsletter tool has an "HTML" or "code" box and you'd rather not type tags by hand, write the text in a visual editor and copy the HTML it produces. The free Text Editor on KhanTools works like a small word processor: you format with toolbar buttons, then click Copy HTML and paste the result into the HTML field of your site.
That's the whole method. The rest of this guide covers how to get HTML that's clean and well structured, where to paste it, and the one thing that catches people out: images.
What "clean HTML" means here
HTML is the set of tags that tells a web page what each piece of text is: <h2> for a heading, <p> for a paragraph, <ul> and <li> for a bulleted list, <a> for a link. Clean HTML uses those tags for what they're meant for, so a heading is marked as a heading rather than as a line of big bold text. Search engines, screen readers and your site's own styles all rely on that structure.
The problem with copying straight from Word, Google Docs or another web page is that you often bring along hidden formatting: odd fonts, fixed sizes and colours that clash with your site's design. Writing or tidying the text in a plain editor first gives you a predictable result.
Step by step: from text to HTML
- Open the Text Editor and click into the writing area. Replace the sample line with your own text, or paste it in from another document. Bold, lists and similar formatting are kept when you paste.
- Turn your section titles into real headings with the paragraph menu. This is the step that matters most for structure. Big text and a heading look alike on screen, but only a heading tells the page "a new section starts here".
- Use the toolbar for the rest: bold, italic, underline, bulleted and numbered lists, quotes, links and tables. Hover over any button to see its name.
- If text you pasted brought strange formatting with it, select it and click the eraser button to clear the formatting.
- Optional: click the first toolbar button to switch to source view. You'll see the raw HTML and can check or tweak a tag directly.
- Click Copy HTML. The code is now on your clipboard.
- In your blog, shop or newsletter tool, switch the editor to its HTML, code or source mode and paste.
The word count at the bottom of the editor is handy if your platform has a length limit, for example on a product description.
Where to paste it (and where not to)
Copy HTML copies the code itself, tags and all. That's exactly what you want in a field that expects HTML, such as:
- the HTML or code view of a blog editor
- a product description field in an online shop that accepts HTML
- a custom HTML block in an email or newsletter template
- a forum or community site that accepts HTML posts
If you paste it into Word or the normal body of an email, you'll see the tags as text, like <p>Hello</p>. That doesn't mean anything went wrong; it just means that box wanted formatted text, not code. In that case, copy the text straight from the editor's writing area instead.
Many blog platforms also have a normal visual editor of their own. If you're happy writing there, you don't need this step at all. A separate editor is most useful when the site only gives you a raw HTML box, when its own editor adds messy formatting, or when you want to write once and paste the same text into several places.
The image catch: why your HTML suddenly gets huge
You can insert images in the Text Editor, but they're stored inside the HTML itself as data rather than as a link to a file. Technically this is called a data URL: the picture is turned into a long string of letters and numbers (base64 encoding) and written straight into the <img> tag.
Two things follow from that:
- The HTML gets much longer. A single photo can add a very long block of text to your code. Base64 encoding also makes the data bigger than the original file. Some CMS fields have a length limit and will cut it off or refuse it.
- Some places won't show the image. Some email clients and websites don't display images stored this way. Gmail, for example, is known for not rendering base64 images in messages, so a newsletter built this way can arrive with blank spaces where the pictures should be.
For anything going on the web or into an email, the better approach is:
- Shrink the image first with Image Compress (a max width of 1200 to 1600 pixels is plenty for most blog posts), and trim it with Image Crop if needed.
- Upload the image to your blog, shop or newsletter tool's own media library.
- Insert it there, or use the image link your platform gives you.
Embedded images are fine for a quick personal document or a file you'll open in your own browser. Just don't rely on them for content other people will receive.
Plain text and saving a copy
The editor has two other exports:
- Export TXT saves only the words as
document.txt. Use it when a form or app only accepts plain text, or when you want to strip out odd formatting picked up from a web page or a Word file.
- Export HTML saves the code as
document.html. You can keep it, send it, or open it in a browser to see how the content looks. The file contains only your content, with no page styling around it, so it will look plainer than it will on your site.
Before you start writing
Your work isn't saved. If you close the tab, refresh or leave the page, the text is gone. For anything longer than a few paragraphs, copy or export as you go, or draft in your usual app and paste it in when you're ready to format.
The editor runs in your browser, so what you type isn't sent to our server and the exported files are created on your own device. That's useful for drafts you don't want stored anywhere yet, such as an announcement before it goes out.
A quick example
Say you run a small online shop and need a product description with a short intro, a heading called "Care instructions" and a three-item list. In the editor you'd type the intro, type "Care instructions" and set it as a heading from the paragraph menu, then add the three points as a bulleted list. Copy HTML gives you something like this:
<p>Hand-thrown stoneware mug, 350 ml.</p>
<h2>Care instructions</h2>
<ul>
<li>Dishwasher safe</li>
<li>Microwave safe</li>
<li>Avoid sudden temperature changes</li>
</ul>
Paste that into the shop's HTML description field and the heading and list pick up the shop's own styling. If the description should have a photo, add it through the shop's image upload rather than inside the HTML.
KhanTools — Free Online Web Tools
Free browser-based tools for images and PDFs. No uploads. 100% private.
Blog ·
About ·
Privacy Policy ·
Terms of Service ·
Contact
JavaScript is required to use KhanTools. Please enable JavaScript in your browser.