HTML5 provides four phrasing elements that can be used to emphasize text within the body of a document:
- Text enclosed between <b> </b> tags is enhanced without conveying extra importance, such as keywords in a paragraph- typically displayed in bold .
- Text enclosed between <i> </i> tags is enhanced without conveying extra importance- typically displayed in an italic font.
- Text enclosed between <strong> </strong> tags gains increased importance- typically displayed in a bold font. The HTML Strong (
<strong>) indicates that its contents have strong importance, seriousness, or urgency. - The HTML <em> tag marks text that has stress emphasis which traditionally means that the text is displayed in italics by the browser.
<b> vs. <strong>
It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. <b> and <strong> are perhaps one of the most common sources of confusion, causing developers to ask “Should I use <b> or <strong>? Don’t they both do the same thing?”
Not exactly. The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it’s more important.
It may help to realize that both are valid and semantic elements in HTML5 and that it’s a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <strong>).
Example 1-
<!DOCTYPE html>
<html>
<body>
<p>This is normal text – <b>and this is bold text</b>.</p>
</body>
</html>
Example 2-
<!DOCTYPE html>
<html>
<body>
<p>He named his car <i> Speedy </i>, because it was very fast.</p>
</body>
</html>
Example 3-
<!DOCTYPE html>
<html>
<body>
<p><strong>Warning: Do not approach the
zombies <em>under any circumstances</em>.
</strong> They may <em>look</em>
friendly, but that’s just because they want
to eat you.</p>
</body>
</html>
Example 4-
<!DOCTYPE html>
<html>
<body>
<p>
In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>
</body>
</html>
Example 5-
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<title> Emphasis Example</title>
</head>
<body>
<p><strong> Warning.</strong> This dungeon is dangerous. <strong> Avoid the ducks.</strong> Take any gold you find.<br> <strong> Do not take any diamonds, they are explosive.</Strong> You have been warned.</p>
<p> <em> Puppies </em> are cute.</p>
<p> Puppies <em> are </em> cute.</p>
<p> Puppies are <em> cute.</em></p>
</body>
</html>
Computer Technology 