Text Semantics
Overview
HTML is designed to convey meaning, not just visual aesthetics. Text semantic tags tell the browser exactly why a piece of text is formatted a certain way. For example, while <b> and <strong> both make text visually bold, <strong> explicitly tells screen readers that the text has urgent importance, causing the software to alter its speaking tone. Moving away from generic <span> tags to semantic tags is a hallmark of professional web architecture.
Syntax
<p>
This is a normal paragraph, but this word is
<strong>extremely important</strong>.
</p>
<p>
The word <dfn>HTML</dfn> stands for HyperText Markup Language.
</p>
<p>
Please press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.
</p>
<p>
The algorithm has an <mark>O(n)</mark> time complexity.
</p>Common Pitfalls
- Using the deprecated
<i>(italic) and<b>(bold) tags indiscriminately. In modern HTML5, you should use<em>for emphasized text and<strong>for important text. Use<i>only for alternate voice (like foreign words) and<b>only for stylistic offset without importance. - Wrapping massive blocks of text in
<strong>tags. This dilutes the semantic weight and makes screen reader output exhausting for users to listen to.
Interview Questions
<em> and <i>?<em> applies semantic emphasis (stress), altering the pronunciation in assistive technologies. <i> applies purely visual italics to represent an alternate voice or mood (like a technical term or a thought) without adding importance.
Real-World Example
Formatting a technical programming tutorial using precise semantic tags.
<article>
<h2>Installing the Dependencies</h2>
<p>
First, ensure you have <strong>Node.js v20+</strong> installed.
Open your terminal and type the following command:
</p>
<!-- 'code' indicates computer code, 'kbd' indicates keyboard input -->
<pre><code>npm install react</code></pre>
<p>
If you encounter a <mark>permission denied</mark> error,
try prefixing the command with <kbd>sudo</kbd>.
</p>
</article>Check Your Knowledge
Test your understanding of Text Semantics with these quick questions.