Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is the Difference Between b and strong , i and em Tags?
In this article, we will discuss the differences between the <b> and <strong> tags, <i> and <em> tags, and look at practical examples demonstrating their usage.
HTML provides both physical and semantic markup tags. Physical tags control visual appearance, while semantic tags convey meaning and importance to browsers, screen readers, and search engines.
<b> and <strong> Tags
The <b> HTML element is used to draw the reader's attention to elements whose contents are otherwise not of special importance. It makes text appear bold for presentation purposes without conveying additional semantic meaning.
The <strong> element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically display this as bold text, but the key difference is the semantic meaning it carries for accessibility tools and search engines.
Syntax
Following is the syntax for the <b> tag
<b>bold text content</b>
Following is the syntax for the <strong> tag
<strong>important content</strong>
Using the <b> Tag
The <b> tag should be used when you need to make text visually bold without adding semantic importance. Common use cases include product names, keywords in summaries, or stylistic emphasis.
Example
Following example demonstrates the usage of the <b> tag in HTML
<!DOCTYPE html> <html> <head> <title><b> Tag Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Product Description</h3> <p>The <b>TutorialsPoint Pro</b> package includes advanced features like <b>video tutorials</b> and <b>interactive coding exercises</b>.</p> </body> </html>
The output displays product names and features in bold for visual emphasis
Product Description The TutorialsPoint Pro package includes advanced features like video tutorials and interactive coding exercises. (TutorialsPoint Pro, video tutorials, and interactive coding exercises appear in bold)
Using the <strong> Tag
The <strong> tag should be used for content that has strong importance or urgency. Screen readers will announce this text with emphasis, and search engines may give it additional weight.
Example
Following example demonstrates the usage of the <strong> tag in HTML
<!DOCTYPE html> <html> <head> <title><strong> Tag Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Security Warning</h3> <p><strong>Warning:</strong> Never share your password with anyone. <strong>Always</strong> log out of shared computers.</p> <p>Nested emphasis: <strong>This is important, <strong>and this is even more important</strong></strong></p> </body> </html>
The output shows semantically important content in bold, with nested emphasis having greater importance
Security Warning Warning: Never share your password with anyone. Always log out of shared computers. Nested emphasis: This is important, and this is even more important (Warning, Always, and the nested text appear in bold with semantic meaning)
<i> and <em> Tags
The <i> tag represents text in an alternate voice or mood, such as foreign words, technical terms, or thoughts. It displays content in italics for stylistic purposes without semantic emphasis.
The <em> tag indicates stress emphasis that can change the meaning of a sentence. It provides semantic emphasis and is typically rendered in italics by browsers.
Syntax
Following is the syntax for the <i> tag
<i>italic text content</i>
Following is the syntax for the <em> tag
<em>emphasized content</em>
Using the <i> Tag
The <i> tag is appropriate for foreign phrases, technical terms, ship names, or thoughts without semantic emphasis.
Example
Following example demonstrates the usage of the <i> tag in HTML
<!DOCTYPE html> <html> <head> <title><i> Tag Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Language and Technical Terms</h3> <p>In French, <i>bonjour</i> means "hello" and <i>au revoir</i> means "goodbye".</p> <p>The ship <i>HMS Titanic</i> was considered unsinkable.</p> <p>She thought to herself, <i>This is going to be a long day</i>.</p> </body> </html>
The output shows foreign words, ship names, and thoughts in italics without semantic emphasis
Language and Technical Terms In French, bonjour means "hello" and au revoir means "goodbye". The ship HMS Titanic was considered unsinkable. She thought to herself, This is going to be a long day. (Foreign words, ship name, and thoughts appear in italics)
Using the <em> Tag
The <em> tag should be used when you want to stress a word or phrase that changes the meaning or tone of the sentence.
Example
Following example demonstrates the usage of the <em> tag in HTML
<!DOCTYPE html> <html> <head> <title><em> Tag Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Semantic Emphasis Examples</h3> <p>I <em>love</em> programming! (emphasis on love)</p> <p><em>I</em> love programming! (emphasis on who loves it)</p> <p>I love <em>programming</em>! (emphasis on what is loved)</p> <p>Nested emphasis: <em>This is emphasized, <em>and this has stronger emphasis</em></em></p> </body> </html>
The output demonstrates how emphasis placement changes meaning
Semantic Emphasis Examples I love programming! (emphasis on love) I love programming! (emphasis on who loves it) I love programming! (emphasis on what is loved) Nested emphasis: This is emphasized, and this has stronger emphasis (Different words are emphasized, changing the sentence meaning)
Key Differences
Following table summarizes the differences between these tags
| Aspect | <b> Tag | <strong> Tag | <i> Tag | <em> Tag |
|---|---|---|---|---|
| Purpose | Visual styling only | Semantic importance | Alternative voice/mood | Stress emphasis |
| Appearance | Bold text | Bold text | Italic text | Italic text |
| Screen Readers | No special emphasis | Announces with emphasis | No special emphasis | Announces with emphasis |
| SEO Impact | Minimal | Higher relevance | Minimal | Content emphasis |
| Use Cases | Keywords, product names | Warnings, important notes | Foreign words, ship names | Changing sentence meaning |
| Nesting Effect | Visual only | Increased importance | Visual only | Stronger emphasis |
Best Practices
Choose semantic tags (<strong> and <em>) when content has meaningful importance or emphasis. Use physical tags (<b> and <i>) only for visual styling without semantic meaning. This approach improves accessibility, SEO, and overall document structure.
Example Combining All Tags
Following example demonstrates appropriate usage of all four tags together
<!DOCTYPE html> <html> <head>
1K+ Views
