Text Formatting and Comments

Semantic Text Formatting

Sometimes you want to make text stand out. You might want to bold a critical warning, or italicize a word for emphasis.

HTML provides several tags for text formatting. However, modern web development focuses on semantic tags. Semantic tags don’t just change how the text looks; they change what the text means.

Strong Importance

The <strong> tag is used to indicate that text has strong importance, seriousness, or urgency. Browsers typically render this text as bold.

<p><strong>Warning:</strong> Do not feed the bears.</p>

Emphasis

The <em> tag is used to indicate stress emphasis. If you were reading the sentence out loud, you would naturally stress the word wrapped in an <em> tag. Browsers typically render this text in italics.

<p>I am <em>very</em> happy to see you.</p>

HTML Comments

When writing code, it is often helpful to leave notes for yourself or for other developers who might read your code later.

You can write comments in HTML. The browser will completely ignore comments, meaning they will never be visible on the final webpage.

Syntax / Structure

HTML comments start with <!-- and end with -->.

<!-- This is a comment. The browser will ignore this. -->

Comments are very useful for:

1. Explaining what a confusing block of code does.
2. Temporarily hiding code while you are debugging without deleting it completely.

Code Example

<!-- Main Navigation Section -->
<nav>
  <!-- <a href="/home">Home</a> Temporarily disabled -->
  <a href="/about">About</a>
</nav>

Try It Yourself

Try making some text strongly important, and try leaving a comment in the editor!

Key Takeaways

• Use <strong> for text that is highly important (usually rendered bold).
• Use <em> to emphasize a specific word or phrase (usually rendered italicized).
• Avoid purely visual tags like <b> and <i> unless necessary.
• Use <!-- comment here --> to leave invisible notes in your HTML.