Helpers

Relative Time

semantic HTML

날짜를 현재 기준 상대 시간으로 표시합니다.

stablefreeSince 0.3

Live example

Updated about one hour ago

<p>Updated <time data-standard-component="relative-time" datetime="2026-07-11T09:30:00Z" data-date="2026-07-11T09:30:00Z">about one hour ago</time></p>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.3`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

ISO 8601 날짜와 의미 있는 JavaScript-off fallback을 제공하고 잦은 live region 갱신은 피합니다. sync는 필요한 경우에만 사용합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->