HTML5 New Elements – time, mark, details, summary, progress, meter, dialog

<!-- Date only: YYYY-MM-DD -->
<p>Published on <time datetime="2026-04-15">15 April 2026</time></p>

<!-- Date with time: YYYY-MM-DDTHH:MM -->
<p>Event starts at <time datetime="2026-06-20T09:30">20 June 2026 at 9:30 AM</time></p>

<!-- Date with time and timezone offset -->
<p>Webinar: <time datetime="2026-07-01T14:00+01:00">1 July 2026, 2pm BST</time></p>

<!-- Year-month only -->
<p>Card expires: <time datetime="2028-09">September 2028</time></p>

<!-- Duration: P = period, 1H30M = 1 hour 30 minutes -->
<p>Course length: <time datetime="PT1H30M">1 hour 30 minutes</time></p>

<!-- Without datetime: visible text IS the machine value -->
<p>The event is on <time>2026-11-05</time></p>

<!-- Search result: user searched for "semantic HTML" -->
<p>
  This tutorial explains what <mark>semantic HTML</mark> is, why it matters,
  and how to convert <mark>semantic HTML</mark> div soup into properly
  structured markup.
</p>

<!-- Highlighted passage in an article -->
<p>The most important rule when writing forms is:
  <mark>never send passwords or sensitive data via GET</mark>.
</p>

<!-- Key term highlighted on first mention -->
<p>The <mark>Document Object Model (DOM)</mark> is the browser's in-memory
representation of the HTML page.</p>

mark {
  background-color: #fff3cd;
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

/* Highlight search matches in a different colour */
.search-result mark {
  background-color: #cce5ff;
}

<!-- Collapsed by default -->
<details>
  <summary>What is the difference between GET and POST?</summary>
  <p>GET appends form data to the URL as a query string — making it visible in
  the address bar and browser history. POST sends data in the HTTP request body,
  keeping it out of the URL. Use GET for searches and filters; use POST for
  logins, registrations, and any sensitive data.</p>
</details>

<!-- Open by default: the open attribute -->
<details open>
  <summary>HTML course prerequisites</summary>
  <ul>
    <li>No prior coding experience needed</li>
    <li>A text editor (VS Code recommended)</li>
    <li>A modern web browser</li>
  </ul>
</details>

<!-- FAQ section using details/summary -->
<section class="faq">
  <h2>Frequently Asked Questions</h2>

  <details>
    <summary>Is this course free?</summary>
    <p>Yes, all tutorials on ylearner are completely free.</p>
  </details>

  <details>
    <summary>Do I get a certificate?</summary>
    <p>Certificates are planned for a future release.</p>
  </details>

  <details>
    <summary>How long does the HTML course take?</summary>
    <p>The full course takes approximately 20–30 hours depending on your pace.</p>
  </details>

</section>

details {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

summary {
  padding: 0.75rem 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* remove default triangle in some browsers */
}

summary::-webkit-details-marker { display: none; } /* Safari */

/* Custom triangle indicator */
summary::before {
  content: "▶";
  margin-right: 0.5rem;
  font-size: 0.75rem;
  transition: transform 0.2s;
  display: inline-block;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details[open] summary {
  border-bottom: 1px solid #dee2e6;
}

details > *:not(summary) {
  padding: 1rem;
}

<!-- 60% complete -->
<label for="course-progress">Course progress: 60%</label>
<progress id="course-progress" value="60" max="100">60%</progress>

<!-- File download: 3.2 MB of 10 MB -->
<label for="dl-progress">Downloading: 3.2 MB / 10 MB</label>
<progress id="dl-progress" value="3.2" max="10">32%</progress>

<!-- Indeterminate: no value (operation running but total unknown) -->
<label for="ind-progress">Processing…</label>
<progress id="ind-progress">Processing…</progress>

<!-- Disk usage: 70 GB of 100 GB used -->
<label for="disk">Disk usage: 70 GB of 100 GB</label>
<meter id="disk" value="70" min="0" max="100" low="80" high="90" optimum="10">
  70 GB used
</meter>

<!-- Battery level: 45% -->
<label for="battery">Battery: 45%</label>
<meter id="battery" value="45" min="0" max="100" low="20" high="80" optimum="100">
  45%
</meter>

<!-- Quiz score: 82 out of 100 -->
<label for="score">Your score: 82/100</label>
<meter id="score" value="82" min="0" max="100" low="50" high="75" optimum="100">
  82 out of 100
</meter>

<!-- The dialog element (hidden by default) -->
<dialog id="confirm-dialog">
  <h2>Confirm deletion</h2>
  <p>Are you sure you want to delete this file? This cannot be undone.</p>
  <div class="dialog-actions">
    <button type="button" id="cancel-btn">Cancel</button>
    <button type="button" id="delete-btn">Delete</button>
  </div>
</dialog>

<!-- Trigger button -->
<button type="button" id="open-dialog">Delete file</button>

const dialog    = document.getElementById('confirm-dialog');
const openBtn   = document.getElementById('open-dialog');
const cancelBtn = document.getElementById('cancel-btn');
const deleteBtn = document.getElementById('delete-btn');

// showModal() opens as a modal with backdrop (focus trapped)
openBtn.addEventListener('click', () => dialog.showModal());

// close() closes the dialog
cancelBtn.addEventListener('click', () => dialog.close());

deleteBtn.addEventListener('click', () => {
  // perform delete action
  dialog.close();
});

dialog {
  border: none;
  border-radius: 8px;
  padding: 2rem;
  max-width: 400px;
  width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Style the backdrop (only available for modal dialogs) */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}