How to embed PDF in HTML

09 / 6 / 2021

其他員額

How to add, remove and change margins on your PDF

Learn More

How to add GIF in your PDF

Learn More

How to sync PDF annotations and files in different devices

Learn More

One of the finest features of a PDF is its portability. Because these files are easy to transfer and viewed anywhere, users are able to embed them anywhere including websites. It’s easy to learn how to embed PDF via HTML and today, we’re showing you those ways with an easy-to-follow guide.

html codes embedding PDF

To begin embedding, the first step that you need to take is to get a host where you will code your HTML and upload your PDF file. In coding, there are two ways of embedding a PDF via HTML – first is using the code <embed> or <object> and the second is using tags <a> or <iframe>

While both can provide the same output of embedding documents, the difference relies on older and newer versions of HTML. Some will accept older codes and some will accept newer ones. While the first method works, it is known to many that usage of such code is decreased due to its depreciation. EMBED tag is basically out of the picture because it does not follow HTML4 standards. This is why the second method is created and shown. Here’s how to code those tags properly:

Embedding using the FIRST METHOD can be written in such:

<html>

     <head>

          <title> TITLE </title>

     </head>

     <body>

          <embed src="/uploads/pdfdocument/pdf " /> 

     </body>

</html>

html codes

Embedding using the SECOND METHOD can be written in code as such:

USING <A>

<html>

     <head>

          <title> TITLE </title>

     </head>

     <body>

          <h1> header </h1>

          <p> Text before the PDF file <a href=”upload/pdfdocument.pdf”> sample alt text link </a>

     </p>

     </body>

</html>

 

USING <IFRAME>

<html>

     <head>

          <title> TITLE </title>

     </head>

     <body>

          <h1> header </h1>

          <iframe src="/uploads/pdfdocument.pdf" width="300px" height="500px">    

          </iframe>

     </body>

</html>

 

What’s great about the second method is the fact that you can adjust the width and height of the embed so you can control how it looks on your site. You can set the width and height based on percentages, pixels (px), or cm.

 

 

Want to get updates and subscribe to our blog? Get weekly e-notifications by creating an account with us:  DeftPDF online