HTML LEARNING PATH
2.9 Use Tags to Format Text
WHY
Formatting elements were designed to display special types of text with added semantic meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".
HOW
The HTML <em> element defines emphasized text, with added semantic importance. The HTML <b> element defines bold text, without any extra importance. The HTML <strong> element defines strong text, with added semantic "strong" importance. The <strong> and <em> tags are "logical" tags. Use these tags when the content of your page requires that certain words or phrases be stressed, and if you want highlighting words only for visual effect, use the <b> and <i> tags.
Code sample:
<p><em>This is the paragraph content.</em></p>
GLOSSARY
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
TIPS AND RESOURCES
PRACTICE
Add <em> tag to paragraph text in your web page.
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<meta name="description" content="Describe the content of your web page here">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Your Name">
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>A list item</li>
<li>A second list item</li>
<li>A third list item</li>
</ul>
<div class="parent">
<div class="child"></div>
</div>
<section>
<h1>This is the heading</h1>
<p><img src="url" alt="some_text"></p>
<p><em>This is the paragraph content. <a href="http://www.google.com">Search Google.com</a></em></p>
</section>
<section>
<div class="parent">
<div class="child"></div>
</div>
</section>
</body>
</html>
Save your file.