SemText

Reference · SemText · Sequences & progress

<sem-event>

SemText element

You give it a when date, an optional until end date, and an optional status such as planned or done. Its place in the page is its place in time — the element does not sort events.

Shares its schema with <sem-chronology> — the option bullets below belong to that element's contract.

One dated event on a timeline. You give it a when date, an optional until end date, and an optional status such as planned or done. Its place in the page is its place in time — the element does not sort events.

No options beyond the global attribute catalog are stated for this tag.

Children

  • <time>Recommended first child `<time datetime>`: the human-readable date. When present it is the date the reader sees; when absent the CSS renders `when` verbatim as the date label (`:not(:has(time))`).

Example

sem-event.html
source
1 <sem-chronology kind="release-history" view-as="timeline" role="list">
2 <sem-event role="listitem" when="2026-03-02" status="done">
3 <time datetime="2026-03-02">2 Mar 2026</time> v0.1 tagged — Lit bundle ships.
4 </sem-event>
5 <sem-event role="listitem" when="2026-06" until="2026-08" status="current">
6 <time datetime="2026-06">Jun–Aug 2026</time> Reading-experience waves.
7 </sem-event>
8 <sem-event role="listitem" when="2026-Q4">Theme pipeline.</sem-event>
9 </sem-chronology>
render

Live render boots with JavaScript — the authored source is alongside.

variant: every status value, in DOM (chronological) order

One event per `status` — `done` ✓, `current` →, `blocked` ⛔, `todo` ○ (dashed marker) — plus an unannotated event, which reads neutral and is NOT `todo`: an event records what happened, not what is due. Dates order the list; the vocabulary never sorts.

variant: every status value, in DOM (chronological) order
sem-event-status-vocabulary.html
source
1 <sem-chronology kind="release-log" view-as="timeline" role="list">
2 <sem-event role="listitem" when="2026-02-03" status="done"><time datetime="2026-02-03">3 Feb 2026</time> Query console ships.</sem-event>
3 <sem-event role="listitem" when="2026-06-22" status="current"><time datetime="2026-06-22">22 Jun 2026</time> Reading-experience overhaul.</sem-event>
4 <sem-event role="listitem" when="2026-07"><time datetime="2026-07">Jul 2026</time> Extraction API stabilised.</sem-event>
5 <sem-event role="listitem" when="2026-08" status="blocked"><time datetime="2026-08">Aug 2026</time> Offline pack — blocked on the storage budget.</sem-event>
6 <sem-event role="listitem" when="2026-11" status="todo"><time datetime="2026-11">Nov 2026</time> Theme marketplace.</sem-event>
7 </sem-chronology>
render

Live render boots with JavaScript — the authored source is alongside.

variant: where the date label comes from

First event: no `<time>` — CSS renders `when` verbatim. Second: a `when`/`until` period with no `<time>` — CSS joins them with an en dash. Third: both authored — the reader sees the `<time>` text, the attribute stays machine-facing.

variant: where the date label comes from
sem-event-date-labels.html
source
1 <sem-chronology kind="release-log" role="list">
2 <sem-event role="listitem" when="2026-05-19" status="done">Quiz-occlusion reveal ships.</sem-event>
3 <sem-event role="listitem" when="2026-Q3" until="2026-Q4">Docs-overhaul waves.</sem-event>
4 <sem-event role="listitem" when="2026-11" status="todo"><time datetime="2026-11">Nov 2026</time> Theme marketplace.</sem-event>
5 </sem-chronology>
render

Live render boots with JavaScript — the authored source is alongside.

Source: spec/schema/sem-chronology.md