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).