How to Embed a PDF in HTML

To embed a PDF in HTML, use an <iframe>, <embed>, or <object> element that points to the PDF URL. If the PDF is mostly a download, a plain link is often better: it is simpler, more accessible, and more predictable on mobile browsers.

The important distinction is that HTML embeds ask the visitor's browser to display a PDF. They do not convert the PDF into HTML, and they do not guarantee identical rendering across Chrome, Safari, Firefox, Edge, iOS, Android, or locked-down corporate browsers. If you need HTML to become a PDF instead, read how to convert HTML to PDF online. If you need the reverse workflow, start with how to convert PDF to HTML.

Quick setup before you embed

Put the PDF somewhere the browser can reach it. That may be your site root, a public uploads folder, a CDN URL, or a same-origin path such as /files/catalog.pdf. Avoid pointing to a local file path like C:\Users\you\file.pdf or /Users/you/file.pdf; those paths only exist on your computer and will not work for visitors.

You can paste the example page markup into HTML Viewer Pro to preview the page structure and layout. That is useful for checking spacing, fallback copy, links, and responsive containers. Be honest about the boundary: HTML Viewer Pro is an HTML preview and editor, not a dedicated PDF viewer product, so the embedded PDF behavior still depends on the browser preview engine.

Also check the server response when the PDF is hosted by your own app. A PDF should normally be served with application/pdf. Some teams intentionally add a content disposition header to force download; that is fine for documents that must be saved, but it can prevent inline display. If an embed looks correct in your HTML and still downloads, inspect the file URL directly before rewriting the page.

Iframe example

An <iframe> is the most common way to show a PDF in a page because it creates a rectangular browsing context with its own source URL. Use a clear title, set a practical height, and include a visible fallback link near the embed for people whose browser blocks or downloads PDFs.

<section class="pdf-panel">
  <h1>Annual report</h1>
  <iframe
    src="/files/annual-report.pdf"
    title="Annual report PDF"
    width="100%"
    height="720"
  ></iframe>
  <p>
    <a href="/files/annual-report.pdf">Open or download the PDF</a>
  </p>
</section>

This pattern works well for reports, invoices, brochures, and spec sheets when readers are likely to skim without leaving the page. Add CSS around the iframe if the page needs a border, max width, or mobile height adjustment.

For responsive pages, avoid making the iframe height depend only on the viewport. A tiny phone screen can turn a PDF into a scroll area inside a scroll area, which is frustrating. A common compromise is a generous desktop height, a shorter mobile height, and a direct link immediately above or below the frame.

Embed example

The <embed> element is shorter and directly declares the resource type. It is useful when you want compact markup and do not need nested fallback content inside the element. You should still provide a nearby link, because some browsers treat embedded PDFs as downloads or disable inline viewing.

<div class="pdf-frame">
  <embed
    src="/files/menu.pdf"
    type="application/pdf"
    width="100%"
    height="650"
  />
  <p>
    Trouble viewing it?
    <a href="/files/menu.pdf">Download the PDF menu</a>.
  </p>
</div>

Use <embed> when the PDF is supplemental content rather than the whole page. If the PDF is the primary asset, make the download or open link prominent instead of hiding it below a tall frame.

Object example with fallback text

The <object> element can hold fallback HTML between its opening and closing tags. That makes it a strong choice when you want a graceful message if the browser cannot render the PDF inline.

<object
  data="/files/product-spec.pdf"
  type="application/pdf"
  width="100%"
  height="720"
>
  <p>
    This browser cannot display the PDF inline.
    <a href="/files/product-spec.pdf">Open the product spec PDF</a>.
  </p>
</object>

In practice, <object> and <iframe> can feel similar. Choose <object> when fallback content is central to the experience, and choose <iframe> when you want the most familiar embed pattern for page authors.

Simple link or download approach

Linking is often the best answer to "how to link a PDF in HTML." It avoids a cramped inline viewer, works better for assistive technology, gives mobile users control, and keeps your page lighter. You can use a normal link, an optional download attribute, or both an open link and a download link.

<p>
  <a href="/files/guide.pdf">Open the PDF guide</a>
</p>

<p>
  <a href="/files/guide.pdf" download>Download the PDF guide</a>
</p>

The download attribute is a hint, not a universal command. Browser policy, cross-origin URLs, file headers, and user settings can change whether the file opens or downloads. For important documents, write the link text so either outcome still makes sense.

Same tab, new tab, or download?

If the PDF is part of the current task, opening it in the same tab can be reasonable. If readers are filling out a form, comparing a product page, or following instructions, consider opening the PDF in a new tab with a normal link label that says what will happen. Do not rely on icons alone; screen reader users and keyboard users need text that explains the destination.

Use forced download sparingly. It is helpful for forms, print templates, brand assets, and signed files that people are expected to store. It is less helpful for a restaurant menu, event schedule, or public brochure where a quick in-browser read is the main goal.

Mobile and browser quirks

Desktop Chromium browsers usually show PDFs inline with built-in controls. Safari and Firefox also support inline display, but details such as toolbar controls, zoom, print, and download behavior differ. Mobile is less consistent. iPhones may open a PDF in Safari's viewer or hand it to another app. Android behavior varies by browser, PDF app, and enterprise device policy.

This is why a fallback link is not optional for serious pages. If the inline frame fails, is too small, or becomes hard to scroll, users still need a direct path to the file. Keep the PDF file size reasonable, avoid burying key instructions only inside the PDF, and test on at least one phone if mobile visitors matter.

Accessibility and content strategy

A PDF embed should not be the only accessible version of essential content. Add a heading before the viewer, a descriptive title on the iframe, and a link with useful text such as "Download the product safety sheet PDF." Avoid vague link text like "click here." If the document contains critical instructions, summarize them in HTML above or below the embed.

Also remember that a PDF can be inaccessible even when the HTML embed is valid. Tagged PDFs, reading order, selectable text, table structure, and image alt text are properties of the PDF itself. Embedding a scanned image-only PDF does not make it readable for screen readers.

Security and maintenance notes

Treat PDF files as public assets when you link them from a public page. Do not embed private quotes, invoices, contracts, or medical documents from a predictable URL unless your access controls are designed for that use. If the PDF requires authentication, test the logged-out state so visitors do not see a blank frame or a confusing sign-in page inside the embed.

Finally, keep ownership clear. Add the PDF to your normal content review process, update links when filenames change, and remove outdated versions from pages that still receive search traffic. A valid embed can still create a bad user experience if it points to last year's brochure.

When linking is better than embedding

• Link instead of embedding when the PDF is long, legal, print-oriented, or likely to be saved for later.
• Link when the page already has the important summary in HTML and the PDF is just the official copy.
• Link when you expect many mobile users, low bandwidth, or older managed browsers.
• Embed when a short PDF preview genuinely helps readers decide whether they need the document.

Related reading

• Convert HTML to PDF online
• How to convert PDF to HTML
• HTML Viewer Pro guide

FAQ