How to Generate and View a Files List as HTMLA human-readable HTML file list is a convenient way to share directory contents, create a lightweight file browser, or publish file inventories on the web. This article walks through multiple approaches for generating and viewing a files list as HTML: manual methods, command-line scripts, small programs in popular languages, and automated workflows. You’ll get ready-to-use examples, styling tips, accessibility considerations, and ideas for adding metadata (sizes, dates, icons). By the end you’ll be able to produce a polished HTML file list for local use, intranets, or public websites.
Why produce a files list as HTML?
- Portability: an HTML file can be opened on any device with a browser—no special software required.
- Shareability: send a single HTML file or host it on a web server for others to browse.
- Customizability: you control layout, styling, and metadata (size, date, icons, descriptions).
- Automation-friendly: scripts can regenerate lists when files change.
Approaches overview
- Manual: handcraft a simple HTML list for a small folder.
- Command-line: one-liners and shell scripts (Linux/macOS/WSL).
- Python scripts: cross-platform, easy to extend.
- Node.js scripts: integrates well with web projects and static-site generators.
- Server-side: generate lists dynamically with PHP, Python (Flask), or Node (Express).
- Static-site integration: convert listings into pages during build (Hugo, Jekyll, Eleventy).
Basic HTML structure
A minimal HTML file list uses unordered lists or tables. For small directories, an unordered list is quick:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Files in my-folder</title> </head> <body> <h1>Files in my-folder</h1> <ul> <li><a href="file1.txt">file1.txt</a></li> <li><a href="image.png">image.png</a></li> <li><a href="report.pdf">report.pdf</a></li> </ul> </body> </html> For richer data (size, modification time), a table is cleaner:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Files in my-folder</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background: #f4f4f4; } </style> </head> <body> <h1>Files in my-folder</h1> <table> <thead> <tr><th>Name</th><th>Size</th><th>Modified</th></tr> </thead> <tbody> <tr><td><a href="file1.txt">file1.txt</a></td><td>1.2 KB</td><td>2025-08-25 10:12</td></tr> <tr><td><a href="image.png">image.png</a></td><td>246 KB</td><td>2025-08-20 09:05</td></tr> </tbody> </table> </body> </html> Command-line methods
Linux / macOS (bash) — simple list to HTML
A compact pipeline using ls and awk to produce a basic HTML list:
( echo '<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Files</title></head><body><h1>Files</h1><ul>' ls -1 | awk '{ printf "<li><a href="%s">%s</a></li> ", $0, $0 }' echo '</ul></body></html>' ) > file-list.html Notes:
- Run inside the directory you want to list.
- Filenames with newlines or special characters may break this pipeline; see the Python approach below for robust handling.
Bash — table with size and mtime
A more detailed script that uses stat (GNU or BSD differences):
#!/usr/bin/env bash echo '<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Files</title></head><body><h1>Files</h1><table><thead><tr><th>Name</th><th>Size</th><th>Modified</th></tr></thead><tbody>' shopt -s nullglob for f in *; do [[ -f $f ]] || continue size=$(stat -c%s "$f" 2>/dev/null || stat -f%z "$f") mtime=$(stat -c%y "$f" 2>/dev/null || stat -f%Sm "$f") echo "<tr><td><a href="${f}">${f}</a></td><td>${size}</td><td>${mtime}</td></tr>" done echo '</tbody></table></body></html>' Python: robust and cross-platform
Python handles edge cases (spaces, special chars) and is easy to extend.
script: generate_table.py
#!/usr/bin/env python3 from pathlib import Path from html import escape from datetime import datetime p = Path('.') # change to target directory rows = [] for f in sorted(p.iterdir()): if not f.is_file(): continue name = f.name href = escape(name) size = f.stat().st_size mtime = datetime.fromtimestamp(f.stat().st_mtime).strftime('%Y-%m-%d %H:%M:%S') rows.append((name, href, size, mtime)) html = ['<!doctype html>', '<html lang="en"><head><meta charset="utf-8"><title>Files</title>', '<style>table{border-collapse:collapse;width:100%}th,td{border:1px solid #ddd;padding:8px}</style>', '</head><body><h1>Files</h1><table><thead><tr><th>Name</th><th>Size</th><th>Modified</th></tr></thead><tbody>'] for name, href, size, mtime in rows: html.append(f'<tr><td><a href="{href}">{escape(name)}</a></td><td>{size}</td><td>{mtime}</td></tr>') html.append('</tbody></table></body></html>') print(' '.join(html)) Run and redirect output:
python3 generate_table.py > file-list.html Extensions:
- Format size bytes to KB/MB for readability.
- Add icons based on file extension.
- Recursively list directories and nest tables or use collapsible sections.
Node.js example
A small Node script using fs and path:
// generate-list.js const fs = require('fs'); const path = require('path'); const dir = process.argv[2] || '.'; const files = fs.readdirSync(dir, { withFileTypes: true }) .filter(d => d.isFile()) .map(d => d.name) .sort(); let html = `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Files</title></head><body><h1>Files</h1><ul>`; for (const f of files) { html += `<li><a href="${encodeURI(f)}">${f}</a></li>`; } html += `</ul></body></html>`; console.log(html); Run:
node generate-list.js > file-list.html Dynamic server-generated listings
If you host files behind a server, generate listings dynamically:
-
PHP (simple):
<?php $files = array_diff(scandir('.'), array('.', '..')); echo "<!doctype html><html><body><h1>Files</h1><ul>"; foreach ($files as $f) { if (is_file($f)) echo "<li><a href="$f">".htmlspecialchars($f)."</a></li>"; } echo "</ul></body></html>"; ?> -
Express (Node) and Flask (Python) are similar: read directory, build HTML, return response.
Security note: restrict which directories are exposed; properly escape filenames; consider authentication for private content.
Styling and UX suggestions
- Use a responsive table, keep text wrap-friendly for long names.
- Add file-type icons (SVG or font icon) for quick scanning.
- Provide sorting controls (client-side via JavaScript) by name, size, date.
- Add a search/filter box to quickly find files.
- Offer “download all” (zip generator) when listing many files.
Example: add a small client-side sorter using a library (List.js) or a few lines of vanilla JS.
Accessibility
- Use semantic HTML (table for tabular metadata).
- Add aria-labels where appropriate and ensure links are keyboard-accessible.
- Avoid relying solely on color to convey information.
- Include proper lang attribute and charset.
Automation & integration
- Cron + script: regenerate file-list.html every hour/day.
- GitHub Actions: generate listings as part of a static site build.
- Static site generators: during build, read directories and produce pages—use shortcodes or plugins.
Example advanced feature: recursive index with collapsible folders (concept)
- Generate JSON representing the directory tree.
- Render client-side with a small JS app that creates collapsible nodes and lazy-loads folder contents.
- Benefits: single-page browsing, fast for large trees, can fetch remote listings via API.
Troubleshooting
- Broken links: ensure the HTML file is placed at a level where relative links point correctly to the files.
- Encoding issues: ensure filenames are URL-encoded in href attributes. Use encodeURI/encodeURIComponent or server-side escaping.
- Special characters/newlines: use robust language libraries (Python pathlib, Node fs) instead of parsing ls output.
Quick checklist before publishing
- Escape filenames for HTML and URLs.
- Verify permissions allow web server to read files.
- Minimize exposure of sensitive files (use .htaccess, server configs, or authentication).
- Add a clear title and last-updated timestamp.
Generating and viewing a files list as HTML is a small engineering task with big usability wins: it turns raw directories into navigable web pages that are easy to share and maintain. Use the simple methods above to get started, and progressively enhance with styling, sorting, and automation as needed.