HTML and CSS Reference
In-Depth Information
Given this syntax, we can include the data of this small Web page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
data URI Encoded Page
</title>
</head>
<body>
<h1>
I was encoded in a data URI!
</h1>
</body>
</html>
as
data:text/html;base64,PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPG1ldGEga
HR0cC1lcXVpdj0iQ29udGVudC1UeXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9dXRm
LTgiPg0KPHRpdGxlPmRhdGEgVVJJIEVuY29kZWQgUGFnZTwvdGl0bGU+DQo8L2hlYWQ+DQo8Ym9
keT4NCjxoMT5JIHdhcyBlbmNvZGVkIGluIGEgZGF0YSBVUkkhPC9oMT4NCjwvYm9keT4NCjwvaH
RtbD4NCg==
We can then load the address into a data URI-supporting browser, and it renders the
HTML page.
Since it is a valid address, we can even use this value in a link like so:
<p>
<a href="data:text/html;base64,PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg
0KPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1UeXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7IGN
oYXJzZXQ9dXRmLTgiPg0KPHRpdGxlPmRhdGEgVVJJIEVuY29kZWQgUGFnZTwvdGl0bGU+DQo8
L2hlYWQ+DQo8Ym9keT4NCjxoMT5kYXRhIFVSSXMhPC9oMT4NCjwvYm9keT4NCjwvaHRtbD4NCg=
=">
What does this load?
</a>
</p>
Commonly, this address form is used to include small images and icons. Here a red icon
image is placed via a data URI:
<p> <img src="data:image/gif;base64,R0lGODlhCgAKAKIAAP8AAP////+/v/9vb/
9AQP+Pj//MzP8QECH5BAAHAP8ALAAAAAAKAAoAAAMeGLrMIm0R0kwZAIxilDlZdnReCJCL2QjE0
zIAHEUJADs=" width="10" height="10" alt="*"></p>
