PDF Or HTML? That is the Important Question!

PDF or HTML? In short normal (HTML) content on your web pages is nearly always better than a PDF. PDFs should be used sparingly and not as a substitute for web content for convenience purposes.

PDFs are designed with a fixed layout intended for printing, unlike fluid web pages created for screens of varying sizes. Although PDFs can be viewed in browsers, they are a poor substitute for HTML due to significant limitations in presentation, editing, accessibility and search engine optimization.

Why are PDFs not right for web content?

The advantage of a PDF is that it preserves the layout and look of the original document from which it was created. This consistency is maintained both on-screen and in print, making it ideal for printed materials but not ideal for web content.

Here are some of the disadvantages of PDFs over HTML:

• Bad for mobile uses: PDFs do not change size to fit the screen due to their fixed layout. They lack responsiveness so are problematical on mobile devices.
• Poor accessibility: PDFs are not designed for accessibility, requiring significant additional effort to add limited accessibility features.
• Bad news for SEO: Search engines cannot always crawl and understand the text within PDFs and rank them poorly as a result.
• Visitor tracking: You can’t track how users interact with a PDF on your site. Analytics tools won’t tell you how long they viewed it, what sections they focused on, or if they clicked on any links.
• Excluded from onsite search: PDFs are usually not included in onsite search features.
• Updating difficulties: To make changes, one must return to the original source document, edit it, generate a new PDF, and then upload the updated file.
• Not user-friendly: PDFs are not as user-friendly as web pages.
  • Encountering a PDF link can disrupt the user’s browsing experience. Rather than accessing information directly on the webpage, users must download and open a separate document. This process adds an additional click and a delay due to the download time, especially since PDFs are often larger files than their HTML equivalent.
  • PDFs are not always easy to skim read and users find it cumbersome to navigate through lengthy PDF documents.
  • PDFs can’t be easily copied or pasted and features like internal linking within the website are often missing.

Not mobile responsive, not accessible, not good for SEO, can’t track usage, not included in site search, hard to update, not user friendly – so why do we use PDFs?

So PDF or HTML? In most cases, it’s better for you and your site visitors to use standard HTML text on your website. This creates a better experience for all users (especially any visually impaired users), improves SEO and makes it easier for you to do updates.

When to (possibly) use a PDF

There are some situations where PDFs might sometimes be appropriate, for example:

• Print-Ready Content: when you intend for users to print content, such as forms to complete.
• Fillable Forms: PDFs can be made interactive, allowing users to fill out and submit forms electronically.
• Long Complex Documents: PDFs are great for documents like white papers or legal texts that users might want to download and reference later.
• Access Without Internet: For content that users may need offline, PDFs provide a convenient download option.
• Preserving Layouts: If your document has specific formatting that must remain intact, such as in a catalogue, PDFs might be a good option.

Evaluate each case and choose the format that best serves your audience.

On the face of it creating a PDF – by saving a WORD document as a PDF – is easy and that is probably why we see so many PDFs used on websites. But this does not make PDFs a suitable document format for publishing on your website. Producing web suitable PDFs is so much more work and still won’t be as good as properly written HTML content.

There are 2 main considerations if you do choose to use PDFs:

1. Optimising PDFs for the Web:

Keep them small to ensure they download quickly. In particular optimise images contained within the PDF as this is likely to be the vast majority of the file size.

2. Creating Accessible PDFs:

Creating accessible PDFs involves several extra steps to ensure that your documents are inclusive and comply with accessibility standards. You can find help on creating accessible PDFs at:

• Adobe: creating accessible PDFs.
• WebAIM: PDF accessibility and Acrobat
• Dennis Deacon: PDF Strategy in Improving Accessibility

Steps before converting a document to PDF

Ensure that your source document is well-structured by:

• Use clear and consistent fonts: Sans-serif fonts like Arial or Helvetica are generally easier to read on screens than serif fonts. Choose a font size that’s comfortable to read (around 10-12 points).
• Use proper paragraph formatting: Consistent spacing before and after paragraphs.
• Use lists: Bullet points or numbered lists for better readability.
• Use headings and subheadings: Break up your content with clear headings and subheadings to guide readers and improve scannability.
• Utilize margins and white space: Don’t cram everything onto the page. Leave enough white space for a clean and uncluttered look.

Optimizing for PDF conversion:

• Embed fonts: If you’re using non-standard fonts, ensure they are embedded in the PDF to avoid font substitution issues.
• Use high-quality images: Images with low resolution can appear pixelated in PDFs. Use high-quality images and adjust their size for optimal viewing.
• Check for broken links: If your source document contains links, make sure they’ll still work when converted to PDF. You might need to update them for offline access or remove them altogether.
• Consider hyperlinking tables of contents and indexes: For lengthy documents, creating hyperlinks within your table of contents and index allows users to easily navigate within the PDF.

After conversion: structure your PDF document with tags

• Add tags to provide the document with a structured hierarchy to the content just like web pages.
• Logically structured headings – h1, h2…h6 – in the correct sequence making it easier for assistive technologies to interpret.
• Tag paragraphs, lists, data tables.

Check logical reading order

• Because PDFs are print documents the coded text is not necessarily in the right order for reading. Ensure any containers are in the right stacking order.

Check colour contrast requirements

• Care needs to be taken with colour combinations for people with colour blindness issues.
• Good contrast helps everyone with reduced eyesight.
• Specific requirements are: a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Add alt tags for images

• Include Meaningful Alt Text. As with web pages any images or graphics needs meaningful alternative text to describe the content for screen readers and other assistive technologies.

Check tables are tagged

• Data tables should have tagged headers for columns and rows.
• Layout tables should not be tagged.
• Avoid tables with complex structures.

Make forms more accessible

• Add fillable form fields. These fields allow users to interact with the content.
• Provide descriptive labels for each form field to guide users effectively.
• Arrange the tab order of form fields logically. Users should be able to navigate through the form using the keyboard.

Creating accessible PDFs benefits all users, not just those with disabilities. But this is no simple task, that requires extensive testing with assistive technology and may be beyond the capabilities of many content editors. So for most website content, it’s best to stick with HTML.

If you really need to use a PDF you should also consider providing a suitable HTML alternative.

Summary: PDF or HTML?

HTML should always be your preferred choice.

While there are specific use cases for PDFs (such as printable forms and long offline documents), they should never replace actual content (HTML) on your website. Compared with HTML content, information published in a PDF is harder to find, use and maintain. More importantly, unless created with sufficient care, PDFs are bad for accessibility.

Use HTML to make information as easy as possible to find and use.

If you must use PDFs (eg printable resources), provide at least a summary but preferably the full content as HTML on a web page as well.