Build a semantic document metadata panel

Represent document facts with labelled terms, machine-readable values, and a useful description.

EasySemantic HTML

30 min0% acceptance

Description

Build a labelled metadata region for one document. Use a description list to pair Owner, Created, Updated, Size, and Status with their values; encode dates in time datetime attributes; expose exact byte size as machine-readable data; and include a separate document description under an appropriate heading.

Requirements

Expose a complementary or section region named by a visible Document details heading.
Use one dl to group Owner, Created, Updated, Size, and Status metadata.
Pair every dt with at least one meaningful dd and do not use tables for label/value layout.
Wrap Created and Updated values in time elements with valid datetime attributes.
Wrap the friendly file size in a data element whose value is the exact byte count.
Expose a textual document status inside its Status value without relying on color alone.
Include a nonempty description in a separately labelled subsection after the metadata list.

Machine-readable date

Input

Visible Updated value Sep 4, 2026

Expected output

A time element carries datetime 2026-09-04

Explanation

Humans receive friendly text while software receives an unambiguous value.

File size

Input

Visible size 2.4 MB for 2516582 bytes

Expected output

A data element carries value 2516582

Explanation

The exact byte value remains available without making the label noisy.

Constraints

Use static semantic HTML without ARIA roles that duplicate native semantics
Keep every visible label in the document
Use ISO 8601 datetime attribute values

Hints

Hint 1

A description list is the native structure for a compact set of named values.

Hint 2

Use time and data to layer machine-readable values under human-friendly formatting.

Hint 3

Give the prose description its own heading so it remains discoverable outside the list.

HTMLsemanticsmetadata