Challenge - Advanced text

Write a technical doc using all advanced text elements.

Bring together advanced text tags

Advanced text tags turn plain paragraphs into technical documentation. <abbr title="..."> carries the expansion of an abbreviation, <time datetime="..."> a machine-readable date, and <cite> the title of a work.

Inline <code> shows short snippets, while <pre><code> shows a multi-line code block. <kbd> marks a keyboard key, <samp> program output, and <var> a variable. <sub> and <sup> are subscript and superscript.

Exercise Write a technical document

Write a keyboard shortcuts document. Include an <abbr title="..."> abbreviation, a <time datetime="..."> date, a <pre><code> code block, a <sub> and a <sup>, a <kbd> and a <samp>.

Show example solution

<h1>Keyboard shortcuts</h1>
<p>In <abbr title="HyperText Markup Language">HTML</abbr> docs, press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save.</p>
<p>Last updated: <time datetime="2026-03-15">15 March 2026</time>.</p>
<pre><code>console.log("Saved");</code></pre>
<p>Water is H<sub>2</sub>O, energy is E=mc<sup>2</sup>. Output: <samp>Done</samp>.</p>

Test yourself

A time tag for a date

<p>The conference starts on <time ____>15 March 2026</time>.</p>

Show answer

<p>The conference starts on <time datetime="2026-03-15">15 March 2026</time>.</p>

Tag and its meaning

cite

work title
kbd

keyboard key
samp

program output
var

variable
Which tag marks a keyboard shortcut?
- code
- kbd
- samp
- var
Show answer

kbd — Yes. kbd marks keyboard input (a key or shortcut).

Next lesson: Challenge - Accessible table

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies