---
layout: default
title: Obscure HTML Elements - Shivering Playground
description: Exploring lesser-known but useful HTML elements
---

<style>
  .demo-wrapper {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
  }

  .demo-wrapper h1 {
    color: var(--text-primary);
    margin-bottom: 10px;
  }

  .demo-wrapper .subtitle {
    color: var(--text-secondary);
    margin-bottom: 30px;
  }

  .back-link {
    display: inline-block;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1em;
    margin-bottom: 20px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s ease;
  }

  .back-link:hover {
    background: var(--primary);
    color: white;
  }

  .element-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    margin: 2rem 0;
  }

  .element-section h2 {
    color: var(--text-primary);
    margin: 0 0 1rem 0;
  }

  .element-section code {
    background: var(--background);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
  }

  .element-section p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0.5rem 0;
  }

  .element-section blockquote {
    background: var(--background);
    border-left: 4px solid var(--primary);
    padding: 1rem;
    margin: 1rem 0;
    color: var(--text-primary);
    font-style: italic;
  }

  .element-section mark {
    background: var(--primary);
    color: white;
    padding: 2px 4px;
    border-radius: 2px;
  }

  .element-section time {
    color: var(--primary);
    font-weight: 600;
  }

  .element-section form {
    background: var(--background);
    padding: 1.5rem;
    border-radius: 6px;
    margin: 1rem 0;
  }

  .element-section label {
    display: block;
    margin: 1rem 0;
    color: var(--text-primary);
  }

  .element-section input[type="number"] {
    width: 100px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    margin-left: 0.5rem;
  }

  .element-section output {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.2em;
  }

  .element-section abbr {
    color: var(--primary);
    text-decoration: underline dotted;
    cursor: help;
  }

  .element-section dfn {
    font-weight: 600;
    color: var(--primary);
    font-style: normal;
  }
</style>

<a href="/playground/" class="back-link">← Back to Playground</a>

<div class="demo-wrapper">
  <h1>🏷️ Obscure HTML Elements</h1>
  <p class="subtitle">Exploring lesser-known but semantically meaningful HTML elements</p>

  <div class="element-section">
    <h2>The <code>&lt;mark&gt;</code> element</h2>
    <p>Used to highlight or mark text for reference purposes, showing relevance in a particular context.</p>
    <blockquote>
      Using <code>&lt;mark&gt;</code> in a <mark>blockquote can be used to highlight</mark> sections of the quote that are particularly relevant to your current discussion.
    </blockquote>
  </div>

  <div class="element-section">
    <h2>The <code>&lt;time&gt;</code> element</h2>
    <p>Represents a specific period in time with a machine-readable <code>datetime</code> attribute.</p>
    <p>
      The event will take place on <time datetime="2022-01-14">January 14th, 2022</time>. This helps search engines and assistive technologies understand the exact date being referenced.
    </p>
  </div>

  <div class="element-section">
    <h2>The <code>&lt;output&gt;</code> element</h2>
    <p>Represents the result of a calculation or user action. The <code>for</code> attribute can list the <code>id</code>s of all contributing inputs.</p>
    <form action="">
      <label>Value 1 <input type="number" id="val-one" value="0"></label>
      <label>Value 2 <input type="number" id="val-two" value="0"></label>
      <label>Value 1 + Value 2 = <output for="val-one val-two">0</output></label>
    </form>
  </div>

  <div class="element-section">
    <h2>The <code>&lt;abbr&gt;</code> element</h2>
    <p>
      Use this for abbreviations and acronyms. The <code>title</code> attribute provides the full expansion.
      Examples: <abbr title="abbreviation">abbr</abbr>,
      <abbr title="millimeters">mm</abbr>,
      <abbr title="Miles Per Hour">mph</abbr>,
      <abbr title="Kilometers Per Hour">kph</abbr>,
      <abbr title="HyperText Markup Language">HTML</abbr>, and
      <abbr title="Cascading Style Sheets">CSS</abbr>.
    </p>
  </div>

  <div class="element-section">
    <h2>The <code>&lt;dfn&gt;</code> element</h2>
    <p>The <dfn>definition element</dfn> marks the term being defined within a sentence.</p>
    <p>Use it only when first defining a term. Subsequent uses don't need <code>&lt;dfn&gt;</code>.</p>
    <p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is a language used to style HTML documents on the web.</p>
  </div>

  <div class="element-section">
    <h2>💡 Why Use These?</h2>
    <p>These semantic elements improve:</p>
    <ul style="color: var(--text-secondary); line-height: 1.8;">
      <li><strong>Accessibility</strong> - Screen readers can better interpret content</li>
      <li><strong>SEO</strong> - Search engines understand content meaning</li>
      <li><strong>Maintainability</strong> - Code is more self-documenting</li>
      <li><strong>Future-proofing</strong> - Browsers can add special features for semantic elements</li>
    </ul>
  </div>
</div>

<script>
  const addNumberForm = document.querySelector("form");
  const inputs = addNumberForm.querySelectorAll("input");
  const output = addNumberForm.querySelector("output");

  inputs.forEach((input) => {
    input.addEventListener('input', outputResult);
  });

  function outputResult() {
    const numberOne = parseInt(inputs[0].value) || 0;
    const numberTwo = parseInt(inputs[1].value) || 0;
    const result = numberOne + numberTwo;
    output.innerText = result;
  }
</script>