Tortoiseshell hair comb from the 1890s on a velvet archival tray
Uncategorized

Archiving Vintage Hair Accessories: A Practical HTML Guide for Collectors

robert_walker6229

When you open a drawer filled with Edwardian hair combs, 1950s tortoiseshell barrettes, or silk ribbon rosettes from the 1920s, you are holding fragments of social history. But paper tags fade, memories blur, and the exact provenance of a piece can vanish within a generation. For the serious collector of vintage British hair accessories, a well-structured digital archive is as essential as a good jewellery box. The most durable, portable, and future-proof way to build that archive is with plain HTML—no paid software, no proprietary database, just clean code that will open on any device in fifty years.

Why HTML Outlasts Apps and Spreadsheets

Every collector I know has lost data to an app that stopped being supported, a spreadsheet that corrupted, or a cloud service that changed its terms. HTML files, by contrast, are self-contained. A single .html file written in 1995 still renders perfectly in today's browsers. For a collection of Victorian hair pins, bakelite slides, or 1970s velvet bows, this longevity matters. You are not just cataloguing for yourself; you are creating a record that could be passed to a museum, an auction house, or a fellow enthusiast decades from now.

What Every Archive Page Needs

Before writing a single line of code, decide on the minimum data you want to capture for each accessory. I recommend starting with these seven fields:

  • Object name (e.g., "Art Deco silver-plated hair comb")
  • Date or decade (e.g., "c. 1928")
  • Materials (e.g., "celluloid, silver plate, hand-painted enamel")
  • Dimensions (length, width, depth in centimetres)
  • Condition notes (e.g., "minor loss to enamel on left leaf, two teeth intact")
  • Provenance (where you acquired it, previous owner if known)
  • Photograph reference (filename or local path to your image)

That is enough to start. You can always add fields later—the beauty of a hand-coded archive is that you control the structure entirely.

Building the HTML Skeleton

Open a simple text editor—Notepad works, though I prefer Visual Studio Code for its colour highlighting. Create a new file and save it as vintage-hair-accessories-archive.html. The basic structure looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Vintage Hair Accessories Archive</title>
  <style>
    body { font-family: Georgia, serif; max-width: 960px; margin: 2rem auto; padding: 0 1rem; background: #faf6f0; color: #2c2c2c; }
    h1 { border-bottom: 2px solid #8b6f5e; padding-bottom: 0.5rem; }
    table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
    th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #d4c9bc; vertical-align: top; }
    th { background: #e8ddd0; font-weight: normal; letter-spacing: 0.05em; }
    img { max-width: 200px; height: auto; border: 1px solid #d4c9bc; }
    .entry { margin-bottom: 2.5rem; padding: 1.5rem; background: #ffffff; border: 1px solid #d4c9bc; }
  </style>
</head>
<body>

<h1>Archive: British Hair Accessories, 1880–1975</h1>
<p>A personal catalogue of combs, clasps, bands, and ornaments.</p>

<!-- entries go here -->

</body>
</html>

This gives you a warm, neutral palette that feels archival without being sterile. The serif font suits a historical collection. Save the file and open it in any browser—you should see your title and a blank page ready for entries.

Tortoiseshell hair comb from the 1890s on a velvet archival tray

Adding Your First Accessory Entry

For a small collection, I prefer a simple list of entries rather than a table. Each entry gets its own div with a class of entry. Here is an example for a late-Victorian hair comb:

<div class="entry">
  <h2>Tortoiseshell Hair Comb with Floral Engraving</h2>
  <p><strong>Date:</strong> c. 1895–1905</p>
  <p><strong>Materials:</strong> Natural tortoiseshell (Cheloniidae family), hand-engraved rose motif</p>
  <p><strong>Dimensions:</strong> 9.8 cm × 5.2 cm × 0.3 cm (teeth length 4.5 cm)</p>
  <p><strong>Condition:</strong> Two hairline cracks on the spine, no missing teeth. Surface patina consistent with age.</p>
  <p><strong>Provenance:</strong> Purchased at Portobello Road Market, London, March 2022. Dealer attributed to Birmingham workshops.</p>
  <p><strong>Image:</strong> <code>comb_tortoise_1895_front.jpg</code></p>
</div>

Notice that I used a code tag for the image filename rather than embedding the image directly. For a private archive, this keeps the HTML lightweight. If you want to display the image inline, replace the last line with:

<img src="comb_tortoise_1895_front.jpg" alt="Tortoiseshell comb with engraved floral pattern">

Just make sure the image file sits in the same folder as your HTML file, or adjust the path accordingly.

Structuring a Larger Collection with Tables

Once you pass thirty or forty entries, scrolling through individual divs becomes unwieldy. A table lets you scan at a glance. I still use div-based entries for detailed condition notes, but I maintain a master table for quick reference. Here is how to build it:

<table>
  <tr>
    <th>Object</th>
    <th>Date</th>
    <th>Materials</th>
    <th>Image</th>
  </tr>
  <tr>
    <td>Tortoiseshell comb with floral engraving</td>
    <td>c. 1895–1905</td>
    <td>Natural tortoiseshell</td>
    <td><img src="comb_tortoise_1895_front.jpg" alt="Tortoiseshell comb" style="max-width:100px;"></td>
  </tr>
  <tr>
    <td>Bakelite hair slide, Art Deco geometric pattern</td>
    <td>c. 1930–1935</td>
    <td>Bakelite, brass fittings</td>
    <td><img src="slide_bakelite_1930_front.jpg" alt="Bakelite slide in amber and green" style="max-width:100px;"></td>
  </tr>
  <tr>
    <td>Silk ribbon rosette with seed pearl centre</td>
    <td>c. 1922–1928</td>
    <td>Silk, seed pearls, cotton thread</td>
    <td><img src="rosette_silk_1925_front.jpg" alt="Ivory silk rosette with pearl centre" style="max-width:100px;"></td>
  </tr>
</table>

I keep my table thumbnails small—100 pixels wide is enough to identify a piece. Clicking the thumbnail could link to a dedicated detail page, but for a private archive, the table plus a few div entries for your favourite pieces is entirely sufficient.

Linking Entries to Detailed Notes

If you want to preserve the master table for browsing but still have room for long condition notes and provenance stories, create separate HTML files for each item. Name them logically, e.g., comb_tortoise_1895.html. In the master table, wrap the object name in a link:

<td><a href="comb_tortoise_1895.html">Tortoiseshell comb with floral engraving</a></td>

On the detail page, you can write a full paragraph about the piece—what the engraving depicts, how tortoiseshell was harvested in the 1890s, why the patina matters. This is where your research and passion shine. I include a small map or a note about the original manufacturer when I can trace it. For example, a Birmingham silversmith's mark on a comb back tells you something about workshop practices in Edwardian England.

Collection of 1930s bakelite and celluloid hair clips on linen

Using HTML to Track Repairs and Care

One of the most practical uses for a digital archive is recording conservation actions. Under each entry, I add a subsection called "Care History" with dates and actions:

<h3>Care History</h3>
<ul>
  <li>2023-04-10: Cleaned with soft brush and distilled water. Silver plate stabilised with Renaissance wax.</li>
  <li>2024-01-15: Replaced missing tooth using carved cellulose nitrate (matched colour to original).</li>
</ul>

This is invaluable if you ever lend a piece to an exhibition or pass it to a conservator. You have a clear, timestamped log of every intervention. No more guessing whether that crack was there when you bought it.

Styling for Long-Term Readability

Resist the temptation to use trendy fonts or dark mode themes. Stick to high-contrast text on a light background. Use relative units like rem so the page scales if someone enlarges the text. Avoid JavaScript if possible—it breaks. The CSS I included in the skeleton above is deliberately minimal. You can expand it with classes for condition ratings (e.g., .excellent, .fair, .needs-conservation) but keep the logic simple. A class changes the background colour of the entry; that is all you need.

Backing Up and Sharing Your Archive

An HTML archive is easy to back up: copy the folder to an external drive, email yourself the files, or upload them to a free static hosting service like GitHub Pages or Neocities. Because there is no database, you never have to worry about export formats. If you want to share a particular entry with a friend or a forum, you can send the single HTML file, or upload it to a temporary pastebin. No one needs to install anything. This simplicity is why many museum documentation teams are revisiting static HTML for long-term storage of small collections.

Starting Your Own Archive This Weekend

Open your text editor. Copy the skeleton code above. Add one entry for the hair accessory you love most—the one you reach for when you want to feel connected to another era. Write down its dimensions, its materials, the story of how it came to you. Save the file. Open it in your browser. You have just built a permanent, independent record that will outlast any app or platform. Next week, add another. Over a year, you will have a digital cabinet of wonders, written in the most resilient language the web has ever known.