HTML <strong> Tag
The <strong> tag in HTML is used to define text with strong importance, seriousness, or urgency. Unlike the <b> tag, which only makes text visually bold, the <strong> tag provides semantic meaning, indicating that the enclosed text has greater importance. This is beneficial for both accessibility and search engine optimization (SEO). Screen readers and search engines understand the semantic importance of <strong> and treat the text differently than regular or bold text.
Syntax
<strong>Text with strong importance</strong>
Attributes
| Attribute | Value | Description |
|---|---|---|
| None | None | This tag does not have any specific attributes |
Example
<p>This is a regular paragraph. <strong>This text is strongly important!</strong></p>
More Examples
Example 1: Highlighting Key Instructions
<p><strong>Important:</strong> Please ensure all doors are locked before leaving the building.</p>
Explanation: In this example, we use the <strong> tag to highlight a key instruction, ensuring it's clearly noticed by the user and also recognized for its importance by screen readers and search engines.
Example 2: Emphasizing Critical Product Information
<p>This product contains <strong>nuts</strong>. Please check ingredients carefully.</p>
Explanation: Here, the <strong> tag flags a crucial piece of product information, indicating a potential allergen. This is both visually and semantically helpful for users.
Example 3: Within a Headline
<h2><strong>Breaking News:</strong> New features released!</h2>
Explanation: Using <strong> within a heading allows for emphasis on specific keywords or urgent news. Note that while this is technically valid, it's often more effective to use semantic headings for structure and apply <strong> within paragraph text where emphasis is primarily needed.
Example 4: Nesting within other text formatting tags.
<p>This is <mark>marked</mark> text, which also has <strong>strong text</strong> within it.</p>
Explanation: The <strong> tag can be nested with other text-formatting tags like the <mark> tag, allowing for combination of different formatting and semantics.
Example 5: Combining with <em> Tag
<p>This is a crucial step: <strong><em>Do not skip this phase!</em></strong></p>
Explanation: Combining <strong> with <em> (for emphasis) can convey a layered level of importance where something is both important and emphasized. Note that semantically <strong> denotes strong importance while <em> denotes stress or emphasis.
Browser Support
| Browser | Version |
|---|---|
| Chrome | All |
| Edge | All |
| Firefox | All |
| Safari | All |
| Opera | All |
| Internet Explorer | All |
The <strong> tag is universally supported by all major browsers and is a safe choice for web development.
Notes and Tips
- Semantic Meaning: Use
<strong>when the text has strong importance, not just when you want to make it bold. - Accessibility: Screen readers interpret
<strong>as having importance, which is not the case with<b>. - SEO: Search engines consider text in
<strong>tags important and may use this in their ranking algorithm. - Do not overuse: Using
<strong>too much will make your content look cluttered and might make all text to appear important losing the actual purpose. Use it sparingly to emphasize the most important parts of the text. - Distinguish from
<b>: The<b>tag makes text bold, but has no semantic meaning, use<strong>for importance and<b>only if you want to make text bold without adding semantic meaning. - Styling: The visual appearance of
<strong>(usually bold) can be changed using CSS. If you want a different visual appearance you can use CSS to style it. But do not use the<b>tag only because of the visual appearance.
