Article Categories

Selected Reading

Is there any way to embed a PDF file into an HTML5 page?

Javascript Web Development Front End Scripts

To embed a PDF file in an HTML5 page, you can use several methods. The most common approaches are using the <iframe> element, <object> element, or <embed> element.

Using iframe Element (Most Common)

The <iframe> element is the most widely supported method for embedding PDFs:

<!DOCTYPE html>
<html>
<head>
    <title>Embed PDF with iframe</title>
</head>
<body>
    <h1>PDF Embedded with iframe</h1>
    <iframe src="https://www.tutorialspoint.com/html5/html5_tutorial.pdf" 
            style="width:100%; height:600px;" 
            frameborder="0">
        <p>Your browser does not support iframes. 
           <a href="https://www.tutorialspoint.com/html5/html5_tutorial.pdf">Download the PDF</a>
        </p>
    </iframe>
</body>
</html>

Using object Element

The <object> element provides more control and is part of the HTML5 standard:

<!DOCTYPE html>
<html>
<head>
    <title>Embed PDF with object</title>
</head>
<body>
    <h1>PDF Embedded with object</h1>
    <object data="https://www.tutorialspoint.com/html5/html5_tutorial.pdf" 
            type="application/pdf" 
            width="100%" 
            height="600px">
        <p>PDF cannot be displayed. 
           <a href="https://www.tutorialspoint.com/html5/html5_tutorial.pdf">Download PDF</a>
        </p>
    </object>
</body>
</html>

Using embed Element

The <embed> element is simpler but provides less fallback options:

<!DOCTYPE html>
<html>
<head>
    <title>Embed PDF with embed</title>
</head>
<body>
    <h1>PDF Embedded with embed</h1>
    <embed src="https://www.tutorialspoint.com/html5/html5_tutorial.pdf" 
           type="application/pdf" 
           width="100%" 
           height="600px" />
</body>
</html>

Comparison

Method	Browser Support	Fallback Support	Best For
`<iframe>`	Excellent	Good	General use
`<object>`	Very Good	Excellent	Professional applications
`<embed>`	Good	Limited	Simple embedding

Key Points

Always include fallback content for browsers that cannot display PDFs
Consider using relative paths for local PDF files
Set appropriate width and height for better user experience
Test across different browsers as PDF support varies

Conclusion

The <iframe> element is the most reliable method for embedding PDFs in HTML5. Use <object> for more control and better fallback options when needed.

Lakshmi Srinivas

Updated on: 2026-03-15T23:18:59+05:30

776 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next