How to Embed PDF in HTML: 5 Practical Ways to Display PDFs on a Web Page

Embedding a PDF on a web page is useful when visitors need to read a document without downloading it first. A restaurant menu, product brochure, course handout, annual report, application form, white paper, or user manual can all be shown directly inside a page with a small amount of HTML.

The simplest way to embed PDF in HTML is to use an <iframe>, <object>, or <embed> tag that points to the PDF file. That works well for many basic pages, but it is not always the best choice. Browsers handle PDFs differently, mobile support can be inconsistent, and large PDF files can slow down the page. In some cases, converting the PDF to HTML or using a dedicated PDF viewer is a better experience.

This guide covers the practical options, with copy-ready code examples and notes on when to use each method.

Try It Free Try It Free Try It Free Try It Free

G2 Rating: 4.5/5 | 100% Secure

G2 Rating: 4.5/5 |100% Secure

Why Embed a PDF in a Web Page?

A PDF is usually designed for fixed layout: the page size, fonts, images, and spacing stay consistent across devices. That makes it ideal for documents where formatting matters. Embedding lets users view the document without leaving your site, which can reduce friction for short reference documents or pages where the PDF supports the surrounding content.

For example, a university page can show a course syllabus under the course description. A business can display a signed policy document or product sheet. A nonprofit can publish a report and keep visitors on the same page as the donation or contact form.

Embedding is most useful when the PDF is supporting content, not the main searchable content of the page. If the PDF contains your primary article, landing page, or product copy, embedding may not be ideal for SEO or accessibility. Search engines can index some PDFs, but HTML content is easier to structure, optimize, translate, and make responsive.

A good rule is simple: embed a PDF when the document format matters; convert it to HTML when the reading experience and search visibility matter more.

Before You Insert a PDF into HTML

Before you copy a code snippet, check a few details. Most problems with embedded PDFs come from file paths, server settings, file size, or browser behavior rather than the HTML tag itself.

Place the PDF Where the Browser Can Access It

Your PDF needs a valid URL. If the PDF is in the same project as your HTML file, you might use a relative path like this:

files/sample-document.pdf

If the file is hosted elsewhere, use the full URL:

https://example.com/files/sample-document.pdf

Avoid spaces and special characters in file names. A file called 2025-product-catalog.pdf is safer than Product Catalog Final Version (Updated).pdf. Clean names reduce broken links and make future maintenance easier.

Check the PDF Size

A large PDF can make a page feel slow, especially on mobile. If the document contains high-resolution images, scans, or many pages, consider compressing it before embedding. For long documents, you may also want to provide a direct download link next to the embedded viewer so users can open it separately.

Think About Mobile Behavior

Desktop browsers usually have built-in PDF viewing. Mobile browsers are less predictable. Some display the PDF inline, some open it in a separate viewer, and some download it. This is one reason a fallback link is important.

If mobile reading is critical, test the page on iOS Safari and Android Chrome. A PDF that looks fine on a desktop monitor may be awkward inside a narrow frame on a phone.

Confirm Access and Security Settings

If the PDF is behind a login, blocked by server permissions, or served from a different domain with restrictive headers, it may not display. Also remember that embedding a PDF does not “hide” it. If visitors can view it in the browser, they can usually access the file URL.

For general HTML behavior and browser support, the MDN Web Docs references for iframe, object, and embed are useful technical sources.

How to Embed PDF in HTML Using Native HTML Tags

Native HTML tags are the fastest way to display PDF in HTML. They require no JavaScript library and work well for simple use cases.

Method 1: Embed PDF in HTML Using iframe

The <iframe> tag is the most common option because it is easy to write and widely understood. It creates a rectangular frame inside your page and loads the PDF inside that frame.

<iframe
  src="files/sample-document.pdf"
  width="100%"
  height="700"
  title="PDF document viewer">
</iframe>

This is often enough for a documentation page, company brochure, event agenda, or form preview.

The src attribute points to the PDF. The width and height control the viewer size. The title attribute helps screen reader users understand what the frame contains.

If you want the frame to fit the width of the page, use width="100%". For height, avoid very small values. A height of 600 to 800 pixels is usually more usable on desktop pages than a short frame that forces constant scrolling.

Here is a slightly more practical version with a fallback link below it:

<iframe
  src="/documents/company-profile.pdf"
  width="100%"
  height="700"
  title="Company profile PDF">
</iframe>

<p>
  If the PDF does not display,
  <a href="/documents/company-profile.pdf">open the PDF in a new tab</a>.
</p>

Use <iframe> when you need the quickest way to open PDF in HTML and are comfortable with the browser’s default PDF viewer.

Method 2: Embed PDF in HTML Using object

The <object> tag is another solid option. It allows fallback content inside the tag, which is useful if the browser cannot render the PDF.

<object
  data="files/sample-document.pdf"
  type="application/pdf"
  width="100%"
  height="700">
  <p>
    This browser cannot display the PDF.
    <a href="files/sample-document.pdf">Download the PDF instead</a>.
  </p>
</object>

The data attribute identifies the file, and type="application/pdf" tells the browser what kind of resource it is loading.

The main advantage of <object> is that the fallback content sits naturally inside the element. If the PDF cannot be shown, users can still access the file. This makes it a good choice when you want a cleaner fallback than a separate paragraph below the viewer.

Use <object> when you want to embed PDF in web page layouts while keeping graceful fallback content in the same block.

Method 3: Insert PDF into HTML Using embed

The <embed> tag is short and direct. It was designed for embedding external content, including PDFs.

<embed
  src="files/sample-document.pdf"
  type="application/pdf"
  width="100%"
  height="700" />

The <embed> tag is convenient, but it does not support fallback content between opening and closing tags because it is a void element. If the PDF fails to load, you should add a separate link nearby.

<embed
  src="/downloads/report.pdf"
  type="application/pdf"
  width="100%"
  height="700" />

<p>
  Having trouble viewing the file?
  <a href="/downloads/report.pdf">Download the report</a>.
</p>

Use <embed> when you need a compact way to show PDF in HTML, but do not rely on it as your only access method.

Native Tag Comparison

For most websites, start with <iframe> or <object>. The difference is not dramatic, but the fallback behavior can matter.

Use <iframe> for simple embedding and familiar behavior.

Use <object> when built-in fallback content is important.

Use <embed> for short, basic examples or controlled pages where you also provide a download link.

All three methods depend on the browser’s PDF viewer. That means the toolbar, page controls, zoom behavior, printing, and downloading options may vary from one browser to another.

Better Ways to Display PDF in HTML for Real Websites

A code snippet can make the PDF appear, but a production page needs more care. A visitor should be able to read the document, open it separately, use the page on mobile, and recover if the embedded viewer fails.

Make the PDF Viewer Responsive

The simplest responsive approach is to wrap the viewer in a container and control the height with CSS.

<div class="pdf-wrapper">
  <iframe
    src="/documents/user-guide.pdf"
    title="User guide PDF">
  </iframe>
</div>

.pdf-wrapper {
  width: 100%;
  height: 75vh;
  min-height: 500px;
  border: 1px solid #ddd;
}

.pdf-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Using 75vh makes the viewer height relative to the browser window. The min-height prevents it from becoming too short on desktop. You can adjust these values based on your page layout.

For mobile pages, you may choose to hide the embedded viewer and show a clear button instead:

@media (max-width: 600px) {
  .pdf-wrapper {
    height: 500px;
  }
}

Do not trap users inside a tiny PDF window. If reading the document is the main task, a large viewer or “Open PDF” button is usually better.

Add Fallback Content and a Download Link

Even if your embedded PDF works today, a visitor’s browser, device, extension, or security setting may block it. Always include a normal link to the file.

<p>
  <a href="/documents/user-guide.pdf" target="_blank" rel="noopener">
    Open the PDF in a new tab
  </a>
</p>

This link also helps users who prefer their own PDF reader, need to save the file, or want to share the document URL.

Use PDF.js for More Control

If you need a consistent viewer across browsers, consider PDF.js, an open-source JavaScript PDF viewer from Mozilla. It can render PDF pages inside your web app and gives you more control over navigation, zoom, search, and UI.

PDF.js is useful when:

You want the PDF viewer to look the same across browsers.

You need custom controls or page navigation.

You are building a document portal, learning platform, or internal dashboard.

Native browser PDF behavior is too inconsistent for your users.

The trade-off is complexity. PDF.js requires setup, JavaScript, and more testing than a simple <iframe>. For a basic brochure or one-page flyer, native HTML embedding is usually easier.

Be Careful with Google Drive and Cloud Viewers

Some site owners use Google Drive or another cloud viewer to embed PDFs. This can be convenient if the file is already hosted there, but it introduces dependencies outside your site. Sharing permissions, viewer changes, blocked third-party content, or privacy requirements can all affect the result.

If you use a cloud viewer, test it in private browsing mode. That helps confirm that visitors who are not logged into your account can still view the PDF.

Convert PDF to HTML with PDFelement When Embedding Is Not Enough

Sometimes the best way to view PDF in HTML is not to embed the PDF at all. If the document contains important website content, conversion can create a better reading and SEO experience.

A PDF embedded in a frame remains a document inside a page. The surrounding page may have a title, heading, and short description, but the main content is still locked in a file-like experience. Converted HTML, by contrast, can become part of the page structure. It can adapt more naturally to screen sizes, use standard headings, and work better with website navigation.

This is where PDFelement fits into the workflow. You can use it before publishing to clean up the PDF, reduce file size, run OCR on scanned documents, edit outdated text, organize pages, and convert the PDF into HTML when a static embedded viewer is not the right format.

Try It Free Try It Free Try It Free Try It Free

G2 Rating: 4.5/5 | 100% Secure

G2 Rating: 4.5/5 |100% Secure

A practical workflow looks like this:

Step 1: Open and Prepare the PDF

Open the document in PDFelement and check whether it is ready for web use. If the file is scanned, run OCR so the text becomes selectable and convertible. If the file is too large, compress it before uploading. If it contains extra pages, remove them before publishing.

This preparation step matters. A messy PDF produces a messy web experience, no matter which HTML tag you use.

Step 2: Convert the PDF to HTML

Use the conversion option in PDFelement to export the PDF as an HTML file. This can be useful for brochures, forms, manuals, or older PDF-only content that you want to turn into web-friendly pages.

After conversion, review the HTML output before publishing. Complex layouts, tables, multi-column designs, and scanned pages may need cleanup. Treat conversion as a strong starting point, not a replacement for editorial review.

Step 3: Publish or Reuse the Converted Content

Once converted, you can place the HTML content into your CMS or web project. This is especially helpful when you want the content to be easier to read on phones, easier to update, or easier for search engines to understand.

If you still need the official PDF version, keep both options: publish the HTML version for reading and include a “Download PDF” button for users who need the original document.

Try It Free Try It Free Try It Free Try It Free

G2 Rating: 4.5/5 | 100% Secure

G2 Rating: 4.5/5 |100% Secure

Troubleshooting: Why Your PDF Does Not Open in HTML

If the PDF does not display, do not immediately switch tags. Check the basics first.

The PDF Path Is Wrong

A broken path is the most common issue. Open the PDF URL directly in your browser. If the file does not load by itself, it will not load inside an iframe, object, or embed tag.

For local testing, make sure your folder structure matches your code. If your HTML file is in the project root and your PDF is inside a files folder, the path should look like this:

src="files/document.pdf"

If your HTML file is inside another folder, the relative path may need to change.

The Server Forces the PDF to Download

Some servers send headers that tell the browser to download the PDF instead of displaying it inline. The relevant header is usually Content-Disposition.

For inline viewing, the server typically needs:

Content-Disposition: inline
Content-Type: application/pdf

If you do not manage the server, ask your developer or hosting provider to check how PDF files are served.

The Browser Blocks Cross-Origin Embedding

If the PDF is hosted on another domain, browser security rules or server headers can block it from appearing inside your page. This is common with file storage systems, private portals, and some CDN configurations.

Host the PDF on the same domain when possible. If that is not possible, confirm that the external service allows embedding.

The PDF Is Too Large or Too Complex

A 100-page scanned catalog can load slowly or fail on weaker devices. Compress the PDF, split it into smaller files, or create an HTML landing page with separate links to each section. If the content must be read online, consider converting key sections to HTML.

The PDF Does Not Work Well on Mobile

Mobile browsers often handle embedded PDFs differently from desktop browsers. If mobile readers are important, provide a large “Open PDF” link above or below the embedded viewer. For long documents, a converted HTML version may be more usable than a tiny embedded frame.