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