How to make an HTML file self-contained

A self-contained HTML file is one that renders correctly on its own, with no sibling files. The CSS is in the document, the JavaScript is in the document, and the images travel inside it. Move the file anywhere and it still works.

This matters for sharing more than for building. The moment a page depends on a stylesheet next to it, sharing means shipping a folder and preserving its structure — and most ways of sending a file quietly destroy that. It is also why a single uploaded file cannot resolve relative paths to its neighbours: each upload gets its own link, so src="logo.png" looks for another share, not a sibling.

Inline the CSS

Replace the stylesheet link with a style block and paste the rules in. Nothing else changes — a style element in the head is exactly as valid as a linked file, and the cascade behaves identically.

If you use a CSS framework from a CDN, you have a choice. A CDN link keeps the file small but means the page needs the network and that host to stay up. Pasting the framework in makes the page genuinely standalone at the cost of size. For something you want working in five years, inline it.

Inline the JavaScript

Same move: a script element with the code inside, rather than a src pointing elsewhere. One thing to watch is that inline module scripts behave differently from classic ones — type="module" still applies, and import statements pointing at local files will not resolve once the file stands alone. If your code imports from other files, either bundle it first or flatten it into one script.

Embed the images

Images become data URIs — the bytes are base64-encoded and pasted directly into the src attribute. It looks alarming and works everywhere, in both HTML and CSS.

The cost is real and worth knowing before you commit: base64 is about a third larger than the raw bytes, so a 3 MB photo becomes roughly 4 MB of text in your file. That is fine for icons, logos, diagrams and screenshots. It is a bad trade for photography-heavy pages, where you are better off hosting the images separately and pointing at their URLs.

On a Mac or Linux box, base64 -i logo.png prints the encoded string, and the attribute becomes src="data:image/png;base64,<that string>". Most editors and plenty of small web tools will do it for you.

Fonts, and knowing when to stop

Web fonts can be embedded the same way inside an @font-face src, but they are heavy — a single weight is often 30–100 KB, and it is easy to quadruple your file chasing a typeface. Using a system font stack is frequently the better answer for something meant to be shared.

The general rule: inline anything the page cannot look right without, and leave anything that is decorative, enormous, or genuinely fine to fetch over the network.

The shortcut when an AI wrote it

If the page came out of Claude, ChatGPT or Gemini, you usually do not have to do any of this by hand. Asking for "a single self-contained HTML file with the CSS and JavaScript inlined" produces exactly that, because it is a normal thing to ask for and the models handle it well.

It is also worth asking on the way in rather than after the fact — regenerating is faster than surgery. There is more on that in the guide to sharing what an AI built you.

Check it actually is

The honest test: move the file to an empty folder on its own and open it. Anything that breaks was never inlined. Then check the size against wherever you plan to host it — on FileShare Pro the per-file cap runs from 5 MB on the free plan to 250 MB on Pro, so a data-URI-heavy page is worth weighing before you upload.