Why Does Text Formatting Matter?

Imagine reading an article where every word looks exactly the same. No emphasis, no highlights, no indication of what’s important. Pretty boring, right?

HTML formatting helps readers understand your content. Some elements change how text looks, while others tell browsers and assistive technologies what that text means.

Make Text Bold, Italic, and Important

HTML gives us several ways to emphasize text. They may look similar, but they don’t always communicate the same meaning.

<p>This is <b>bold text</b>.</p>
<p>This is <strong>important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>

Use <strong> when something has strong importance, and <em> when you want to stress a word or phrase. The <b> and <i> elements have different semantic uses, such as drawing attention or identifying a technical term.

Give Your Content Structure

You’ve already used headings and paragraphs in our HTML & CSS course. Now let’s combine them with semantic formatting to make a more polished article.

<article>
  <h2>My Coding Journey</h2>
  <p>Learning HTML is <strong>exciting</strong>!</p>
  <h3>My First Milestone</h3>
  <p>I built my <em>first web page</em>.</p>
</article>

Make Important Words Stand Out

Want to highlight a phrase, show a note in smaller print, or underline an annotation? HTML has elements for those situations.

<p>Remember to <mark>save your work</mark>!</p>
<p><small>Terms and conditions apply.</small></p>
<p>A <u>mispeled</u> word needs attention.</p>

The <mark> element marks content relevant to the current context. <small> represents side comments or fine print. <u> represents a non-textual annotation, such as marking a spelling issue.

Show What Changed

Sometimes you want readers to see that content has been added, removed, or corrected. That’s where <del> and <ins> come in.

<p>
  The workshop starts at
  <del>2:00 PM</del>
  <ins>3:00 PM</ins>.
</p>

This is useful for updates, corrections, document revisions, and showing changes without hiding the original information.

Superscripts, Subscripts, and Code

HTML can also represent mathematical notation, chemical formulas, keyboard input, and code.

<p>Water: H<sub>2</sub>O</p>
<p>Squared: x<sup>2</sup></p>
<p>Use <code>console.log()</code>.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

Formatting vs. Meaning

Here’s the secret to writing better HTML: choose an element because it describes your content accurately, not just because it looks nice.

• Use <strong> for strong importance.
• Use <em> for stress emphasis.
• Use <mark> for relevant highlights.
• Use <del> and <ins> for edits.
• Use CSS when you only want to change visual styling.
• Keep headings logical and content accessible.

The result? Cleaner code, more meaningful content, and a better experience for everyone.