Time, Mark, and Details

HTML5 introduced several small but powerful inline and block-level semantic elements. The <time> element represents a specific moment or range in time. Its datetime attribute provides a machine-readable date/time, even when the human-readable content is in a different format.

Mark and Details/Summary

The <mark> element highlights text of special relevance in the current context — like search result highlighting. It renders with a yellow background by default. The <details> element creates a disclosure widget that the user can open and close. The first child <summary> provides the visible label; everything else inside <details> is hidden until the widget is opened. This gives you a native accordion with zero JavaScript.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Time, Mark, Details</title>
  <style>
    mark { background: #fff176; padding: 0 2px; border-radius: 2px; }
    details { border: 1px solid #ccc; border-radius: 4px;
              margin: 8px 0; padding: 4px 12px; }
    summary { cursor: pointer; font-weight: bold; padding: 8px 0; }
  </style>
</head>
<body>
  <h1>News</h1>

  <p>Published on
    <time datetime="2025-04-22">Earth Day, April 22 2025</time>.
  </p>

  <p>Search results for <mark>semantic HTML</mark>:</p>

  <h2>FAQ</h2>
  <details>
    <summary>What is semantic HTML?</summary>
    <p>Semantic HTML uses elements that convey meaning, such as
    <code>&lt;article&gt;</code> and <code>&lt;nav&gt;</code>.</p>
  </details>
  <details>
    <summary>Why does it matter?</summary>
    <p>It improves SEO, accessibility, and code readability.</p>
  </details>
</body>
</html>

HTML

Full Editor

Pro Tip

Add the open attribute to a <details> element to make it expanded by default — useful for FAQ items where the first question should be visible immediately to encourage engagement.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned