<main>
  <h2>The <code>download</code> Attribute Combined with a Data URI + JavaScript to Let the User Download Custom HTML</h2>

  <p>Enter some HTML in the text box, then use the "Download HTML" link to download the content you just created. You can then view the HTML file on your system. This uses the <code>download</code> attribute, along with a data URI and some JavaScript to make this work.</p>
  <textarea id="txt" cols="60" rows="7"><body><p>Some Example HTML</p></body></textarea>
  <p><a href="nothing.html" id="link" download="code.html">Download Content as HTML</a></p>

</main>
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

p:last-of-type {
  text-align: center;
}

code {
  color: firebrick;
}
function downloadCode(link, code) {
  link.href = 'data:text/html;charset=utf-8,' + code;
}

document.getElementById('link').addEventListener('click', function () {
  downloadCode(this, txt.value);
}, false);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.