DEV Community

Jim L
Jim L

Posted on

The six ways an HTML file breaks the moment it leaves your machine

I wrote a single-file HTML demo, tested it in my browser, it worked perfectly, then I sent the file to a client and got a screenshot of a blank white page. This has happened to me enough times now that I finally sat down and catalogued what actually goes wrong, because it works on my machine stops being funny after the third time.

The most common one is a missing charset declaration. Your editor and browser both default to UTF-8 silently, so a page full of curly quotes or an em dash renders fine locally and turns into garbled boxes the second it's opened somewhere with a different default encoding. Second, absolute file:// paths for images or scripts, which point at your hard drive and simply don't exist on anyone else's. Third, blocked mixed content: an HTTPS page trying to load an HTTP resource gets silently blocked by the browser with zero visible error, so the page just looks broken with no clue why.

Fourth is a missing viewport meta tag, which looks fine on your desktop monitor and turns into a tiny unreadable page the moment someone opens the link on a phone. Fifth, unresolved script references, a relative path to a JS file that lived in the same folder on your machine but doesn't exist wherever the HTML ends up. Sixth, inline event handlers that some hosts and mail clients strip out for security reasons, silently killing any interactivity the page had.

Every one of these passes a local test because your machine already has the missing context: the right encoding default, the file sitting next to its scripts, no mixed-content policy tripping. The bug only exists once the file is somewhere else, which is exactly when you're least able to debug it.

After cataloguing the list I started running new files through htmlhosting's publish flow, which checks for all six of these before the page goes live and offers a one-click fix where a safe default exists, charset gets added, a relative path gets flagged, that kind of thing. It caught the missing viewport tag on a page I was sure was fine, purely because I'd built it and tested it on a monitor, never a phone.

It's not a replacement for actually testing your own work. But it catches the specific class of bug that's invisible until the file leaves the room you wrote it in, and that's the exact moment you have the least ability to fix it.

Top comments (0)