Text formatting

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~2 min

Level

advanced

This lesson

This lesson teaches Text formatting—the ideas, syntax, and habits you need before moving on in HTML.

Forms are where users convert and where security mistakes (validation, labels) show up first.

You will apply Text formatting in contexts like: Contact forms, login flows, search boxes, and checkout steps in production sites.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs. Also use the HTML reference desk when you need tag or attribute lookup.

When intermediate lessons feel comfortable and you are ready for production-style trade-offs.

HTML provides semantic inline tags so meaning survives without CSS. Prefer them over naked span wrappers whenever the semantics fit.

Stress and importance

: strong importance, warnings, critical keywords—not arbitrary bold.
: emphasis that changes spoken stress or interpretation.
 / : stylistic offsets without implied semantics—use rarely.

Scientific and editorial marks

 /  for subscripts and superscripts.
 for relevance highlighting (search hits).
 for disclaimers and fine print—not merely tiny text.

Edits over time

<del> + <ins> pair legal revisions when timestamps matter.
<s> marks content no longer accurate without claiming replacement text.

Decision checklist

If stripping CSS changes how you’d read meaning aloud, pick a semantic tag.
If only visuals differ (brand font weight), use CSS.
Combine semantics + CSS:  is valid when emphasis and styling align.

What slips through PR review

b/i creep: quick bold/italic hacks without checking whether emphasis/importance semantics apply—screen readers behave differently.
Fake lists: using line breaks plus bullet characters instead of ul/li—pagination, copy/paste, and assistive tech lose list semantics.
Language mixing: phrases in another tongue should carry lang so pronunciation stays correct.

Example — semantic inline tags

<p>
  <strong>Warning:</strong> backup runs at midnight.
  The keyword is <em>incremental</em>, not full.
  Formula: <var>n</var> <sup>2</sup> + <mark>highlighted term</mark>.
</p>

Rendered output

Warning: backup runs at midnight. The keyword is incremental, not full. Formula: n ² + highlighted term.

Important interview questions and answers

Q: When should you use `strong` vs `b`?
A: Use `strong` for semantic importance; use `b` only for stylistic offset without importance semantics.
Q: Why is `target="_blank"` usually paired with `rel="noopener"`?
A: It blocks the opened page from controlling the opener via `window.opener`, improving security.
Q: Why avoid fake buttons built with ``?
A: Anchors are for navigation; actions should use `

Tip: Prefer semantic elements (strong, em) over presentational tags.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

What confused you about this lesson?
How would you explain this to a teammate in 30 seconds?