HTML Text Formatting

You already used the style attribute to change how text looks. Formatting tags answer a different question: what does this piece of text mean? Important warnings, spoken emphasis, highlights, edits, fine print, and scripts like H₂O belong in dedicated HTML elements. Browsers often bold or italicize them by default, but assistive tools and search systems can also use the meaning — something color alone does not provide.

What is HTML text formatting?

Text formatting elements wrap a word or phrase inside a paragraph (or similar text) to mark a role: importance, emphasis, highlight, deletion, insertion, and more. They are inline elements. They do not start a new block like p or h1. You place them around the exact span of text that carries that role, then close them so the rest of the sentence returns to normal.

Direct answer

Use semantic formatting tags for meaning: strong for strong importance, em for stress emphasis (as if you stressed the word when speaking), mark for relevance highlight, small for fine print or side comments, del and ins for removed or inserted text, and sub / sup for subscript and superscript. Prefer these tags when the meaning matters. When you only want a bold or italic look with no extra meaning, use CSS — including the inline style ideas from the previous session — instead of misusing strong or em.

Tag reference at a glance

strong and em first

strong and em are the pair you will use most. Reach for strong when the content is important — a key term, a warning, a required field label in text. Reach for em when you would change your voice to stress a word. Default bold and italic are only the common presentation; the tags still carry meaning if a stylesheet changes the look later.

Reading the sample

• strong wraps “final price” because that phrase is important in the sentence
• em wraps “before” because the timing is the stressed idea
• Both tags sit inside one paragraph; they do not replace p
• If you only wanted navy-colored text with no importance meaning, a style (or later CSS) would be the better tool

More formatting tags in one paragraph

Once strong and em feel natural, add the helpers for highlights, edits, fine print, and scripts. Keep nesting shallow: wrap only the words that need each role.

What each helper is doing

• sub lowers the “2” in the water formula; sup raises the exponent in 12²
• del and ins show an edit trail — old value out, new value in
• small marks secondary fine print, not the main claim
• mark highlights a relevant hit, similar to a search highlight
• strong and em still mark importance and stress inside the same paragraph
  You do not need every tag in every sentence. Pick the ones that match the real meaning of your text.

Meaning tags vs look-only styling

Older pages sometimes use b and i for bold and italic without strong meaning. In this course, prefer strong when the content is important and em when you would stress a word when speaking. Use CSS when you only want a visual look. That habit keeps your HTML honest: formatting tags describe content, and stylesheets describe presentation.

Practice in your editor

1. Write one normal paragraph about a product price.
2. Wrap the product name in strong.
3. Wrap one warning word in em.
4. Mark an old price with del and a new price with ins.
5. Optional: add a tiny footnote-style note with small, or a formula piece with sub / sup.
6. Save and open the page. Confirm tags are closed and the meaning reads clearly.
7. Intentionally leave one end tag out, refresh, notice how the rest of the line stays styled, then fix it.
   Seeing an unclosed tag “leak” style across the paragraph trains careful nesting faster than only copying perfect samples.

Mistakes that weaken formatting

• Using only style="font-weight: bold" when the word is truly important — prefer strong for meaning
• Using strong everywhere just to make text thicker — that dilutes importance
• Nesting five formatting tags inside each other with no reason
• Using sup / sub for decoration instead of real scripts (math, chemistry, footnotes)
• Forgetting end tags so the rest of the page inherits bold, italic, or highlight
• Treating mark as a general yellow paint tool for whole paragraphs of unrelated text

Summary

• Formatting tags add meaning inside text, not only decoration
• Start with strong and em, then add mark, small, del, ins, sub, and sup when needed
• Prefer semantic tags when importance, emphasis, edits, or scripts matter
• Use CSS when you only need look-and-feel with no extra meaning
• Keep nesting simple and always close each tag you open
• Choose tags from the meaning of the sentence, not from a habit of bolding everything