HTML to Base64: Encode Markup for Data URIs

How to encode HTML to Base64

1. Paste your markup into Input · text, or press Sample for a small document.
2. Copy the Base64 from Output · Base64.
3. Keep Charset on UTF-8, and declare UTF-8 in the data URI or in the document (see below).
4. Prepend data:text/html;charset=utf-8;base64, if you need a data URI, or paste the bare Base64 into the API field that asked for it.

The sample <!doctype html> plus <h1>Hello from base64hub</h1> on two lines encodes to PCFkb2N0eXBlIGh0bWw+CjxoMT5IZWxsbyBmcm9tIGJhc2U2NGh1YjwvaDE+. Base64 to HTML reverses it.

Examples

Entities such as € are just text to Base64 and stay as they are; the browser resolves them after decoding. A string starting with PCFkb2N0eXBl or PCFET0NUWVBF is an HTML document (<!doctype or <!DOCTYPE), and PGh0bWw is <html.

Building a data:text/html URI

A complete data URI has four parts: the scheme, the media type, an optional charset and the Base64 flag.

data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+

Without charset=utf-8 in the URI or a <meta charset="utf-8"> in the document, a browser may read the bytes in a legacy encoding, and café shows as café. Putting the meta tag inside the HTML protects the document wherever it ends up.

Typical uses:

• In an iframe, <iframe src="data:text/html;base64,..."> shows a self-contained snippet without a separate file. For HTML you write by hand, the srcdoc attribute is often simpler, since it needs no encoding at all.
• Browser tests and other automation can load a fixture page from a data URI without a web server.
• Some email, PDF-rendering and document APIs accept an HTML body as a Base64 field so that quotes and line breaks need no JSON escaping.

Browsers do not let a web page navigate the main window to a data:text/html URL, so links and redirects to one fail silently or show an error. Iframes are not affected.

Size and alternatives

Base64 makes markup about a third larger: the 49-byte document <!doctype html><meta charset="utf-8"><p>café</p> becomes 68 characters. For mostly-ASCII HTML, a percent-encoded data URI is often shorter, because only a handful of characters such as #, % and non-ASCII bytes need escaping. Base64 is the safer choice when the markup is large, contains many special characters or goes into a field that only accepts Base64. The data URI generator builds data: links for HTML, CSS and images, and data URI performance covers caching and size trade-offs.

HTML to Base64 in code

import base64

html = '<!doctype html><meta charset="utf-8"><p>café</p>'
uri = "data:text/html;charset=utf-8;base64," + base64.b64encode(html.encode("utf-8")).decode()

// Node.js
const html = "<p>café</p>";
const uri = "data:text/html;charset=utf-8;base64," + Buffer.from(html, "utf8").toString("base64");
// "data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+"

In the browser, use the TextEncoder approach from Base64 in JavaScript, since btoa alone garbles or rejects non-ASCII characters. See also Base64 in Python.

FAQ