How to embed pdf in HTML?

In this post, you will learn how to embed a pdf file in HTML. And in case you want to know how to embed a YouTube video in HTML, then here’s the link – https://developerxon.com/2022/07/15/how-to-embed-youtube-video-in-html-using-iframe/

Here, I will tell you two ways to embed a pdf in HTML. The first way is to use the <a> tag and the second way is to use the <iframe> tag.

Embedding pdf using the <a> tag

<!DOCTYPE html>
<html>
    <head>
        <title>Embedded pdf</title>
    </head>
    <body>
        <h1>Embedded pdf example</h1>
        <a href="documents/pdfDocument.pdf">Open pdf</a>
    </body>
</html>

Output:

Here, I have embedded a pdf file in HTML using the <a> tag. When I click on the open pdf link, then the pdf opens inside the browser (screenshot below).

Now, let’s embed this pdf file using the <iframe> tag.

<!DOCTYPE html>
<html>
    <head>
        <title>Embedded pdf</title>
    </head>
    <body>
        <h1>Embedded pdf example</h1>
        <iframe src="documents/pdfDocument.pdf" height="500" width="500"></iframe>
    </body>
</html>

Output:

Here, I used the <iframe> tag to embed the pdf file.

If you are wondering what a <iframe> tag is then click on the link to know about the <iframe> tag – https://developerxon.com/2022/07/13/what-is-an-iframe-in-html-html-inline-frame/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: