How to Beautify HTML Files (in Bulk) on Mac

Learn how to easily beautify HTML files in bulk on your Mac to improve their visual appeal and readability and streamline your workflow.

By . in Desktop. Updated on .

If you are a web developer or designer, you may find yourself working with a large number of HTML files. While these files may contain valuable content, they can sometimes be difficult to read or edit due to formatting issues. Beautifying your HTML files, or making them properly formatted, allows them easier to read, modify and debug. However, manually beautifying a large number of HTML files can be a time-consuming task.

tidy vs untidy html codes

Fortunately, with a little bit of scripting knowledge, you can automate the process of beautifying HTML files using a Bash script on your Mac. In this article, we will guide you through the process of creating a Bash script that will allow you to beautify your HTML files in batches.

By the end of this tutorial, you will have a fully-functional Bash script that you can use to quickly and easily beautify multiple HTML files at once, saving you time and effort.

Here’s how an unformatted, or untidy HTML file looks like:

<!DOCTYPE html><html><head><title>Example Website</title>
<link rel="stylesheet" href="style.css"></head><body>
<div class="header"><h1>Welcome to our Website</h1><nav><ul><li>
<a href="index.html">Home</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact Us</a></li></ul></nav></div><div class="content"><h2>About Us</h2> 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ultrices mauris. Sed finibus mauris et tortor malesuada, at elementum nunc lacinia. Donec euismod elit nec arcu vulputate eleifend. Duis euismod mauris at nisl consequat, sit amet pretium dolor luctus. Etiam lobortis, ex vitae consectetur congue, magna odio dignissim ante, eu tristique sapien turpis id odio. Nam dignissim tellus et ligula dignissim, a sollicitudin magna posuere. Nulla facilisi. Donec et metus volutpat, feugiat quam non, dictum libero. Curabitur auctor, libero sit amet interdum facilisis, ante sapien eleifend turpis, at congue ex mi id velit.</p></div>
<div class="footer"><p>© 2023 Example Website</p></div></body></html>

And here’s how it would look like after being formatted:

<!DOCTYPE html>
<html>
<head>
  <meta name="generator" content="HTML Tidy for HTML5 for Apple macOS version 5.8.0">
  <title>Example Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <h1>Welcome to our Website</h1>
    <nav>
      <ul>
        <li>
          <a href="index.html">Home</a>
        </li>
        <li>
          <a href="about.html">About Us</a>
        </li>
        <li>
          <a href="contact.html">Contact Us</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="content">
    <h2>About Us</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ultrices mauris. Sed finibus mauris et tortor malesuada, at elementum nunc lacinia. Donec euismod elit nec arcu vulputate eleifend. Duis euismod mauris at nisl consequat, sit amet pretium dolor luctus. Etiam lobortis, ex vitae consectetur congue, magna odio dignissim ante, eu tristique sapien turpis id odio. Nam dignissim tellus et ligula dignissim, a sollicitudin magna posuere. Nulla facilisi. Donec et metus volutpat, feugiat quam non, dictum libero. Curabitur auctor, libero sit amet interdum facilisis, ante sapien eleifend turpis, at congue ex mi id velit.</p>
  </div>
  <div class="footer">
    <p>© 2023 Example Website</p>
  </div>
</body>
</html>

The following is the bash script you will need.

#!/bin/bash

# Check if `tidy` command-line tool is installed
if ! command -v tidy &> /dev/null
then
    echo "Error: tidy is not installed. Please install tidy using 'brew install tidy' command." >&2
    exit 1
fi

# Check if input folder argument is provided
if [ $# -eq 0 ]
then
    echo "Error: No input folder provided. Please provide an input folder as an argument." >&2
    exit 1
fi

# Check if input folder exists
if [ ! -d "$1" ]
then
    echo "Error: Folder '$1' does not exist." >&2
    exit 1
fi

# Loop through HTML files in the input folder and beautify them
find "$1" -type f -name "*.html" -print0 | while read -d $'\0' file
do
    # Beautify HTML code and replace the original file
    tidy -indent -wrap 0 -quiet -m -i "$file"
done

# Exit with success status
exit 0

Download beautify_html.sh

What the Bash Script Does

This script is written in the Bash scripting language and it automates the process of beautifying HTML files in bulk on a Mac.

The script checks if the ‘tidy’ command-line tool is installed and if an input folder argument is provided. If the input folder exists, the script then loops through all HTML files in the input folder, and beautifies them using the ‘tidy’ command-line tool. The original HTML files are replaced with the beautified versions.

If ‘tidy’ is not installed or the input folder does not exist, the script will output an error message and exit with an error status. If everything runs successfully, the script exits with a success status.

How to Use This Script

Here is an easy-to-follow guide for using the script to beautify either a single HTML file or multiple files in bulk.

  1. Open a text editor on your Mac, such as TextEdit or Sublime Text.
  2. Copy and paste the script into a new file.
  3. Save the file with a name, such as “beautify_html.sh“, and make sure the file extension is “.sh“.
  4. Open the Terminal app on your Mac.
  5. Navigate to the directory where the script file is saved using the “cd” command.
  6. Type chmod +x beautify_html.sh and press Enter to make the script executable.
  7. Type ./beautify_html.sh /path/to/input/folder and press Enter to run the script, replacing /path/to/input/folder with the actual path to the folder containing your HTML files.
  8. Wait for the script to finish running. It will loop through all HTML files in the input folder and beautify them using the ‘tidy‘ command-line tool.
  9. Once the script has finished running, your HTML files should be beautified and saved as the original files.
WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail