Online HTML Editor

Continue in the tool

More pages for this tool

html boilerplate template

HTML5 boilerplate page template to test online

Paste a complete HTML5 skeleton into the HTML pane and the editor treats it as a whole document: it does not duplicate the doctype or head, it just slots the CSS and JavaScript from the other panes into the right places.

The five lines every page needs

The minimal skeleton has an html doctype, which puts the browser in standards mode rather than quirks mode; the html tag with the lang attribute, which tells screen readers and translators the language; a meta charset utf-8, so accents and symbols are read correctly; a meta viewport with width=device-width and initial-scale=1, without which phones lay the page out at 980 px and shrink it; and a title, which appears in the tab. When the HTML pane gets only a fragment, the tool builds those lines itself, with lang equal to the interface language and the title escaped, so a title containing less-than signs cannot break the page.
If you already have the complete page, the editor recognizes it when the pane starts with a doctype or an html tag (comments before it are allowed). In that case the script that forwards the console is inserted right after the head opens, the CSS from the CSS pane goes before the head closes, so it wins over earlier rules of equal specificity, and the JavaScript goes before the body closes. If the head is missing, the tool creates an empty one in the right place. The file produced by the Download button follows the same assembly, only without the console script.
A full-blown boilerplate, like those in large projects, adds more: a meta description, an icon, reset stylesheets and social metadata. For those fields use the site's meta tag generator and paste the result inside your document's head. What matters for a quick test is the skeleton above, and the editor makes sure it is always assembled the same way.

How the tool assembles the document

Fragment in the HTML pane

Input: <h1>Oi</h1>
Expected output: doctype + html lang + charset + viewport + title + body

All of that is generated around the fragment.

Generated meta viewport

Input: trecho de página
Expected output: width=device-width, initial-scale=1

Makes media queries respond to the preview width.

Complete document recognized

Input: <!DOCTYPE html><html>...
Expected output: sem doctype duplicado

The pane is used as it is, and the other panes are fitted into it.

Document without head

Input: <html><body>x</body></html>
Expected output: head vazio criado após <html>

The CSS and the runtime need a head to go into.

Title with special characters

Input: </title><script>
Expected output: </title><script>

The title is escaped and cannot close the tag or open a script.

Full tool FAQ

How can I test HTML, CSS and JavaScript online without installing anything?

Write in the three panes and the preview updates at once. There is no account, server or file: the browser builds a page with your HTML in the body, your CSS in a style tag and your JavaScript at the end of the body, and runs it all in an isolated iframe. The console shows whatever the code prints.

Does my code have access to this site's data?

Why do alert, confirm and prompt not open a dialog?

How do I share what I wrote?

Does the share link send my code to a server?

Can I use CDN libraries and call APIs with fetch?

How do I download the page as an HTML file?

The preview froze. What should I do?

Can I paste a complete HTML page?

Is what I write saved?

Frequently asked questions

What is the minimal valid HTML5?

A doctype, an html tag with lang, a head with a charset and title, and a body. The viewport is not required by the specification, but it is essential for pages that will be viewed on a phone.

Why does the doctype matter?

Without it browsers enter quirks mode, with old box-model and font-size rules. With the html doctype the page renders in standards mode.

Does the editor change my head?

It only adds: the console script after the opening tag and the pane CSS before the closing tag. The rest of your head stays as written, and the downloaded file carries no console script.

Next steps

The five lines every page needs

The minimal skeleton has an html doctype, which puts the browser in standards mode rather than quirks mode; the html tag with the lang attribute, which tells screen readers and translators the language; a meta charset utf-8, so accents and symbols are read correctly; a meta viewport with width=device-width and initial-scale=1, without which phones lay the page out at 980 px and shrink it; and a title, which appears in the tab. When the HTML pane gets only a fragment, the tool builds those lines itself, with lang equal to the interface language and the title escaped, so a title containing less-than signs cannot break the page.

If you already have the complete page, the editor recognizes it when the pane starts with a doctype or an html tag (comments before it are allowed). In that case the script that forwards the console is inserted right after the head opens, the CSS from the CSS pane goes before the head closes, so it wins over earlier rules of equal specificity, and the JavaScript goes before the body closes. If the head is missing, the tool creates an empty one in the right place. The file produced by the Download button follows the same assembly, only without the console script.

A full-blown boilerplate, like those in large projects, adds more: a meta description, an icon, reset stylesheets and social metadata. For those fields use the site's meta tag generator and paste the result inside your document's head. What matters for a quick test is the skeleton above, and the editor makes sure it is always assembled the same way.

How the tool assembles the document

Fragment in the HTML pane

Input: <h1>Oi</h1>
Expected output: doctype + html lang + charset + viewport + title + body

All of that is generated around the fragment.

Generated meta viewport

Input: trecho de página
Expected output: width=device-width, initial-scale=1

Makes media queries respond to the preview width.

Complete document recognized

Input: <!DOCTYPE html><html>...
Expected output: sem doctype duplicado

The pane is used as it is, and the other panes are fitted into it.

Document without head

Input: <html><body>x</body></html>
Expected output: head vazio criado após <html>

The CSS and the runtime need a head to go into.

Title with special characters

Input: </title><script>
Expected output: </title><script>

The title is escaped and cannot close the tag or open a script.

Full tool FAQ

How can I test HTML, CSS and JavaScript online without installing anything?

Does my code have access to this site's data?

Why do alert, confirm and prompt not open a dialog?

How do I share what I wrote?

Does the share link send my code to a server?

Can I use CDN libraries and call APIs with fetch?

How do I download the page as an HTML file?

The preview froze. What should I do?

Can I paste a complete HTML page?

Is what I write saved?

Frequently asked questions

What is the minimal valid HTML5?

A doctype, an html tag with lang, a head with a charset and title, and a body. The viewport is not required by the specification, but it is essential for pages that will be viewed on a phone.

Why does the doctype matter?

Without it browsers enter quirks mode, with old box-model and font-size rules. With the html doctype the page renders in standards mode.

Does the editor change my head?

It only adds: the console script after the opening tag and the pane CSS before the closing tag. The rest of your head stays as written, and the downloaded file carries no console script.