Advanced Semantic Text Elements
What is Semantic Text?
Imagine you are writing a technical manual. When you refer to a keyboard button, you draw a little border around it. When you write computer code, you write it in a clean font where every letter takes up the exact same width (monospace) so it's easy to read.HTML provides special tags to represent specific types of technical text:
<code>: Used to wrap computer code. It uses a monospace font.<kbd>: Represents keyboard input (like Ctrl or Enter).<abbr>: Defines an abbreviation. You can add a title attribute to show the full word when hovered.Why does it matter?
Writing code in a standard paragraph font makes it hard to distinguish from normal text. Semantic text tags tell the browser, search engines, and screen readers exactly what type of technical information is being presented, improving readability and accessibility.How to write it
Wrap your technical terms or code snippets in the appropriate tag:<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the <code>code</code>.</p>
code block
Press Ctrl
Common Mistakes
<code> with <pre>: The <code> tag is for short inline code. If you want to write a block of code with multiple lines and keep its indentation, you should wrap the <code> inside a <pre> (preformatted text) tag.Quick Reference
<code> — Monospace formatting for code.<kbd> — Keyboard button visual border.<abbr title="Full Name"> — Abbreviation description popup.Your Task
Create a `<p>` paragraph stating: 'Write raw code.' with the word 'code' wrapped in a `<code>` tag.
index.html
Type code above to start the lesson.
Live Preview