This lesson covers a topic that is a favorite in junior developer interviews. While <b> (bold) and <strong> look the same, their meaning is fundamentally different. This is your introduction to Semantic HTML.
Analogy: <strong> is like a warning siren—it signifies genuine importance. <b> is like a highlighter pen—it just draws your eye to something without changing its importance.
Semantic Tags (They have MEANING)
<strong>: Use this when the text has strong importance or seriousness.
<em> (Emphasis): Use this to stress a word, like you would change your tone of voice when speaking.
Stylistic Tags (They are for PRESENTATION)
<b> (Bold): Use this to make text visually stand out without implying it's more important (e.g., a product name in a review).
<i> (Italic): Use this for text that is set off from the normal prose, like a foreign phrase or a technical term.
The Code
<!-- Semantic Example -->
<p><strong>Warning:</strong> Failure to save will result in data loss.</p>
<p>You <em>must</em> submit this by 5 PM.</p>
<!-- Stylistic Example -->
<p>The key ingredient is <b>baking soda</b>.</p>
<p>The scientific name for a house cat is <i>Felis catus</i>.</p>Best Practice Tip: When in doubt, always choose the semantic tag (<strong> or <em>). It's better for accessibility and SEO, and it's almost always the correct choice.
What's Next: We've learned to format text, but the web is all about connection. Next, we will learn how to create hyperlinks, the very heart of the web.