HTML is for screens. PDF is for sending and printing. If you’ve got an HTML page you need to email, archive, or attach to a ticket, converting it to PDF turns it into something predictable.

Think of the PDF as a snapshot: you’re freezing a moment of the document so it behaves the same everywhere. That’s great for receipts, reports, invoices, specs, and “please just look at this exact thing” emails.

TL;DR

  • Open TinyUtils Document Converter
  • Upload your HTML file (or paste HTML code)
  • Select PDF as output
  • Download the PDF
  • Expect basic formatting and links to come through

If you’re converting a live webpage, your browser’s Print dialog is often the fastest option: it already has print settings, page size controls, and it can hide “screen stuff” like nav bars. Use a converter when you need repeatable output, batch conversion, or you’re working from saved HTML files.

Bonus: a lot of sites already have @media print styles that make the page look decent on paper. If the page has a “print view,” it’s worth trying before you fight with HTML/CSS fidelity.

Why HTML to PDF?

  • Print layouts — PDF handles page breaks properly
  • Email attachments — Recipients see exactly what you see
  • Legal documents — PDF is accepted for contracts
  • Archival — PDF/A is a preservation standard
  • Offline reading — No browser needed

What's preserved

  • Text formatting — Headings, paragraphs, emphasis
  • Links — Clickable in the PDF
  • Images — Embedded (inline or linked)
  • Tables — Structure and borders
  • Colors — Background and text colors
  • Fonts — Web-safe fonts render correctly

What changes

  • Interactive elements — Forms, buttons don't work
  • JavaScript — If content is injected by JS, it may not appear unless it’s present in the saved HTML
  • Animations — Static snapshot
  • Infinite scroll — Only visible content

How to convert

  1. Go to TinyUtils Document Converter
  2. Upload your .html file
  3. Select PDF from output options
  4. Click Convert
  5. Download the PDF

CSS support

Inline CSS and embedded <style> blocks are your best friend here. External stylesheets referenced via <link> may or may not be fetched, depending on the converter. If your converter supports bundling assets (for example, HTML + CSS + images in a ZIP), that’s usually the most reliable path.

If you’ve ever seen a PDF come out “unstyled,” this is usually why: the HTML references CSS over the network, and the converter can’t (or won’t) fetch it. The fix is to make the HTML self-contained, either by inlining CSS or bundling files together.

For best results, use print-friendly CSS: 

@media print {
  .no-print { display: none; }
  body { font-size: 12pt; }
}

Bundling HTML + CSS + images (reliable workflow)

If you’re converting something you control (a report, an exported email, a saved page), bundling assets is the easiest way to get repeatable output. The idea is simple: keep everything in one folder so relative paths work.

  1. Create a folder (for example report/).
  2. Put index.html in that folder.
  3. Create a styles/ folder and put your CSS there.
  4. Create an images/ folder and put images there.
  5. Zip the folder and convert the ZIP (if your converter supports it).

This is how you avoid “works on my laptop” styling issues. It also keeps you from rewriting absolute URLs all over your HTML.

PDF conversion rewards boring, predictable HTML. A few small tweaks can save you from “why is half my sidebar on page 3?” moments:

  • Set a max width so text doesn’t run edge-to-edge on wide pages.
  • Disable sticky headers for print (position: sticky and fixed nav can duplicate).
  • Avoid giant tables unless you have print styles that wrap gracefully.
  • Use real headings (h1/h2) instead of “big bold divs” so the structure survives.

If you’re trying to keep a section together (like a table row group, a signature block, or a small card), add a print rule: 

@media print {
  .keep-together { break-inside: avoid; page-break-inside: avoid; }
}

It won’t fix every layout, but it helps for the classic “this heading ended up alone at the bottom of the page” problem.

Images

Images are embedded in the PDF. If your HTML references images with relative paths, some converters can resolve them and some can’t. For best results, use absolute URLs (if the images are public), or bundle the HTML + images together if your converter supports that.

Page setup

PDF output uses a default page size and margins unless you override it. Many tools default to A4 or Letter. If your converter respects @page, you can control it with CSS: 

@page {
  size: letter;
  margin: 1in;
}

Multiple files

Upload multiple HTML files and get a ZIP of PDFs. Each HTML becomes a separate PDF.

Quick “print polish” checklist

If you control the HTML/CSS and you want the PDF to look intentionally designed (not like a screenshot of a webpage), these small tweaks go a long way:

  • Hide navigation and footers: keep the content, drop the chrome.
  • Use a print-friendly width: wide layouts look great on screens and awkward on Letter/A4.
  • Turn on background colors only if you mean it: subtle backgrounds can become muddy in print.
  • Control page breaks: headings should stay attached to the paragraph they introduce.
  • Add a timestamp: a tiny “Generated on…” line helps when PDFs get forwarded forever.

It’s the difference between “here’s a page” and “here’s a document.”

FAQ

Can I convert a live website URL?

Currently, upload the HTML file directly. For website saving, use your browser's "Save As" to get the HTML, then convert.

Why is my PDF blank or missing chunks?

The usual culprit is JavaScript-rendered content. If the page builds itself after load (React/Vue apps, dashboards, infinite scroll), a saved .html file might not contain the real content — it just contains the app shell. In that case, your browser’s Print to PDF (from the fully loaded page) is often the most reliable option.

What about multi-page documents?

Long HTML content flows across multiple PDF pages automatically. Use CSS page-break-before/after for explicit control.

Are web fonts supported?

Google Fonts and other web fonts render if they're accessible. For the most predictable results, use system fonts.

Can I password-protect the PDF?

Not currently. Use a PDF tool after conversion for encryption.

Other conversions

Next steps

Have an HTML document that needs to be a PDF? Open TinyUtils Document Converter, upload your HTML, and download the PDF.