Bash-scriptingHow-ToBeginner · 2 min read

Bash Script to Generate HTML Report with Example

Use a Bash script with echo commands to write HTML tags into a file, for example:

echo "Report
" > report.html

generates a basic HTML report.

📋

Examples

InputRun script with no data

Output<html><body><h1>Report</h1><p>No data available.</p></body></html>

InputRun script with sample data

Output<html><body><h1>Report</h1><ul><li>Item 1</li><li>Item 2</li></ul></body></html>

InputRun script with empty list

Output<html><body><h1>Report</h1><p>No items found.</p></body></html>

🧠

How to Think About It

To create an HTML report in Bash, think of the report as a text file with HTML tags. Use echo to write the opening tags, add content lines dynamically, then close with the ending tags. This way, you build the report step-by-step.

📐

Algorithm

Start the HTML file with <html> and <body> tags.

Add a heading for the report title.

Insert dynamic content such as paragraphs or lists.

Close the body and html tags to finish the file.

Save the output to an .html file.

💻

Code

bash

#!/bin/bash

output_file="report.html"

# Start HTML
cat <<EOF > "$output_file"
<html>
<head><title>Sample Report</title></head>
<body>
<h1>Report</h1>
EOF

# Add content
items=("Item 1" "Item 2" "Item 3")
if [ ${#items[@]} -eq 0 ]; then
  echo "<p>No items found.</p>" >> "$output_file"
else
  echo "<ul>" >> "$output_file"
  for item in "${items[@]}"; do
    echo "  <li>$item</li>" >> "$output_file"
  done
  echo "</ul>" >> "$output_file"
fi

# End HTML
cat <<EOF >> "$output_file"
</body>
</html>
EOF

# Print output file path
echo "HTML report generated: $output_file"

Output

HTML report generated: report.html

🔍

Dry Run

Let's trace the script generating a report with three items.

Create HTML header

Writes , , , and

Report

to report.html

Add list items

Loops over items array and writes

Item 1

Item 2

Item 3

inside

Close HTML tags

Writes and to complete the file

Step	Action	Content Written
1	Write header	, , , Report
2	Write list items	Item 1 Item 2 Item 3
3	Write footer

💡

Why This Works

Step 1: Start HTML structure

The script uses cat < to write the opening HTML tags and title to the file, setting up the page structure.

`Step 2: Add dynamic content`

It checks if the items array is empty; if not, it loops through each item and appends it as a list item inside <ul> tags.

`Step 3: Close HTML tags`

Finally, it appends the closing </body> and </html> tags to complete the HTML document.

🔄

`Alternative Approaches`

Using printf for formatting

bash

#!/bin/bash
output_file="report.html"

printf '<html><body><h1>Report</h1><ul>' > "$output_file"
items=("Item A" "Item B")
for item in "${items[@]}"; do
  printf '<li>%s</li>' "$item" >> "$output_file"
done
printf '</ul></body></html>' >> "$output_file"
echo "HTML report generated: $output_file"

Using <code>printf</code> allows more control over formatting and avoids multiple echo calls.

Generating HTML with a here document including variables

bash

#!/bin/bash
output_file="report.html"
items=("One" "Two")

cat > "$output_file" <<EOF
<html>
<body>
<h1>Report</h1>
<ul>
$(for i in "${items[@]}"; do echo "  <li>$i</li>"; done)
</ul>
</body>
</html>
EOF

echo "HTML report generated: $output_file"

This method embeds the loop output inside a here document for cleaner code.

⚡

`Complexity: O(n) time, O(n) space`

`Time Complexity`

The script loops through each item once to add it to the report, so time grows linearly with the number of items.

`Space Complexity`

The script stores the items in an array and writes output directly to a file, so space grows linearly with input size.

`Which Approach is Fastest?`

Using printf or embedding loops in here documents can be faster and cleaner than multiple echo calls.

Approach	Time	Space	Best For
Echo with append	O(n)	O(n)	Simple scripts, beginners
Printf formatting	O(n)	O(n)	Better formatting control
Here document with embedded loop	O(n)	O(n)	Cleaner code, moderate complexity

💡

Use arrays and loops in Bash to dynamically add multiple items to your HTML report.

⚠️

Beginners often forget to append (>>) to the file, overwriting content instead of adding to it.