HTML Formatting
In this page:
Bold vs. Strong Text
The b tag makes text physically bold for styling purposes. The strong tag also bolds text, but it carries deep semantic meaning. It signals to search engines and screen-reader software that the text inside has critical importance.
Note: Use strong for words that must be emphasized, and save b for purely cosmetic bolding.
Warning: Do not wrap whole paragraphs in strong tags as it dilutes the structural importance of the text.
Example: Bold vs. Strong Text
<p><b>Bold for style</b> and <strong>strong for importance</strong>.</p>Italics vs. Emphasized Text
Similar to bolding, there is a visual and structural pair for slanted text. The i tag slants text strictly for styling, while the em tag adds verbal emphasis. A screen reader will read em text with slightly elevated voice stress.
Note: Use the em tag to stress specific words that change the meaning of a sentence.
Warning: Ensure italicized text remains readable on compact smartphone displays.
Example: Italics vs. Emphasized Text
<p><i>Italic for style</i> and <em>emphasized for meaning</em>.</p>Marking and Highlighting Text
The mark tag highlights text with a default bright yellow background, looking exactly like a physical marker highlight. This is incredibly useful for pointing out matching search results on your pages.
Note: The mark element is perfect for highlighting matching keywords on an search results interface.
Warning: Ensure the bright background color keeps the text readable for colorblind users.
Example: Marking and Highlighting Text
<p>Search results for <mark>HTML</mark> tutorials.</p>Subscript and Superscript
Subscript (sub) pushes text slightly downward and makes it smaller, while Superscript (sup) pushes text upward. These are necessary elements for formatting dates, mathematical squares, and chemical equations.
Note: Use superscript for ordinal indicators like the th in 10th or mathematical powers.
Warning: Be careful when nesting sub and sup inside compact paragraphs as they can distort line height spacing.
Example: Subscript and Superscript
<p>H<sub>2</sub>O and 10<sup>th</sup> place.</p>Inserted and Deleted Elements
The del tag indicates that text has been deleted from a document, typically rendering with a strike-through line. The ins tag represents newly added content, which is displayed with an underline by default.
Note: Use del and ins together to create highly professional changelogs and document revision histories.
Warning: Do not confuse the underlined ins tag with a standard hyperlink, as it could confuse your visitors.
Example: Inserted and Deleted Elements
<p><del>Old price: $50</del> <ins>New price: $40</ins></p>The small Element
The small element represents side comments and small print, like copyright notices, legal disclaimers, or licensing terms, and browsers render it in a visually smaller font by default. It carries semantic meaning beyond just visual styling.
Note: Use small for genuinely secondary information like fine print, not just any time you want smaller looking text — that is what CSS font-size is for.
Warning: Overusing small purely for visual styling instead of its intended semantic purpose confuses its meaning for assistive technology.
Example: The small Element
<p>Product details here.</p>
<small>© 2024 Example Company. All rights reserved.</small>- Using physical tags like b and i for everything, ignoring semantic accessibility tags like strong and em.
- Assuming the ins element functions as an actual clickable web link just because it is underlined.
- Nesting formatting tags inside each other incorrectly, which can distort the overall paragraph flow.
- Formatting elements apply both physical look and semantic weight to text.
- The strong and em elements are crucial for web accessibility and screen readers.
- Use del to indicate deleted content, ins for additions, and mark for yellow highlighted text.
Standard HTML formatting tags have universal support on all desktop and mobile browsers.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: