Syntax
<time datetime="2026-03-03">March 3rd</time>Examples
Publication Date
Marking up an article's publish date.
<p>Published on <time datetime="2026-03-03">March 3, 2026</time></p>Relative Time with Machine-Readable Value
Showing a friendly relative time while keeping an exact machine-readable value.
<p>Posted <time datetime="2026-07-16T09:30:00Z">3 hours ago</time></p>Duration
Representing a duration rather than a specific point in time.
<p>Video length: <time datetime="PT15M30S">15:30</time></p>Attributes
- datetime (string): A machine-readable ISO 8601 date, time, or duration
Best practices
- Always include a datetime attribute in ISO 8601 format, even when the visible text is a casual phrase like "yesterday"
- Use <time> for any date shown on the page — it helps search engines understand publish dates and freshness
- Duration values use the ISO 8601 duration format, e.g. PT15M30S for 15 minutes 30 seconds
- Do not use <time> for vague, non-specific references to time that cannot be expressed as a real date
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<span>
The <span> element is an inline container used to group and style specific portions of text or inline elements. Unlike <div>, which is block-level, <span> doesn't break the flow of content. It's perfect for applying styles or manipulating specific words or phrases within a paragraph without affecting the surrounding content.<h1> - <h6>
The heading elements <h1> through <h6> represent six levels of section headings, with <h1> being the most important and <h6> the least. Headings create a document outline that both sighted users and assistive technologies rely on to understand and navigate page structure. Search engines also use heading hierarchy to interpret content relevance. Each page should typically have exactly one <h1> describing its main topic, with subsequent headings nested logically to reflect the content hierarchy.<p>
The <p> element represents a paragraph of text — one of the most fundamental building blocks of written content on the web. Browsers automatically add margin above and below paragraphs to visually separate them. The <p> element cannot contain other block-level elements like <div> or headings, only inline content and text. It is a block-level element, meaning it always starts on a new line.Text Formatting: <strong>, <em>, <b>, <i>, <mark>, <small>
HTML provides several inline elements for formatting text with semantic and visual meaning. <strong> indicates strong importance (typically rendered bold), and <em> indicates stress emphasis (typically rendered italic) — both carry semantic weight that screen readers can announce. <b> and <i> are their purely visual counterparts, used when bold/italic styling is needed without implying importance or emphasis. <mark> highlights text as relevant to the current context, and <small> represents side comments like fine print or disclaimers.
The <span> element is an inline container used to group and style specific portions of text or inline elements. Unlike <div>, which is block-level, <span> doesn't break the flow of content. It's perfect for applying styles or manipulating specific words or phrases within a paragraph without affecting the surrounding content.<h1> - <h6>
The heading elements <h1> through <h6> represent six levels of section headings, with <h1> being the most important and <h6> the least. Headings create a document outline that both sighted users and assistive technologies rely on to understand and navigate page structure. Search engines also use heading hierarchy to interpret content relevance. Each page should typically have exactly one <h1> describing its main topic, with subsequent headings nested logically to reflect the content hierarchy.<p>
The <p> element represents a paragraph of text — one of the most fundamental building blocks of written content on the web. Browsers automatically add margin above and below paragraphs to visually separate them. The <p> element cannot contain other block-level elements like <div> or headings, only inline content and text. It is a block-level element, meaning it always starts on a new line.Text Formatting: <strong>, <em>, <b>, <i>, <mark>, <small>
HTML provides several inline elements for formatting text with semantic and visual meaning. <strong> indicates strong importance (typically rendered bold), and <em> indicates stress emphasis (typically rendered italic) — both carry semantic weight that screen readers can announce. <b> and <i> are their purely visual counterparts, used when bold/italic styling is needed without implying importance or emphasis. <mark> highlights text as relevant to the current context, and <small> represents side comments like fine print or disclaimers.