HTML Text Formatting

HTML gives you a set of inline elements whose job is to mark up small pieces of text as having a special meaning or role — text that is important, emphasized, edited, a superscript, a highlighted phrase, and so on. These are often called “text formatting” elements because browsers render them with a default visual style (bold, italic, smaller size), but their real purpose runs deeper than appearance: they tell the browser, search engines, and assistive technologies something about the meaning of the text they wrap. Understanding the difference between elements that carry meaning and elements that are purely visual is one of the most important skills in writing good HTML.

Overview / How it works

Every text formatting element in HTML is an inline element. Inline elements do not start a new line or force layout breaks the way block elements like  or <div> do; instead, they sit inside the flow of text, wrapping only the characters between their opening and closing tags. When the browser parses your document, each formatting element becomes its own node in the DOM tree, nested inside whatever block-level parent contains it (usually a ). The browser’s default stylesheet then applies a built-in visual style to that node — for example,  is rendered in bold and  in italics — but that visual style is just a convenience default, not the point of the tag.

This distinction matters because HTML actually offers two kinds of tags that can look identical on screen: semantic tags like  and , which describe why the text matters, and older presentational tags like  and , which historically only described how the text should look. Modern HTML has actually redefined  and  to have narrow semantic uses too (stylistically offset text, keywords, product names) rather than being purely decorative, but they still carry no special importance or emphasis. Screen readers, for instance, may change their intonation for  and  content, but they generally do not for  and . Search engines also weigh emphasized text differently from plain bold text. So choosing the right tag is not a style preference — it changes what the document communicates. Visual styling like color, font size, or letter-spacing belongs to CSS, not to these HTML elements; the formatting elements only establish meaning, and the browser’s default look for that meaning can always be overridden with CSS in a real project.

Syntax

Text formatting elements follow the same general inline-element syntax: an opening tag, the text content, and a matching closing tag, all placed inside a block-level container such as a paragraph.

<p>This is normal text with a <strong>strongly important</strong> word and an <em>emphasized</em> word.</p>

The most common formatting elements are summarized below:

Element	Meaning	Default rendering
`<strong>`	Strong importance, seriousness, or urgency	Bold
`<em>`	Stress emphasis (changes the meaning of the sentence)	Italic
`<b>`	Stylistically offset text (keywords, product names) with no extra importance	Bold
`<i>`	Text in an alternate voice or mood (technical terms, foreign phrases, thoughts)	Italic
`<mark>`	Text highlighted for reference or relevance	Yellow highlight background
`<small>`	Side comments, fine print, legal disclaimers	Smaller font size
`<del>`	Deleted / removed text	Strikethrough
`<ins>`	Inserted / added text	Underline
`<sub>`	Subscript text	Lowered, smaller text
`<sup>`	Superscript text	Raised, smaller text

None of these elements require attributes to function, though <del> and <ins> optionally accept a cite attribute (a URL explaining the change) and a datetime attribute (when the change was made).

Examples

Example 1: Basic emphasis and importance

<p>Please read this <strong>before you submit the form</strong>. You <em>must</em> agree to the terms.</p>

Result: A paragraph is displayed where the phrase “before you submit the form” appears in bold, and the word “must” appears in italics; the rest of the sentence renders in normal weight and style.

This example shows the two most commonly confused elements used correctly together.  flags a genuinely important instruction, while  shows the reader that “must” should be read with extra stress — if you removed the tag, the sentence would lose a nuance of meaning, which is the hallmark of true emphasis.

Example 2: Highlighting, fine print, and edits

<p>The recipe calls for <mark>two cups of flour</mark>, not one as originally listed.</p>
<p><del>$49.99</del> <ins>$39.99</ins> — sale ends Friday.</p>
<p><small>Prices shown do not include shipping and handling.</small></p>

Result: The browser displays “two cups of flour” with a yellow highlighted background, then a second line showing “$49.99” with a strikethrough immediately followed by “$39.99” underlined, and finally a line of smaller-sized text reading the shipping disclaimer.

This is a realistic combination you’ll see on e-commerce and content sites:  draws the eye to a search-relevant or corrected phrase, <del>/<ins> together represent a price change (the browser does not literally cross out and re-type the price — it renders both elements’ text with their respective decorations), and  de-emphasizes legal or supplementary text without hiding it.

Example 3: Scientific notation with subscript and superscript

<p>Water is written as H<sub>2</sub>O, and Einstein's famous equation is E = mc<sup>2</sup>.</p>

Result: The paragraph displays “H” followed by a small lowered “2” then “O”, and later “mc” followed by a small raised “2”, exactly as chemical formulas and exponents normally appear in print.

Here  and  are used for their real purpose — precise scientific and mathematical notation — rather than as a general-purpose way to make text smaller, which is what  is for.

How it works step by step

When the browser’s HTML parser encounters a formatting tag such as , it performs the same steps it uses for any element: it opens a new node in the DOM tree as a child of whatever element is currently open (typically a paragraph), it keeps that node open while parsing all text and nested inline tags until it finds the matching closing tag, and then it closes the node. Because these are inline elements, the layout engine renders their content on the same line as surrounding text, only breaking to a new line if the text wraps naturally at the edge of its container. The browser’s built-in (user-agent) stylesheet then matches each element name against its default CSS rule — strong { font-weight: bold; }, em { font-style: italic; }, mark { background-color: yellow; }, and so on — and applies it, exactly as your own CSS would. This is why you can always override the look with your own stylesheet: the default styling is just a low-priority rule the browser ships with, not a hardcoded behavior of the tag itself.

Common Mistakes

Mistake 1: Using bold/italic purely for looks instead of meaning.

<p><b>Warning:</b> the server will restart in 5 minutes.</p>

This isn’t invalid HTML, but it’s a missed opportunity: a warning is a strong, important notice, so  communicates that meaning to screen readers and search engines, while  only communicates “make this bold.” The corrected version:

<p><strong>Warning:</strong> the server will restart in 5 minutes.</p>

Mistake 2: Overlapping tags instead of properly nesting them.

<p>This is <strong>very <em>important</strong> text</em>.</p>

Here the  tag opens inside  but closes after it, crossing the tag boundaries. Browsers will try to recover from this, but the result is unpredictable and it fails HTML validation. Tags must close in the reverse order they opened:

<p>This is <strong>very <em>important</em></strong> text.</p>

Mistake 3: Using  as a generic yellow-highlighter for decoration.

 specifically means “relevant in the current context” — for example, a search term matched on a results page. Sprinkling it across a page just to add yellow color misuses its meaning and confuses assistive technology; use CSS on a  for purely decorative highlighting instead.

Best Practices

Choose  and  when the text carries real importance or emphasis; reach for  and  only for stylistic cases with no added meaning (like a book title or a keyword the first time it’s defined).
Never use formatting elements to fake a heading — a bold paragraph is not a substitute for <h2> or <h3>, which carry document-outline meaning that formatting tags don’t.
Reserve  for genuinely relevant or search-matched text, not general decoration.
Use  and  only for true subscript/superscript content (chemical formulas, exponents, footnote markers), not to shrink arbitrary text.
Leave visual styling — colors, custom fonts, letter spacing — to CSS; don’t rely on a tag’s default appearance as your design system.
Always close inline formatting tags properly and never let them overlap another tag’s boundaries.
Use <del> and <ins> together when showing an edit so readers and assistive tech understand both the removal and the replacement.

Practice Exercises

Exercise 1: Write a paragraph describing a product sale that uses <del> for the old price and <ins> for the new price, plus  for a one-line disclaimer about the offer’s expiration.

Exercise 2: Write a short paragraph of instructions where one phrase is critically important (use the correct element for real importance) and one word needs emphasis that changes the sentence’s meaning (use the correct element for stress emphasis). Explain in a comment to yourself why you chose each tag over  or .

Exercise 3: Write the chemical formula for carbon dioxide (CO2) and the mathematical expression for “x squared plus y squared” using the correct formatting elements, inside a single paragraph.

Summary

Text formatting elements are inline elements that add meaning (or, for /, a narrow stylistic role) to spans of text within a block-level parent.
 and  are semantic — they change what a sentence means and are treated specially by screen readers and search engines.
 and  carry no importance or emphasis; use them only when there’s truly no semantic weight to convey.
, , <del>, <ins>, , and  each have a specific, narrow purpose — don’t repurpose them as generic styling shortcuts.
Default rendering (bold, italic, highlight, strikethrough) comes from the browser’s built-in stylesheet and can always be restyled with your own CSS.
Inline formatting tags must be properly nested and closed in the reverse order they were opened.