Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 some examples which use these tags.
<b> and <strong> tags
The <b> HTML element is used to draw the reader's attention to elements whose contents are otherwise unimportant. It highlights a section of text in bold to make it more visible to the user. It's a fashion statement. It conveys no additional significance.
As a result, if we only need to increase the font-weight of a specific word, phrase, or paragraph for presentation purposes, we should use the <b> tag.
Syntax
The <b> tag is written as <b>/b>, with the bold text inserted between the beginning and ending tags.
<b> --bold text-- </b>
The HTML <strong> tag emphasizes text, which traditionally means that the browser displays the text as bold. It highlights the significance of the content. It can be used to emphasize seriousness, urgency, or significance. It indicates how something must be comprehended.
The text within the <strong> tag has semantic significance for search engines, and it is highlighted with special intonation.
Syntax
<strong> --content to be emphasized-- </strong>
The difference between these tags is that <b> only visually makes the text appear bold, whereas the </strong> tag also provides semantic emphasis indicating a meaningful word or text section. A </strong> tag that is used within another </strong> tag carries more weight.
The reason for this distinction is that HTML distinguishes between semantic (meaningful) and physical (visual appearance) tags. While the former refers to the meaning of the respective areas, the latter simply defines the optical display in browsers.
Let us see examples for the usage of both tags.
Example
In this example, we will demonstrate the usage of <b> tag in HTML.
<!DOCTYPE html>
<html>
<head>
<title> <b> tag in HTML </title>
<style>
div{
background-color:honeydew;
color:darkolivegreen;
width:350px;
height:70px;
padding:20px;
margin:20px;
font-size:17px;
}
</style>
</head>
<body>
<h3>An example of bold tag</h3>
<div>
<p>
The text below is enclosed within the 'bold' tag<br>
<b>I am just bold text without any significance</b>
</p>
</div>
</body>
</html>
Example
In this example, we will demonstrate the usage of <strong> tag in HTML.
<!DOCTYPE html>
<html>
<head>
<title> <strong> tag in HTML </title>
<style>
div{
background-color:mistyrose;
color:mediumvioletred;
width:420px;
height:70px;
padding:20px;
margin:20px;
font-size:17px;
}
</style>
</head>
<body>
<h3>An example of strong tag</h3>
<div>
<p>
The text below is enclosed within the 'strong' tag<br>
<strong>I am a text of strong importance, unlike plain bold text.<strong>
</p>
</div>
</body>
</html>
< i > and < em > tags
In HTML, the <i> tag is used to display content in italics. This tag is typically used to display a technical term, phrase, or key word in another language. The <i> tag, like the <b> tag, is used for presentation purposes. It represents a portion of a text in a different voice or mood, or something that indicates a different text quality.
Syntax
<i> --contents-- </i>
The <em> tag indicates the emphasis of its contents. It has the ability to change the meaning of a sentence. The text within this tag is also italicized. The <em> element can be nested, with each level indicating a higher level of emphasis.
Syntax
<em> --content to be emphasized-- </em>
The main distinction between these two tags is that the <em> tag semantically emphasizes an important word or section of words, whereas the I tag is simply offset text that is conventionally styled in italic to show a different mood or voice.
Let us look at examples depicting the usage of both these tags.
Example
In this example, we will demonstrate the usage of <i>tag in HTML.
<!DOCTYPE html>
<html>
<head>
<title> <i> tag in HTML </title>
<style>
div{
background-color:mintcream;
color:teal;
width:320px;
height:70px;
padding:20px;
margin:20px;
font-size:17px;
}
</style>
</head>
<body>
<h3>An example of i tag</h3>
<div>
<p>
In French <i>Je m'appelle</i> means 'my name is'
</p>
</div>
</body>
</html>
Example
In this example, we will demonstrate the usage of <em>tag in HTML.
<!DOCTYPE html>
<html>
<head>
<title> <em> tag in HTML </title>
<style>
div{
background-color:linen;
color:purple;
width:320px;
height:50px;
padding:20px;
margin:20px;
font-size:18px;
}
</style>
</head>
<body>
<h3>An example of em tag</h3>
<div>
<p>
<em>I am the emphasized part</em> of the entire text.
</p>
</div>
</body>
</html>
176 Views
