HTML Inline Text Elements: strong, em, code, mark, and More
Use HTML inline text elements correctly: strong for importance, em for emphasis, code for code, mark for highlights, abbr for abbreviations, time for dates, and more.
Inline Text
Detailed Explanation
HTML Inline Text Elements
Inline text elements add semantic meaning to specific words or phrases within a block of text. Choosing the right element communicates intent to both browsers and assistive technologies.
Importance and Emphasis
| Element | Meaning | Default Style |
|---|---|---|
<strong> |
Strong importance, urgency | Bold |
<em> |
Stress emphasis (changes meaning) | Italic |
<b> |
Draw attention (no extra importance) | Bold |
<i> |
Alternate voice, technical term | Italic |
Key distinction:
<!-- Semantic: screen readers announce emphasis -->
<p><strong>Warning:</strong> This action <em>cannot</em> be undone.</p>
<!-- Presentational: no semantic meaning -->
<p>The <b>quick brown fox</b> is a common <i>pangram</i>.</p>
Code and Technical
| Element | Purpose |
|---|---|
<code> |
Code fragment |
<kbd> |
Keyboard input |
<samp> |
Computer output |
<var> |
Variable name |
<pre> |
Preformatted text (block-level) |
<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save.</p>
<p>Run <code>npm install</code> in your terminal.</p>
<p>The output was: <samp>Error: file not found</samp></p>
References and Annotations
| Element | Purpose |
|---|---|
<cite> |
Title of a creative work |
<q> |
Inline quotation (auto-adds quotes) |
<abbr> |
Abbreviation with title expansion |
<dfn> |
Term being defined |
<mark> |
Highlighted/relevant text |
<p>As described in <cite>The HTML Specification</cite>,
the <abbr title="Document Object Model">DOM</abbr> is
<dfn>an API for HTML documents</dfn>.</p>
<p>Search results: The <mark>HTML</mark> element reference.</p>
Time and Data
<p>Published <time datetime="2024-01-15T09:00:00Z">January 15, 2024</time></p>
<p>Product: <data value="12345">Premium Widget</data></p>
Use Case
Inline text elements are used in documentation, technical writing, blog posts, news articles, and educational content. Screen readers announce strong and em elements differently from b and i, making semantic choice important for accessibility. Search engines also use these elements to understand content emphasis and structure.