👀 Live Preview
Critical warning label with strong importance:
Warning: Do not share your password with anyone.
HTML <strong> Tag
Overview
What You’ll Learn
The <strong> tag marks text with strong importance or urgency. This guide covers syntax, global attributes, common use cases, strong vs b, accessibility, and best practices for beginners.
Strong Importance
Mark warnings, critical info, and urgent content.
Core Syntax
Write valid opening and closing strong tags.
strong vs b
Semantic urgency vs stylistic bold.
Styling
Use class and style when needed.
Accessibility
Assistive tech conveys added emphasis.
Best Practices
Use meaningfully, not for decoration alone.
Fundamentals
What Is the <strong> Tag?
The <strong> tag is a semantic HTML element used to represent text with strong importance, seriousness, or urgency. Browsers typically display it in a bold font, but its purpose is meaning — not just appearance.
Valid HTML5 — Strong Importance
Use strong for warnings, critical instructions, key dates, and genuinely important terms. Reserve b for stylistic bold without added semantic urgency.
The strong element is essential for conveying emphasis to both users and assistive technologies, helping build well-structured, accessible HTML documents.
Foundation
📝 Syntax
Wrap the text you want to emphasize within opening and closing strong tags:
strong.html
<strong>Your strong text here</strong>In a Paragraph
inline-strong.html
<p>
<strong>Warning:</strong> Do not share your password.
</p>Syntax Rules
strongis phrasing content — use inline insidep,li, headings, and other text blocks.- Self-closing syntax (
<strong />) is not valid in HTML. - Use for meaningful importance, not purely decorative bold styling.
- Combine with other semantic tags for a well-structured document.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Basic strong | <strong>...</strong> | Strong importance |
| Warning label | <strong>Warning:</strong> | Critical info |
| Styled | style="color: red" | Global attr |
| vs b | strong = urgent | b = stylistic |
| vs em | strong = importance | em = stress |
| Browser support | Universal | All browsers |
Comparison
⚖️ <strong> vs <b> vs <em>
| Element | Meaning | Default style | Best for |
|---|---|---|---|
<strong> | Strong importance or urgency | Bold | Warnings, critical instructions |
<b> | Stylistic attention | Bold | Keywords, product names |
<em> | Stress emphasis | Italic | Spoken stress in a sentence |
strong-vs-b-em.html
<p>Our <b>Pro Plan</b> is <em>very</em> popular.</p>
<p><strong>Important:</strong> Save your work before closing.</p>Reference
🧰 Attributes
The <strong> tag has no tag-specific attributes. Combine it with global attributes like class and style for enhanced presentation.
strong.html
<strong class="highlight" style="color: #ff0000;">Your styled text here</strong>class / id GlobalHook for CSS classes targeting warnings or highlighted important text.
class="highlight"style GlobalInline color or font-weight adjustments for urgent callouts.
style="color: #ff0000;"title OptionalExtra tooltip context for abbreviated or technical warnings.
title="Required action"lang OptionalDeclare language when emphasized text differs from the page language.
lang="en"Hands-On
Examples Gallery
Styled emphasis, important announcements, and semantic keyword highlighting with copy-ready code and live previews.
📚 Common Use Cases
Use <strong> to highlight text of strong importance, critical instructions, key dates, and genuinely significant terms.
Styled Strong Text
Combine strong with class and style for visually distinct important content:
strong.html
<strong class="highlight" style="color: #ff0000;">Your Styled Text Here</strong>Highlighting Important Text
The primary purpose of strong is to highlight text that is of strong importance or significance:
highlighting-important-text.html
<p>
In this announcement, we want to
<strong>emphasize</strong>
the key dates for the upcoming event.
</p>Semantic Keyword Emphasis
Mark genuinely important terms with strong so browsers and assistive technologies understand their significance. Use meaningfully — not for keyword stuffing:
semantic-keywords.html
<p>
Ensure your <strong>keywords</strong> are appropriately marked with the
<code><strong></code> tag when they carry genuine importance.
</p>A11y
♿ Accessibility
- Use strong semantically — Mark content that is genuinely important so screen readers convey added emphasis.
- Do not overuse — If everything is strong, nothing stands out. Reserve it for truly critical text.
- Pair with clear context — Labels like “Warning:” or “Important:” help all users understand urgency.
- Choose b for stylistic bold — When bold is decorative only, use
bor CSS instead ofstrong.
🧠 How <strong> Works
1
Author marks important text
Critical words or phrases are wrapped in strong tags.
Markup
2
Browser renders bold
Default user-agent styles apply font-weight: bold.
Display
3
Assistive tech adds emphasis
Screen readers communicate stronger importance to users.
A11y
=
Clear importance cues
Users instantly see and hear what content matters most.
Compatibility
Browser Support
The <strong> tag is supported in all major browsers, including Internet Explorer.
Baseline · HTML4 / HTML5
Strong emphasis everywhere
All browsers render <strong> with bold font weight by default.
100% Core tag support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported · EOL
Full supportOpera Fully supported
Full support<strong> tag 100% supported
Bottom line: Use <strong> confidently for important text in any browser.
Wrap Up
Conclusion
Mastering the <strong> tag helps you emphasize important content with clear semantic meaning. By following best practices and understanding its proper application, you enhance both the visual appeal and structure of your HTML documents.
Pro Tips
💡 Best Practices
✅ Do
- Use
strongto convey strong importance or urgency - Combine with other semantic HTML tags for structure
- Reserve
strongfor genuinely meaningful content - Pair warning labels with clear surrounding context
❌ Don’t
- Use
strongsolely for bold styling - Wrap every keyword for perceived SEO benefit
- Overuse
strongso nothing stands out - Replace
bwithstrongwhen urgency is not intended
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <strong>
Bookmark these before you emphasize text on your pages.
6
Core concepts 01
Importance
Strong urgency.
Purpose 02
Syntax
Inline element.
Foundation 03
vs b
Semantic bold.
Comparison 04
class / style
Customize.
Attributes 05
A11y
Added emphasis.
Accessibility 06
100% Support
All browsers.
Compatibility❓ Frequently Asked Questions
It represents text with strong importance, seriousness, or urgency. Browsers render it bold by default.
Both look bold by default.
strong conveys strong importance. b draws stylistic attention without added semantic urgency.No. Use global attributes like
class, id, and style.No. Use
strong when content is genuinely important. For decorative bold, use b or CSS font-weight.Yes. Full support in every major browser including Internet Explorer.
Emphasize important text
Practice <strong> for warnings, key dates, and critical content in the Try It editor.
About the author
6 people found this page helpful