HTML provides numerous elements for formatting text, from making words bold or italic to highlighting important information. However, it's not just about visual appearance— these elements carry semantic meaning that helps search engines and assistive technologies understand your content. Let's explore all the text formatting elements and learn when to use each one.
Importance and Emphasis
The most commonly used text formatting elements are for indicating importance and emphasis.
Strong: The <strong> Element
The <strong> element indicates that text has strong importance or urgency. Browsers typically display it in bold.
<p>This is <strong>very important</strong> information.</p>
<p><strong>Warning:</strong> Do not proceed without reading the instructions.</p>
<p>The deadline is <strong>tomorrow</strong>, so please submit your work today.</p>When to use strong:
- Important words or phrases that need emphasis
- Warnings or urgent notices
- Key points in instructions
- Critical information users shouldn't miss
Visual Example:
This is very important information that you should pay attention to.
Emphasis: The <em> Element
The <em> element indicates stress emphasis. It changes the meaning of a sentence based on which word is emphasized. Browsers typically display it in italics.
<p>I <em>really</em> love this product!</p>
<p>Make sure you read the <em>entire</em> document before proceeding.</p>
<p>We're not just talking about any solution—we're talking about <em>the</em> solution.</p>When to use em:
- Words that change the meaning when stressed
- Subtle emphasis in conversational text
- Highlighting specific words in a sentence
Visual Example:
I really love this product! It's exactly what I was looking for.
Strong vs. Em: Understanding the Difference
<!-- Different semantic meanings -->
<p><strong>Warning:</strong> The system will shut down in 5 minutes.</p>
<!-- strong = important information -->
<p>I <em>cannot</em> believe this happened!</p>
<!-- em = stress emphasis -->
<!-- Can be combined -->
<p><strong>Important:</strong> You <em>must</em> complete this form.</p>💡 Key Difference:
- <strong>: Conveys importance, urgency, or seriousness
- <em>: Conveys subtle stress or emphasis that changes meaning
Bold and Italic (Presentational)
These elements are purely presentational and don't carry semantic meaning.
Bold: The <b> Element
The <b> element makes text bold without implying extra importance. Use it for stylistic purposes only.
<p>The <b>key terms</b> are highlighted in bold for easy scanning.</p>
<p><b>Product Name:</b> Widget Pro 3000</p>
<p>In this tutorial, we'll use <b>bold text</b> to indicate menu items.</p>When to use b:
- Keywords in a document abstract
- Product names in reviews
- UI element names in instructions
- When you need bold text without semantic importance
Italic: The <i> Element
The <i> element makes text italic without implying emphasis. Use it for technical terms, foreign phrases, thoughts, or ship names.
<p>The term <i>HTML</i> stands for HyperText Markup Language.</p>
<p>She said <i>bon appétit</i> before we started eating.</p>
<p>The <i>Titanic</i> was a famous ship.</p>
<p><i>I should probably call her back,</i> he thought.</p>When to use i:
- Foreign phrases: et cetera, carpe diem
- Technical terms: localhost, HTTP
- Taxonomic designations: Homo sapiens
- Ship or vehicle names: USS Enterprise
- Thoughts in narrative: What should I do? she wondered
When to Use B vs Strong, I vs Em
<!-- Use strong for importance -->
<p><strong>Warning:</strong> This action cannot be undone.</p>
<!-- Use b for stylistic boldness without importance -->
<p>Click the <b>Save</b> button to continue.</p>
<!-- Use em for stress emphasis -->
<p>I <em>told</em> you this would happen!</p>
<!-- Use i for technical terms or foreign phrases -->
<p>The term <i>localhost</i> refers to your computer.</p>Highlighting and Marking
Mark: The <mark> Element
The <mark> element highlights text for reference purposes, like a highlighter pen. Browsers typically display it with a yellow background.
<p>Search results for "HTML tutorial":</p>
<p>Learn <mark>HTML tutorial</mark> basics in this comprehensive guide.</p>
<p>Important: Read section <mark>3.2</mark> carefully before proceeding.</p>
<p>The meeting is scheduled for <mark>January 15th at 2 PM</mark>.</p>When to use mark:
- Search term highlighting in results
- Drawing attention to specific text in quotes
- Marking relevant portions of text for reference
- Highlighting important dates or numbers
Visual Example:
Search results for "web development": Learn web development from scratch.
Deletions and Insertions
Deleted Text: The <del> Element
The <del> element indicates text that has been deleted from a document. Browsers display it with a strikethrough.
<p>Price: <del>$99.99</del> $79.99</p>
<p><del>This feature is no longer available.</del></p>
<p>Meeting time: <del>2 PM</del> 3 PM (updated)</p>You can add attributes to provide more context:
<p>
<del datetime="2024-01-15T10:00:00Z" cite="editor-notes.html">
This paragraph has been removed.
</del>
</p>Inserted Text: The <ins> Element
The <ins> element indicates text that has been inserted into a document. Browsers typically display it with an underline.
<p>Price: <del>$99.99</del> <ins>$79.99</ins></p>
<p>The meeting is scheduled for <ins>January 20th</ins>.</p>
<p><ins>New feature added: Dark mode support</ins></p><p>
<ins datetime="2024-01-15T10:30:00Z" cite="changelog.html">
This new paragraph was added in the latest revision.
</ins>
</p>Visual Example:
Price: $99.99 $79.99 (Sale!)
Strikethrough: The <s> Element
The <s> element indicates text that is no longer accurate or relevant. Similar to <del> but without implying document changes.
<p><s>Only 10 items left!</s> Sold out!</p>
<p>Regular price: <s>$199</s></p>
<p><s>Event cancelled</s> - Event rescheduled</p>Small Text: The <small> Element
The <small> element represents side comments and fine print, such as copyright notices or legal disclaimers.
<p>
Sign up now for our newsletter!
<br>
<small>We'll never share your email with third parties.</small>
</p>
<footer>
<p><small>© 2024 Company Name. All rights reserved.</small></p>
</footer>
<p>
Price: $99.99
<br>
<small>*Shipping and taxes not included</small>
</p>Visual Example:
Sign up for our newsletter!
We'll never share your email with third parties.
Underline: The <u> Element
The <u> element represents unarticulated annotation, like marking spelling errors or proper names in Chinese text. It's displayed with an underline.
<p>The word <u class="spelling">recieve</u> is misspelled.</p>
<p>He wrote: "I <u>definately</u> want to attend."</p>⚠️ Warning:
Avoid using <u> for regular underlined text, as users expect underlined text to be links. If you need underlined text for styling, use CSS instead.
Subscript and Superscript
We'll cover these in detail in the next lesson, but here's a quick preview:
<!-- Subscript (below the line) -->
<p>H<sub>2</sub>O is the chemical formula for water.</p>
<!-- Superscript (above the line) -->
<p>E = mc<sup>2</sup> is Einstein's famous equation.</p>H2O is the chemical formula for water, and E = mc2 is Einstein's equation.
Code and Computer Output
Code: The <code> Element
The <code> element represents a fragment of computer code. Browsers display it in a monospace font.
<p>Use the <code>console.log()</code> function to print output.</p>
<p>The <code><div></code> element is a container.</p>
<p>Type <code>npm install</code> to install dependencies.</p>Keyboard Input: The <kbd> Element
The <kbd> element represents user input, typically from a keyboard.
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>To save, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>Type <kbd>exit</kbd> to close the program.</p>Sample Output: The <samp> Element
The <samp> element represents sample output from a computer program.
<p>The program will display: <samp>Hello, World!</samp></p>
<p>Error message: <samp>File not found</samp></p>Variables: The <var> Element
The <var> element represents a variable in mathematical expressions or programming contexts.
<p>The area of a triangle is <var>A</var> = ½<var>b</var><var>h</var></p>
<p>To calculate <var>x</var>, use the formula <var>y</var> = 2<var>x</var> + 5</p>Combining Formatting Elements
You can nest formatting elements to combine their effects:
<!-- Strong emphasis (bold + italic) -->
<p>This is <strong><em>very important</em></strong> information.</p>
<!-- Deleted and inserted together -->
<p>Price: <del>$99</del> <ins><strong>$79</strong></ins></p>
<!-- Marked code -->
<p>The <mark><code>getElementById()</code></mark> method is highlighted.</p>
<!-- Multiple formatting -->
<p>
<strong>Note:</strong> The value of <var>x</var> must be
<mark>greater than zero</mark>.
</p>Styling Formatted Text with CSS
While these elements have default styling, you can customize them with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Text Formatting</title>
<style>
/* Custom strong styling */
strong {
color: #c0392b;
font-weight: 700;
}
/* Custom emphasis styling */
em {
color: #2980b9;
font-style: italic;
}
/* Custom mark styling */
mark {
background-color: #fff3cd;
padding: 2px 4px;
border-radius: 3px;
}
/* Custom code styling */
code {
background-color: #f4f4f4;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
color: #e74c3c;
}
/* Custom kbd styling */
kbd {
background-color: #333;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-family: monospace;
font-size: 0.9em;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Custom del styling */
del {
color: #999;
text-decoration: line-through;
}
/* Custom ins styling */
ins {
background-color: #d4edda;
text-decoration: none;
padding: 2px 4px;
}
</style>
</head>
<body>
<p>This is <strong>strongly important</strong> text.</p>
<p>This has <em>subtle emphasis</em>.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>Use the <code>console.log()</code> function.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>Price: <del>$99</del> <ins>$79</ins></p>
</body>
</html>Accessibility Considerations
How Screen Readers Handle Formatting
<strong>and<em>are announced with emphasis<del>is announced as "deleted" or "strikethrough"<ins>is announced as "inserted"<code>,<kbd>,<samp>may be announced differently- Visual-only formatting like
<b>and<i>may not be announced
✅ Accessibility Best Practice:
Choose semantic elements (<strong>, <em>) over presentational ones (<b>, <i>) when the text conveys importance or emphasis, not just visual styling.
Common Mistakes
Mistake 1: Using Wrong Semantic Element
<!-- WRONG: Using b when meaning is important -->
<p><b>Warning:</b> System will restart in 5 minutes.</p>
<!-- CORRECT: Use strong for importance -->
<p><strong>Warning:</strong> System will restart in 5 minutes.</p>
<!-- WRONG: Using i when meaning is emphasis -->
<p>I <i>really</i> need your help!</p>
<!-- CORRECT: Use em for emphasis -->
<p>I <em>really</em> need your help!</p>Mistake 2: Excessive Formatting
<!-- POOR: Too much formatting, hard to read -->
<p>
This is <strong><em><mark>very very important</mark></em></strong>
and you <strong>must</strong> <em>absolutely</em> <mark>read</mark>
<strong>every</strong> <mark>word</mark>!
</p>
<!-- BETTER: Use formatting sparingly -->
<p>
This is <strong>very important</strong> and you must read it carefully.
</p>Mistake 3: Using for Styling Only
<!-- WRONG: Using strong just for bold styling -->
<p><strong>Section One</strong></p>
<p><strong>Section Two</strong></p>
<p><strong>Section Three</strong></p>
<!-- CORRECT: Use headings or CSS -->
<h2>Section One</h2>
<h2>Section Two</h2>
<h2>Section Three</h2>
<!-- OR with CSS -->
<style>
.section-title {
font-weight: bold;
}
</style>
<p class="section-title">Section One</p>Mistake 4: Underlining Text That's Not a Link
<!-- CONFUSING: Underlined text looks like links -->
<p>This is <u>underlined</u> but not a link.</p>
<!-- BETTER: Avoid underline unless necessary -->
<p>This is <mark>highlighted</mark> instead.</p>
<!-- OR use CSS with different styling -->
<style>
.emphasis {
border-bottom: 2px solid #3498db;
}
</style>
<p>This has <span class="emphasis">emphasis</span> without confusion.</p>Complete Example: Article with Formatting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started with HTML</title>
<style>
body {
font-family: Georgia, serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
mark {
background-color: #fff3cd;
padding: 2px 4px;
}
code {
background-color: #f4f4f4;
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
}
kbd {
background-color: #333;
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.9em;
}
</style>
</head>
<body>
<article>
<h1>Getting Started with HTML</h1>
<p>
<strong>HTML</strong> (<i>HyperText Markup Language</i>) is the foundation
of web development. In this guide, we'll cover the <em>essential</em>
concepts you need to get started.
</p>
<h2>What You'll Learn</h2>
<p>
This tutorial covers <mark>everything from basic tags to advanced
concepts</mark>. You'll learn how to create web pages using semantic
HTML elements.
</p>
<h2>Your First HTML Tag</h2>
<p>
The most basic HTML element is the paragraph tag: <code><p></code>.
To create a paragraph, simply write:
</p>
<pre><code><p>This is a paragraph</p></code></pre>
<p>
<strong>Important:</strong> Always remember to close your tags!
A common mistake is forgetting the closing tag.
</p>
<h2>Keyboard Shortcuts</h2>
<p>
Here are some useful shortcuts:
</p>
<ul>
<li>Save file: <kbd>Ctrl</kbd> + <kbd>S</kbd></li>
<li>Copy: <kbd>Ctrl</kbd> + <kbd>C</kbd></li>
<li>Paste: <kbd>Ctrl</kbd> + <kbd>V</kbd></li>
</ul>
<h2>Pricing</h2>
<p>
<strong>Special Offer:</strong> Get started today for only
<del>$99</del> <ins>$49</ins>!
<br>
<small>*Limited time offer. Terms and conditions apply.</small>
</p>
<h2>Technical Note</h2>
<p>
The formula for calculating area is <var>A</var> = <var>l</var> × <var>w</var>,
where <var>A</var> is area, <var>l</var> is length, and <var>w</var> is width.
</p>
<footer>
<p>
<small>
© 2024 HTML Tutorial. All rights reserved.
<br>
This content is provided <i>as-is</i> without warranty.
</small>
</p>
</footer>
</article>
</body>
</html>Quick Reference Table
| Element | Purpose | Default Style | Semantic? |
|---|---|---|---|
<strong> | Strong importance | Bold | ✅ Yes |
<em> | Emphasis | Italic | ✅ Yes |
<b> | Bring attention (no importance) | Bold | ❌ No |
<i> | Alternative voice/mood | Italic | ❌ No |
<mark> | Highlight for reference | Yellow background | ✅ Yes |
<del> | Deleted text | Strikethrough | ✅ Yes |
<ins> | Inserted text | Underline | ✅ Yes |
<small> | Fine print/side comments | Smaller text | ✅ Yes |
<code> | Computer code | Monospace | ✅ Yes |
<kbd> | Keyboard input | Monospace | ✅ Yes |
Key Takeaways
<strong>indicates strong importance,<em>indicates emphasis<b>and<i>are presentational, without semantic meaning- Choose semantic elements when meaning matters, presentational when it's pure styling
<mark>highlights text for reference purposes<del>shows deleted text,<ins>shows inserted text<small>is for fine print and side comments<code>,<kbd>,<samp>, and<var>are for technical content- Avoid underlining (
<u>) as it confuses users expecting links - Don't overuse formatting—it reduces impact and readability
- All formatting elements can be styled with CSS
- Semantic elements improve accessibility for screen reader users
- You can nest formatting elements to combine effects
What's Next?
Now that you've mastered text formatting, we'll explore Quotations and Citations. You'll learn how to properly mark up quotes, citations, and references using elements like <blockquote>, <q>,<cite>, and <abbr>. These elements help you present attributed content professionally and semantically!