Udemy logo

HTML5 PDF Viewer In order to view PDF files on your HMTL5 website, you need to have them embedded in an HTML5 PDF viewer. A browser like Chrome already has a plugin to do that, but Firefox and Internet Explorer do not. So, your PDF file will display correctly to those who are on your website using Chrome. Other browsers will show the alternate content. There are alternatives to using a plugin, though. For instance, Adobe InDesign will help you build interactive pdfs. There are also other hints and tricks that can be used to present your PDF files so that everyone can view them.

Get an HTML5 PDF Viewer

There are numerous HTML5 PDF viewers on the web. For example, these websites all offer PDF viewers that can be used on your website and all browsers should be able to view your file:

Essentially, you upload your file and make the selection for HTML5 and then the output will be the code your need to embed in your webpage. When someone is on your webpage, they will be able to take a look at your PDF file in a viewer instead of a popup link. Most of these PDF viewer websites will also have software for sale so that you can have a copy of it on your computer instead of having to go to their website to use it online. Having a copy of the software allows you to protect your copy of the PDF if it is copyrighted and it also gives you the better version of the software usually.

Convert PDF Files to HTML5

You can convert the PDF file to HTML5 so that everyone can see your file just fine. In this way, you won’t have to worry about someone not being able to see the file because either their browser doesn’t have the plug in to view it or your plugin doesn’t work for their computer or browser.

There is software that you can purchase that will convert your PDF files to HTML5. There is also an online PDF to HTML5 converter that you can use. You have options to upload your PDF file and then have it display as a single page or as a magazine where the person viewing it can flip pages like they are reading a magazine. There is a customization option also.

The Code to Embed HTML5 PDF Viewer

Here is a bit of code that might work for viewing your PDF file in a viewer on your website:

<embed src=”PDFfiles/interfaces.pdf” width=”600″ height=”500″ alt=”pdf” pluginspage=”http://www.adobe.com/products/acrobat/readstep2.html”>

Of course, change the name interfaces.pdf with the name of your file. Start a folder on your server named PDFfiles and upload your PDF file there. You can give that a try and see if it works for you.

HTML5 – The New Way

The new language for writing HTML is called HTML5. This is the most current version and most websites started to switch over to the new language years ago. If you are not up to date on this new version, you should probably take an online class for HTML5 Fundamentals and get your website updated with the current version of the code.

Yep, you just finally got the last HTML codes down and here you are going to have to learn all over again. It is the story of our lives and it is the story of computers, technology and the Internet. But, it is time to jump on the band wagon and start using HTML5. It isn’t hard, it just calls everything something different.

One benefit to using HTML5, aside from the fact that most designers, Apple and Adobe are using it to create their stuff, is the new and improved page headings. You now get to use things that make sense like <header>, <footer> and <nav>. Your audio and video will now use tags like <audio> or <video>. Gone is the need for super long paragraphs of code in order to just have a video play on your website. You can still add some parameters, but now they are really quite simple and to the point.

Another thing that is gone is <div>. It seemed like just yesterday everything in a webpage needed to start with <div>. Now that has been replaced by something that is more to the point like <nav> or <header>.

Something new with HTML5 is the <canvas> tag. This allows all sorts of interaction on your website. You can write a game and allow people on your website to play it, people can draw things or interact in other ways right on your webpage. Cool, huh?

One very big reason to start using HTML5 on your websites is mobile. More and more people every single day are joining the mobile revolution and surfing the web on their IPad or smartphone. If you want to be able to sell your products to those people then your website needs to be able to handle mobile. One huge change is that Adobe has ended mobile flash. HTML5 has replaced mobile flash. If you want to be able to reach those mobile users, then you need to write things in HTML5 right away.

It Is Time for HTML5

There are lots of ways to accomplish an HTML5 PDF viewer on your website. You can embed code to take care of it simply or you can use a plugin for your website. There are also websites that have free online code generators that will write code for you so that your PDF file will display like a magazine and your customers can flip the pages right on your website. If you want to learn more about HTML5 or want to take a crash course in HTML5 see the online classes that are available on this Udemy.com website.

Page Last Updated: April 2014

Top courses in HTML

HTML students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.

Request a demo