Why does my HTML file not render correctly in the Files app?

Short answer

The Files app on iPhone and iPad opens HTML in Quick Look, a lightweight preview rather than a browser. In many cases scripts don't run, linked local CSS and images don't load, and some files even appear as raw code. To see the page as intended, open it in an app that renders it with a full web engine, such as HTML Keep.

What Quick Look actually does with HTML

Quick Look is built to show a fast, safe preview of almost any file. For HTML that usually means a static snapshot of the markup with only some of the page's features.

That is a sensible design for previewing attachments, but it explains why an HTML file is not rendering correctly in the Files app even though it looks fine on your computer.

The same preview appears in other places too, such as when you tap a file in Messages or Mail, so the symptoms below often show up there as well.

Safari doesn't help much here either. On iPhone and iPad there is no simple way to type a file path and browse local files the way a desktop browser can.

Match the symptom to the cause

• Buttons, menus, tabs or charts do nothing: JavaScript typically doesn't run in the preview.
• Plain black-and-white text, no layout: the page's separate style.css file isn't being loaded, or isn't on the device at all.
• Broken image icons: images are referenced by relative paths that the preview can't resolve, or the image folder wasn't copied.
• You see raw tags like <div> instead of a page: the file may be treated as text, for example if its extension isn't .html or .htm.
• Fonts look generic: web fonts loaded from the internet, or bundled font files the preview ignores.

Fix it by opening the file in a real web view

1. Install HTML Keep from the App Store (download page).
2. In Files, touch and hold the HTML file and tap Share.
3. Choose HTML Keep from the list of apps. If you don't see it, scroll the app row or tap More.
4. The page renders with Apple's WebKit engine, the same engine Safari uses, so JavaScript, alerts and in-page links work.
5. The file is saved as a project in your library, so next time you open it there rather than from Files.

When the page has more than one file

If your HTML loads a CSS file, a script file or an images folder, sending only the .html file leaves those behind. The page will look broken in any viewer.

Keep the folder together by compressing it. In Files, touch and hold the folder and tap Compress; on a Mac, right-click it and choose Compress.

Open the resulting ZIP in the viewer and it unpacks into its own project with relative paths intact. If the folder has several HTML pages, you can switch between them from the page list. Details are in why HTML loses CSS and JavaScript on iPad.

Other checks if something is still off

• Confirm the extension is .html or .htm, not .txt or .html.txt.
• Connect to the internet if the page loads libraries or fonts from a CDN.
• Server-side code such as PHP, Node or Python can't run from a local file; the page needs a web server for that.
• Check that file and folder names in the code match exactly, including upper and lower case, since paths can be case-sensitive.
• If the code has a bug, fix it in your editor and re-import. The viewer shows pages as written and doesn't repair broken HTML.

For more about what scripts can do locally, read running local HTML and JavaScript on iPhone.