0
0
HtmlHow-ToBeginner · 3 min read

How to Embed PDF in HTML: Simple Methods Explained

You can embed a PDF in HTML using the <embed>, <iframe>, or <object> tags by specifying the PDF file URL in the src or data attribute. These tags allow the PDF to display directly inside the webpage without needing to download it separately.
📐

Syntax

Here are the three common HTML tags to embed a PDF:

  • <embed src="file.pdf" type="application/pdf" width="600" height="400">: Embeds the PDF directly.
  • <iframe src="file.pdf" width="600" height="400"></iframe>: Displays the PDF inside an inline frame.
  • <object data="file.pdf" type="application/pdf" width="600" height="400"></object>: Embeds the PDF with fallback content option.

Each tag uses the src or data attribute to point to the PDF file URL. Width and height control the visible size.

html
<embed src="file.pdf" type="application/pdf" width="600" height="400">

<iframe src="file.pdf" width="600" height="400"></iframe>

<object data="file.pdf" type="application/pdf" width="600" height="400"></object>
💻

Example

This example shows how to embed a PDF file named sample.pdf using the <embed> tag. The PDF will appear inside the webpage with a width of 600 pixels and height of 400 pixels.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Embed PDF Example</title>
</head>
<body>
  <h1>Embedded PDF Example</h1>
  <embed src="sample.pdf" type="application/pdf" width="600" height="400">
</body>
</html>
Output
A webpage with a heading 'Embedded PDF Example' and below it a visible embedded PDF viewer showing the content of sample.pdf sized 600x400 pixels.
⚠️

Common Pitfalls

Common mistakes when embedding PDFs include:

  • Using incorrect file paths or URLs in the src or data attribute, causing the PDF not to load.
  • Not specifying the type="application/pdf", which helps browsers recognize the file type.
  • Setting width and height too small, making the PDF hard to read.
  • Relying on <object> without fallback content, which can leave blank space if the PDF fails to load.

Example of wrong and right usage:

<embed src="wrongpath.pdf" width="300" height="200">  <!-- Missing type attribute and wrong path -->

<embed src="correctpath/sample.pdf" type="application/pdf" width="600" height="400">  <!-- Correct usage -->
📊

Quick Reference

Summary tips for embedding PDFs in HTML:

  • Use <embed> for simple embedding.
  • Use <iframe> if you want to embed with scrolling and navigation.
  • Use <object> to provide fallback content inside the tag.
  • Always specify type="application/pdf" for better browser support.
  • Set width and height to control the visible size.
✅

Key Takeaways

Embed PDFs in HTML using ,