HTML Text Formatting

HTML has several tags that let you change how text looks or give it special meaning. You can make things bold, italic, small, highlighted, and more.

HTML Formatting Elements

These tags were created to display special types of text. Here is a quick list of what we will cover:

• <b> – Bold text
• <strong> – Important text (also bold)
• <i> – Italic text
• <em> – Emphasized text (also italic)
• <mark> – Highlighted text
• <small> – Smaller text
• <del> – Deleted text (strikethrough)
• <ins> – Inserted text (underline)
• <sub> – Subscript text (below the line)
• <sup> – Superscript text (above the line)

Bold and Strong (Both Make Text Bold, But Different Meaning)

The <b> tag makes text bold. That is it. No extra meaning. Just bold for style.

The <strong> tag also makes text bold, but it adds meaning. It tells the browser “this text is important.” Screen readers will say it with more stress.

Visually, <b> and <strong> look the same (both bold). But use <strong> when something is actually important. Use <b> when you just want bold text for style.

Italic and Emphasized (Both Slant the Text)

The <i> tag makes text italic. It is often used for technical terms, foreign words, thoughts, or ship names.

The <em> tag also makes text italic, but it adds emphasis. Screen readers will say the words with verbal stress.

Again, both look the same (italic). But use <em> when you want to stress a word. Use <i> for style or technical terms.

Smaller Text

The <small> tag makes text smaller than the surrounding text. It is often used for disclaimers, copyright notices, or fine print.

Mark (Highlighted Text)

The <mark> tag highlights text, just like using a yellow marker on paper.

Use this when you want to draw attention to a specific word or phrase.

Deleted and Inserted Text (Track Changes)

The <del> tag shows text that has been removed. Browsers draw a line through it (strikethrough).

The <ins> tag shows text that has been added. Browsers underline it.

These are useful for showing edits or changes to a document.

See how the old text has a line through it and the new text is underlined? That is very clear to readers.

Subscript and Superscript (Below and Above the Line)

<sub> makes subscript text. It sits half a character below the normal line. Great for chemical formulas.

<sup> makes superscript text. It sits half a character above the normal line. Great for footnotes or exponents.

You will see subscript a lot in science (H₂O, CO₂). Superscript shows up in math (x², 10³) and for footnotes.

Try It Yourself (Combine Multiple Formatting Tags)

You can also combine these tags. For example, you might want bold and italic text together.

To combine tags, just nest them inside each other. Make sure you close the inner tag before the outer one.

Quick Summary

• <b> and <strong> both make bold text. Use <strong> for importance.
• <i> and <em> both make italic text. Use <em> for emphasis.
• <mark> highlights text like a marker.
• <small> makes text smaller for disclaimers or fine print.
• <del> shows deleted text with a strikethrough.
• <ins> shows inserted text with an underline.
• <sub> creates subscript text (below the line).
• <sup> creates superscript text (above the line).

What Just Happened? Let Me Explain

• Some formatting tags are just for visual style (<b>, <i>, <small>).
• Some formatting tags add meaning (<strong>, <em>). Screen readers treat these differently.
• <mark> is great for highlighting search results or important notes.
• <del> and <ins> are useful when showing edits or changes.
• <sub> and <sup> are essential for science and math.
• You can nest formatting tags to combine effects.

HTML Text Formatting Reference

Here are all the tags we covered in this chapter: