How to Build a Simple HTML Archive for Your Vintage Hair Accessory Collection
I started cataloguing my Edwardian hair combs and 1950s French-grip barrettes on loose paper. Within a year, I had three shoeboxes of half-legible descriptions, a confusing system of sticky notes, and no way to recall which tortoiseshell slide I bought at the Bath flea market versus the one from the Portobello Road stall. That mess pushed me to learn one small but transformative skill: writing a simple HTML file to keep a personal archive of vintage hair accessories. You do not need to be a web developer. A basic HTML document, saved on your computer or uploaded to a private folder, can become the backbone of your collection diary—searchable, presentable, and entirely yours. This article walks through the practical steps, with examples drawn directly from the world of vintage pins, combs, and bows.
Why HTML for a Collection Archive?
Paper notebooks fade. Spreadsheets feel clinical. Commercial cataloguing apps disappear or change their terms. An HTML page lives in a plain text file you can open in any browser. No subscription, no internet connection, no special software beyond a simple text editor. For a collector of vintage hair accessories—where provenance, material, and condition matter deeply—HTML lets you organise entries by date, maker, or style without wrestling with third-party platforms. One fellow collector I know uses a single HTML file to track her bakelite hair pins; she updates it every time she acquires a new piece, adding a photo filename and a note about the clasp mechanism. The file sits on her desktop, and she backs it up to a USB drive every month.

Setting Up Your First HTML Archive Page
Open any text editor—Notepad on Windows, TextEdit on Mac (in plain-text mode), or a free editor like Visual Studio Code. Create a new file and save it with the extension .html, for example my_vintage_collection.html. The skeleton is straightforward:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Vintage Hair Accessories Archive</title>
<style>
body { font-family: Georgia, serif; max-width: 800px; margin: 2em auto; padding: 0 1em; background: #faf7f2; }
h1 { color: #4a3b32; border-bottom: 2px solid #c4a99a; padding-bottom: 0.3em; }
.item { background: #fff; padding: 1em; margin: 1em 0; border-left: 4px solid #8b6f5c; }
.item h2 { margin-top: 0; font-size: 1.2em; }
.meta { color: #6b5a4e; font-size: 0.9em; }
</style>
</head>
<body>
<h1>Vintage Hair Accessories Archive</h1>
<p>Last updated: <em>February 2025</em></p>
</body>
</html>
The CSS inside the <style> tags is optional, but a little styling makes the page pleasant to read. I chose a warm beige background and a subtle brown accent that echoes the tones of old celluloid and amber. You can adjust colours to match your taste.
Structuring Each Accessory Entry
Once the skeleton is ready, add entries inside the <body>. For every accessory in your collection, create a <div class="item"> block. Here is a real example I use for a 1920s celluloid hair comb:
<div class="item">
<h2>Celluloid hair comb, circa 1925</h2>
<p class="meta">Acquired: March 2024, from a dealer in Brighton. Paid £28.</p>
<p><strong>Material:</strong> Cream celluloid with faint amber mottling.</p>
<p><strong>Condition:</strong> Good. Two teeth have minor crazing, but no cracks.</p>
<p><strong>Notes:</strong> The comb has a floral motif carved on the top edge. Likely made by the English company Leichner, based on the back stamp.</p>
<p><img src="celluloid_comb_1925.jpg" alt="Cream celluloid comb with floral carving" style="max-width: 300px;"></p>
</div>
Repeat this block for every item. Keep your image files in the same folder as the HTML file, and use relative paths (just the filename) so the pictures display correctly. If you do not want to embed images directly, you can instead write a text-only description—many collectors prefer that for speed.
Including Practical Details Specific to Hair Accessories
Vintage hair accessories have particular attributes that matter for preservation and styling. I encourage you to include these fields in every entry:
- Clasp or fastening type: French clip, spring hinge, alligator grip, slip-on, or comb teeth. This helps when you want to wear a piece without damaging it.
- Metal content: Silver, gilt, brass, or nickel. Some metals tarnish quickly; noting this reminds you to store the piece in an acid-free tissue.
- Size: Length and width in centimetres. A 1950s banane clip, for example, is usually around 10 cm long; knowing the size helps you plan the hairstyle.
- Provenance clue: Even a vague “bought at a car boot sale in Kent” is better than nothing. Over time, these details build a story.

Using Lists and Subheadings to Navigate Larger Collections
If your archive grows beyond twenty items, scrolling becomes tedious. You can add a simple table of contents at the top using anchor links. For example, give each <div class="item"> a unique id attribute, such as id="comb-01". Then list links at the top:
<ul>
<li><a href="#comb-01">Celluloid comb, 1925</a></li>
<li><a href="#barrette-02">Silver barrette with paste stones, 1930s</a></li>
<li><a href="#bow-03">Velvet hair bow, 1950s</a></li>
</ul>
Alternatively, organise entries by decade using <h2> subheadings for each era (Edwardian, 1920s, 1930s, and so on). That grouping mirrors the structure many collectors use in their notebooks. For an example of how I group by era in my own collector's diary, you might enjoy reading A Collector's February: Lessons from Edwardian Combs, Bakelite Pins, and the 1950s French Twist, where I walk through the specific traits that define each period.
What About Inventory Tables?
Some collectors prefer a table to compare pieces at a glance. A table works well for small data points like material, date, and price. Here is a minimal table you can insert:
<table>
<tr><th>Item</th><th>Year</th><th>Material</th><th>Price</th></tr>
<tr><td>Celluloid comb</td><td>1925</td><td>Celluloid</td><td>£28</td></tr>
<tr><td>Bakelite hair pin</td><td>1930s</td><td>Bakelite</td><td>£15</td></tr>
</table>
I use a table only for quick reference; the detailed <div> entries remain the heart of the archive because they hold condition notes and stories. You can combine both approaches on the same page.
Preserving Your HTML Archive Over Time
A plain HTML file is remarkably durable. I keep my archive on a USB drive and also upload a copy to a private folder on my personal website (which is free and gives me access from anywhere). If you do upload it, make sure the folder is not indexed by search engines—add a simple robots.txt or password-protect the directory. For guidance on that technical step, the blog post Why Your Vintage Accessories Blog Needs an ads.txt File explains how to manage such configuration files even if your archive is part of a larger site.
As you add new acquisitions, update the “Last updated” line at the top of the page. I also keep a separate HTML page for items I have sold or traded, so my main archive stays clean. Over the years, this practice has saved me from buying duplicates and has helped me remember the exact shade of a celluloid tortoiseshell comb I saw at a fair three years ago.
One last practical tip: name your image files consistently. I use the pattern type_year_description.jpg, such as comb_1925_celluloid_floral.jpg. That way, even if you open the folder years later, the filenames tell you what is what without needing the HTML file open. Store the images in the same directory as the HTML page, and your archive will remain portable—you can copy the entire folder to a new computer and it works immediately.
