HTML Practice Editor

Write HTML and see it live in the preview.

How it works

1. Type HTML in the code box, or press “Load Example” for a small starter page.
2. Press “Run” to see your page in the preview below.
3. Change the code and press “Run” again to see the new result.
4. Press “Clear” to empty the code box and start over.

Frequently asked questions

Is my preview safe?

Yes. The preview runs inside a sandboxed frame, so the code you type cannot reach the rest of the page or any other website.

Can I save my page?

No. The editor is for practice only — copy your code into a file on your own computer if you want to keep it.

What HTML can I try?

Headings, paragraphs, lists, links, images and simple styling with a style tag. The example shows all of them in one page.

What is the HTML Practice Editor?

The HTML Practice Editor lets you write HTML and see it live in a preview. Type HTML in the code box, or press Load Example for a small starter page, then press Run to see your page in the preview below. Change the code and press Run again to see the new result, and press Clear to empty the code box and start over when you want a clean page.

It is made for pupils taking their first steps in web design, usually in upper primary and secondary computing lessons. HTML is the language that builds every web page, and the fastest way to learn it is to change one small thing and see what happens — make a heading bigger, turn a sentence bold, or add a link and watch it appear. Because the preview updates only when you press Run, you can write a whole page first and then check it in one go, which is how real web pages are built and tested.

What you can use it for

Here are some ways to use the editor in a computing lesson.

• A first web page: press Load Example, press Run, and study the starter page together — it shows headings, paragraphs, lists, links, images and simple styling with a style tag, all in one page.
• Learning one tag at a time: give pupils one job per lesson, such as adding a list of their three favourite books, so each new tag gets practised on its own before they combine them.
• Fixing a broken page: hand pupils a page with a missing closing tag, ask them to find it, and let them press Run after each fix to see when the page starts looking right again.
• A personal profile page: let pupils build a short page about themselves with a heading, two paragraphs and a list, then show their finished page to a partner and explain which tags they used.

Good to know

• Your preview is safe: it runs inside a sandboxed frame, so the code you type cannot reach the rest of the page or any other website.
• The editor is for practice only and cannot save your page — copy your code into a file on your own computer if you want to keep it, before you press Clear or close the page.
• Press Run after every change, as the preview only updates when you run the code — if nothing seems to have changed, check that you pressed Run.
• Try headings, paragraphs, lists, links, images and simple styling with a style tag, and work from the example first if you are not sure where to begin — it shows all of them in one page.

What is the most common mistake beginners make in HTML?

Forgetting to close a tag. Most HTML tags come in pairs — an opening tag such as <h1> and a closing tag such as </h1> — and if the closing tag is missing, everything after it can end up inside the heading. If your page suddenly looks wrong, check your closing tags first, one by one, and press Run after each fix. Once you are comfortable with tags, the Coding Vocabulary Flashcards will help you learn the words that describe what your code is doing, and the Scratch Coding Challenge Generator offers a different kind of coding project if you want to build something with blocks next.