How can you embed a PDF into your HTML?
By embedding content directly into your pages you’re bringing your pages to life with the rich and relevant content that your visitors are looking for.
Whether that’s embedding PDF’s, images, maps or videos. You’re bringing relevant content directly to your readers, making your pages much more engaging and useful in the process.
Embedding a PDF
Embedding things is easy with HTML codes, and there’s a HTML code for anything you might possibly want to embed.
You’ve got <img> for embedding images, <audio> for embedding audio, hell you’ve even got the canvas area which you can do all kinds of cool stuff with.
But what about embedding a PDF?
Now at this point you might be thinking hang on a minute, I know there isn’t a PDF tag, so how can I possibly embed a PDF?
And you’d be right. There isn’t a <pdf> tag to natively embed our PDF files in HTML, but what can we use instead? The answer: the object tag.
The Object Tag
With the object tag we can embed any form of rich media. Whether that’s PDF files, Java applets or even flash (gah!).
To embed our PDF, here’s the code we’ll be needing:
<object data="http://site.com/example.pdf" width="100%" height="400" type='application/pdf'> <p>Sorry, the PDF couldn't be displayed :(</p> </object>
Let’s just do a quick breakdown of what all this means.
What we’re doing here is defining an object that’s going to be embedded into the HTML, in this case our PDF.
Then we set the width and height that it’s going to be on our page, you might want to adjust these when you use it on your own website.
We set the type as “application/pdf” to let the web browser know that this is a PDF.
Finally, in between the <object> tags, we put some text that will be shown if the PDF is unable to load.
Now if you put that bit of code on your webpage and link it up to your PDF file, you’ll get something that looks a little like this:
If you’re unlucky, then you might instead be reading :
Sorry, the PDF couldn't be displayed :(
And that’s all there is to it! Now you can go and embed PDF’s directly onto your website. How do you embed files in your HTML? Let us know in the comments!