HTML <keygen> Tag

What You’ll Learn

By the end of this tutorial, you’ll understand the historical <keygen> element and what to use instead for modern web security.

What Was the <keygen> Tag?

The <keygen> element was a specialized form control that generated a public/private key pair in the browser. When the form was submitted, the public key was sent to the server while the private key stayed on the client machine.

In the late 2000s and early 2010s, some developers experimented with <keygen> for certificate-based login. Poor cross-browser support, low adoption, and security concerns led browsers and the HTML spec to drop the element entirely.

// Modern replacement (simplified)
const keyPair = await crypto.subtle.generateKey(
  { name: "RSA-OAEP", modulusLength: 2048,
    publicExponent: new Uint8Array([1, 0, 1]), hash: "SHA-256" },
  true, ["encrypt", "decrypt"]
);

📝 Syntax (Historical)

Legacy HTML placed <keygen> inside a <form> with a required name attribute:

<form>
  <label for="keypair">Generate Key Pair:</label>
  <keygen name="keypair" id="keypair">
</form>

Syntax Rules

• <keygen> was a void element — no closing tag or inner content.
• It had to appear inside a <form> to submit the generated public key.
• The name attribute was required for the key to appear in form data.
• Modern HTML parsers treat the tag as unknown and do not generate key pairs.

⚖️ <keygen> vs Web Crypto API

Modern cryptography in the browser uses JavaScript APIs instead of HTML form controls:

<!-- Legacy (do not use) -->
<form action="/register" method="post">
  <keygen name="keypair" challenge="server-nonce">
  <button type="submit">Register</button>
</form>

<!-- Modern: generate keys in JavaScript, send public key via fetch -->
<button type="button" id="register">Register</button>
<script>
  document.getElementById("register").addEventListener("click", async () => {
    const keys = await crypto.subtle.generateKey(/* ... */);
    // Export public key and POST to server over HTTPS
  });
</script>

Examples Gallery

Historical keygen patterns plus the modern Web Crypto approach. Legacy examples are for learning only—they will not work in current browsers.

<form>
  <label for="keypair">Generate Key Pair:</label>
  <keygen name="keypair" id="keypair" challenge="randomstring">
</form>

<form action="/login" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <label for="keypair">Key Pair:</label>
  <keygen name="keypair" id="keypair">
  <input type="submit" value="Login">
</form>

<form action="/submit" method="post">
  <label for="data">Sensitive Data:</label>
  <input type="text" id="data" name="data">
  <label for="keypair">Encryption Key:</label>
  <keygen name="keypair" id="keypair">
  <input type="submit" value="Submit">
</form>

<button type="button" id="genKey">Generate Key Pair</button>
<p id="status"></p>
<script>
  document.getElementById("genKey").addEventListener("click", async () => {
    const keys = await crypto.subtle.generateKey(
      { name: "RSA-OAEP", modulusLength: 2048,
        publicExponent: new Uint8Array([1, 0, 1]), hash: "SHA-256" },
      true, ["encrypt", "decrypt"]
    );
    document.getElementById("status").textContent =
      "Key pair generated successfully.";
  });
</script>

♿ Accessibility & Security

Modern authentication must work for all users and follow current security standards:

• Use visible labels — every input needs a <label>; do not rely on placeholder text alone.
• Support password managers — use correct autocomplete values on login fields.
• Always use HTTPS — never transmit credentials or keys over plain HTTP.
• Do not use obsolete keygen — it provided no accessibility benefits and is unsupported today.

💡 Best Practices