How to Validate Your HTML Output with HTMLProofer

If you generate HTML files, then HTMLProofer is a tool you can’t afford to overlook! It simplifies the process of checking your HTML output to ensure everything is working just as it should. In this blog post, we’re diving deep into how to install, configure, and use HTMLProofer to catch those pesky errors that can spoil your webpage’s charm.

What is HTMLProofer?

HTMLProofer is a comprehensive set of tests designed to validate your HTML output. It checks for various issues, from missing alt tags on images to the functionality of internal and external links. If you’re tired of manually checking these elements, HTMLProofer can automate this job for you seamlessly—especially useful in continuous integration scenarios!

Installation

To get started with HTMLProofer, follow these steps:

• Open your application’s Gemfile and add the following line:

gem html-proofer

• Next, run:

$ bundle install

• Alternatively, you can install it directly with:

$ gem install html-proofer

Note: For faster installation, especially with Continuous Integration builds, set NOKOGIRI_USE_SYSTEM_LIBRARIES to true in your environment.

What Does HTMLProofer Test For?

Here’s a breakdown of what HTMLProofer tests in your HTML documents:

• Images
  • Alt tags presence
  • Internal and external image links
  • HTTP vs HTTPS links
• Links
  • Internal link functionality
  • External link verification
  • CORS and SRI checks
• Scripts
  • Internal and external script loading
• Favicon validation
• OpenGraph metadata

Using HTMLProofer

To validate your HTML documents, you have several options:

• Check a single file:

HTMLProofer.check_file('pathtoafile.html').run

• Check a directory:

HTMLProofer.check_directory('./out').run

• Check multiple directories:

HTMLProofer.check_directories(['./one', './two']).run

• Check an array of links:

HTMLProofer.check_links(['https://github.com', 'https://jekyllrb.com']).run

An Analogy for Better Understanding

Think of HTMLProofer as a meticulous librarian responsible for checking every book (HTML file) in a vast library (your website). The librarian carefully looks for missing book covers (alt tags), checks if the books are placed correctly on their shelves (internal links), and ensures the books are current and printed properly (valid scripts and latest OpenGraph data). Just as a librarian wants every book to be accessible and correct for readers, HTMLProofer ensures every aspect of your HTML is perfect for web users!

Troubleshooting Tips

Even the best tools can sometimes present a few hiccups. Here are some common issues and remedies when using HTMLProofer:

• If you encounter SSL verification issues, you can bypass them by setting:

HTMLProofer.check_directory(out, typhoeus: { ssl_verifypeer: false, ssl_verifyhost: 0 }).run

• To modify the User-Agent used by Typhoeus, you can specify it like this:

HTMLProofer.check_directory(out, typhoeus: { headers: { "User-Agent" => "Mozilla/5.0 (compatible; My New User-Agent)" } }).run

• If links require cookies to be accessed, create a cookies file with the command:

HTMLProofer.check_directory(out, typhoeus: { cookiefile: ".cookies", cookiejar: ".cookies" }).run

• Need to exclude URLs using regular expressions? Just put them in slashes:

HTMLProofer.check_directories([out], ignore_urls: [/example.com/]).run

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

With HTMLProofer, you can automate the tedious task of HTML validation and ensure that your web content remains high quality. Whether you’re a seasoned developer or just starting, integrating HTMLProofer into your workflow will undoubtedly improve your project’s credibility and functionality.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.