The complete HTML editor: write markup, style it, and watch it render live.
An HTML editor is really two tools working in tandem — a place to write markup and a place to see the result. Knowing how they connect is what makes one worth using.
Write a tag on the left and the browser's interpretation appears on the right. That feedback loop is the whole point: you are never guessing what your code does, because the rendered page sits beside it. Open the HCODX editor and both panes load together, ready for your first line of HTML. If you would rather see them stacked or resized, the split-screen live preview layout gives you the same loop with more room to work.
Where you type your markup. Syntax highlighting colours tags, attributes, and text differently so structure is visible at a glance, while line numbers and bracket matching help you keep every element opened and closed in the right order.
A live rendering of exactly what a browser would display. It reflects your markup, styles, and scripts together, so you judge the real output rather than a simplified approximation that hides layout or spacing surprises.
As you type, the editor hands its contents to the preview and re-renders. There is no build step and no save button — the path from keystroke to visible result is immediate, which is what makes editing HTML feel conversational.
Every page you write shares the same frame. Get it right and the browser rewards you with predictable, consistent rendering.
A valid document opens with a doctype that switches the browser into standards mode, then a root <html> element with two children: a <head> for metadata the reader never sees directly, and a <body> for the content they do. This is the smallest complete page worth writing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, web</h1>
<p>This page is valid, and it renders anywhere.</p>
</body>
</html>
The <head> carries the character encoding, the viewport rule that makes the page behave on phones, and the title shown in the browser tab. The <body> holds everything visible. Paste this into the editor and the preview renders a titled, mobile-ready page instantly — then you build outward, one element at a time.
Tags carry meaning, not just appearance. Choosing the right one makes your page easier for browsers, search engines, and screen readers to understand.
Reach for <header>, <nav>, <main>, <article>, and <footer> to describe regions of the page — the backbone of modern HTML5 — instead of stacking anonymous <div> elements.
Keep a single <h1> per page and step heading levels in sequence — <h2>, then <h3> — so the document outline stays logical for readers and assistive technology alike.
Give each <img> an alt attribute that conveys its meaning, or an empty alt="" when the image is purely decorative and adds nothing a reader would need to hear.
Tie each input to a <label> so taps and screen readers land on the right control. Use <button> for actions and <a> for navigation — the two are not interchangeable.
Add lang="en" to the <html> tag so screen readers pronounce your content correctly and browsers offer accurate translation prompts to visitors.
Run your finished page through a markup validator to catch unclosed tags, duplicate IDs, and nesting mistakes before they turn into rendering bugs.
Watch one small page grow from a bare doctype into a styled document across four steps. Paste each version into the editor and the preview shows exactly what every new tag adds.
Open with the doctype so the browser renders in standards mode, then wrap everything in a root <html> element and set its language. Nothing shows in the preview yet — this is the shell every page is built on.
<!DOCTYPE html> <html lang="en"> </html>
The <head> carries information about the page rather than page content. Set the character encoding, add the viewport rule so the layout behaves on phones, and give the tab a title. The preview stays blank, but the browser now knows how to read your page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reading List</title>
</head>
</html>
Everything a visitor sees lives in the <body>. A heading names the page, a paragraph introduces it, and an unordered list holds the items. The moment you add this, the preview renders a real, readable page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reading List</title>
</head>
<body>
<h1>My Reading List</h1>
<p>Books I want to finish this year.</p>
<ul>
<li>The Pragmatic Programmer</li>
<li>Refactoring</li>
<li>Don't Make Me Think</li>
</ul>
</body>
</html>
A single <style> block in the head turns the plain page into a designed one: a readable measure, centred content, a coloured heading, and breathing room between list items. Change a value and the preview updates instantly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reading List</title>
<style>
body { font-family: system-ui, sans-serif; max-width: 40rem;
margin: 2rem auto; padding: 0 1rem; }
h1 { color: #2a5cf6; }
li { margin: .4rem 0; }
</style>
</head>
<body>
<h1>My Reading List</h1>
<p>Books I want to finish this year.</p>
<ul>
<li>The Pragmatic Programmer</li>
<li>Refactoring</li>
<li>Don't Make Me Think</li>
</ul>
</body>
</html>
Those four steps are the whole shape of an HTML document: declare it, describe it in the head, fill the body, and style it. Every page you write from here — however large — is this same skeleton with more elements hung on it. When you want to layer on styling in a dedicated view, the HTML and CSS editor keeps the markup and the stylesheet side by side.
You can build almost any page from a small set of elements. Here are the ones you will reach for most, and the job each one does.
| Element | What it's for |
|---|---|
<html> | The root element that wraps the whole document and carries the page language. |
<head> | Holds metadata the reader never sees directly: title, character set, viewport, and links to styles. |
<body> | Contains everything visible on the page — text, images, links, and controls. |
<h1>–<h6> | Six heading levels that form the document outline, from the main title down to sub-points. |
<p> | A paragraph of running text — the default home for prose. |
<a> | A hyperlink; its href sets the destination — another page, a section, or an email address. |
<ul> <ol> <li> | Unordered and ordered lists, with each entry wrapped in a list-item element. |
<img> | Embeds an image; src points to the file and alt describes it for accessibility. |
<div> | A generic block-level box used to group and lay out other elements. |
<span> | A generic inline box for styling a run of text without breaking the line. |
<header> <nav> <main> <footer> | Landmark regions that describe the parts of a page for browsers and screen readers. |
<form> <input> <button> | The building blocks of interactive forms and the actions a visitor can take. |
Most of these elements accept attributes — extra settings written inside the opening tag as name="value" pairs. An href tells a link where to go, a class hooks an element up to your CSS, an id gives it a unique handle, and alt supplies the text alternative for an image. The element decides what a thing is; its attributes decide how it behaves and how your styles find it. Combine a dozen elements with a few well-chosen attributes and you can express nearly any page — start simple, preview often, and add complexity only where the content actually calls for it.
<html> element, a <head> for metadata, and a <body> for content. That four-part skeleton — doctype, html, head, body — is the frame every valid page shares, and the walkthrough above builds it one step at a time.<div>, <p>, and <section> start on a new line and stretch to fill their container's width. Inline elements such as <span>, <a>, and <strong> sit within a line of text and take only as much room as their content. Knowing which is which explains most surprises about where things land on the page.Code on the left, live rendered output on the right.
Real-time preview that updates with every keystroke.
Unified editor for all three front-end languages.
Manage complex projects with multiple files and folders.
Monaco-powered editor with VS Code shortcuts and IntelliSense.
100% free editor — no fees, no restrictions, ever.
Professional editor with syntax highlighting, IntelliSense autocomplete, multi-file projects and live preview.
Want to run your HTML, CSS, and JavaScript code instantly and see the result live? Try our free HTML Runner Online — a lightweight browser-based code runner and viewer with real-time live preview. No download or signup required.
Open HTML Runner Online