Summary - Technical doc
Write a technical reference page using all text-level elements.
What we learned in this group
In this group you met the tags that add fine meaning to text:
<abbr>,<cite>,<time>: abbreviation, work title, date<code>,<kbd>,<samp>,<var>: code, key, output, variable<sub>,<sup>: subscript and superscript<pre>+<code>: code block<wbr>,<bdi>,<bdo>: break opportunity, direction isolation, direction override
Now we combine them all into a technical reference page.
Exercise Write a technical reference page
Add four things to body:
- A
<p>holding an<abbr>tag (with title set to HyperText Markup Language and content HTML) and a<cite>tag (content HTML Handbook). - A
<p>holding a<time>tag (with datetime set to 2026-03-15 and content 15 March 2026). - A
<p>holding the water formula: the letter H, a<sub>with content 2, the letter O. - A
<pre>holding a<code>; inside the code write function save() { return 1; }.
Show example solution
<body>
<p><abbr title="HyperText Markup Language">HTML</abbr> standards are in <cite>HTML Handbook</cite>.</p>
<p>Published: <time datetime="2026-03-15">15 March 2026</time>.</p>
<p>Water: H<sub>2</sub>O</p>
<pre><code>function save() { return 1; }</code></pre>
</body>Test yourself
-
Match each tag to its role
- <abbr>
- Abbreviation
- <cite>
- Work title
- <time>
- Date
- <sub>
- Subscript
- <sup>
- Superscript
-
Which tag marks a programming variable?
- <code>
- <samp>
- <kbd>
- <var>
Show answer
<var> — Correct. var marks a mathematical or programming variable.
-
Complete the code block
<pre><____>save()</code></pre>Show answer
<pre><code>save()</code></pre>