HTML Editor

Understand the topic

A small practice editor lets you compare source with rendered output. This editor keeps everything in the current example and does not save files to the server. The preview is isolated in a sandboxed iframe. Use it for short fragments, then move your finished work into an actual HTML file or the manually editable course files.

Worked example

<label for="source">HTML source</label><br>
<textarea id="source" rows="8" style="width: 100%; box-sizing: border-box;">&lt;h1&gt;My first page&lt;/h1&gt;
&lt;p&gt;Change this paragraph.&lt;/p&gt;</textarea><br>
<button type="button" id="run">Run HTML</button>
<iframe id="preview" title="Your HTML result" sandbox style="width: 100%; min-height: 180px; border: 1px solid #64748b;"></iframe>
<script>
const run = () => { document.querySelector("#preview").srcdoc = document.querySelector("#source").value; };
document.querySelector("#run").addEventListener("click", run); run();
</script>

Run HTML replaces the isolated preview document. Its sandbox does not allow scripts, so this editor is for HTML and CSS experiments rather than executing arbitrary JavaScript.

Practice

Add a heading, an unordered list, and a details element in the editor. Run the result and test the disclosure.

<h1>Study plan</h1><ul><li>Read</li><li>Practice</li></ul><details><summary>Next step</summary><p>Build a real page.</p></details>

Common mistake

Changes in this editor disappear when you reload. Put lasting lesson changes in lesson.php; the practice editor is not the admin file editor.

HTML documentation