HTML Text Formatting
Learn how to use HTML text formatting elements to represent importance, emphasis, highlights, edits, smaller text, chemical formulas, mathematical expressions, and other meaningful text.
Introduction
In the previous lesson, you learned about HTML Paragraphs and how they organize regular text into meaningful and readable blocks.
However, displaying every word in exactly the same way is often not enough. Some words may be important, some may require emphasis, some may represent deleted or inserted content, and scientific or mathematical expressions may need special positioning.
HTML provides text-level elements that help communicate these different meanings within sentences and other textual content.
These elements can represent importance, emphasis, highlighting, edits, annotations, subscripts, superscripts, and other types of text.
<p>
This is <strong>important</strong> information.
</p>
<p>
Please <em>read carefully</em>.
</p>
<p>
Learn <mark>HTML</mark> first.
</p>Many HTML text elements do more than change appearance. Elements such as strong and em communicate meaning about the text they contain.
What is Text Formatting?
HTML text formatting refers to using text-level elements to represent the meaning, purpose, or presentation of specific parts of textual content.
For example, important text can use the strong element, emphasized text can use the em element, and highlighted text can use the mark element.
<p>
This is <strong>important</strong>.
</p>
<p>
This word is <em>emphasized</em>.
</p>
<p>
This topic is <mark>highlighted</mark>.
</p>Importance
The strong element identifies text with strong importance.
Emphasis
The em element identifies text with stressed emphasis.
Highlighting
The mark element identifies text that is marked or highlighted for relevance.
Changes
The del and ins elements can represent deleted and inserted content.
Scientific Text
The sub element can represent subscripts in formulas.
Mathematical Text
The sup element can represent superscripts and exponents.
Text formatting uses HTML elements to represent special meaning or presentation within textual content.
Why Do We Need Text Formatting?
Text formatting helps communicate differences between ordinary text and text that has a special purpose or meaning.
Without appropriate text-level elements, important information, emphasized words, content changes, and scientific notation can be harder to communicate clearly.
Without Text Formatting
- Important information is harder to identify.
- Emphasis is not clearly communicated.
- Content changes are difficult to represent.
- Scientific notation may be unclear.
- All text can appear visually similar.
With Text Formatting
- Important information can be identified.
- Emphasis can communicate intended meaning.
- Inserted and deleted content can be represented.
- Scientific and mathematical notation becomes clearer.
- Different types of text can be distinguished.
Readability
Helps readers identify meaningful differences within text.
Attention
Can draw attention to important or relevant information.
Meaning
Semantic elements communicate the purpose of text.
Accessibility
Meaningful markup can provide useful information to assistive technologies.
Specialized Content
Supports formulas, exponents, edits, and other specialized text.
Maintainability
Makes the intended role of text clearer in the HTML source.
Real-World Analogy
Imagine reading a textbook, study guide, or edited document.
Some words may be bold, some may be emphasized, some may be highlighted, and some may show corrections or changes.
Scientific books also use subscripts for chemical formulas and superscripts for mathematical powers.
Real-World Purpose HTML Element
────────────────── ────────────
Important Information <strong>
Alternative Voice <i>
Stressed Emphasis <em>
Marked Information <mark>
Side Comment <small>
Deleted Content <del>
Inserted Content <ins>
Chemical Subscript <sub>
Mathematical Power <sup>Printed Document
- Important warnings may appear bold.
- Certain words may receive emphasis.
- Relevant information may be highlighted.
- Corrections may show deleted and added text.
HTML Document
- strong represents strong importance.
- em represents stressed emphasis.
- mark represents marked or relevant text.
- del and ins represent document changes.
Do not choose an HTML element only because of its default visual appearance. Consider what the text means and why it is different from the surrounding content.
Common Text Formatting Elements
HTML provides several commonly used elements for representing different types of text.
| Element | Purpose | Typical Default Appearance |
|---|---|---|
| <b> | Draw attention without extra importance | Bold |
| <strong> | Strong importance, seriousness, or urgency | Bold |
| <i> | Alternative voice, technical term, or different textual convention | Italic |
| <em> | Stressed emphasis | Italic |
| <u> | Unarticulated annotation | Underlined |
| <mark> | Marked or highlighted relevance | Highlighted |
| <small> | Side comments or small print | Smaller text |
| <del> | Deleted content | Strikethrough |
| <ins> | Inserted content | Underlined |
| <sub> | Subscript text | Lowered text |
| <sup> | Superscript text | Raised text |
<b>Bold</b>
<strong>Important</strong>
<i>Alternative voice</i>
<em>Emphasized</em>
<u>Annotated</u>
<mark>Highlighted</mark>
<small>Small print</small>
<del>Deleted</del>
<ins>Inserted</ins>
H<sub>2</sub>O
x<sup>2</sup>Bold & Strong
b and strong may look similar but communicate different purposes.
Italic & Emphasis
i and em may look similar but represent different meanings.
Annotation & Mark
u and mark identify special types of textual relevance.
Small Text
small represents side comments and small print.
Document Changes
del and ins represent removed and added content.
Scientific Notation
sub and sup support formulas, exponents, and related notation.
Two elements can look similar in a browser while representing different meanings. For example, b and strong are usually bold, while i and em are usually italic.
1. Bold Text (<b>) vs Strong Importance (<strong>)
The b and strong elements are commonly confused because browsers usually display both using bold text.
Their purposes are different. The b element draws attention to text without indicating that the text has extra importance, while strong represents strong importance, seriousness, or urgency.
<b> Element
- Draws attention to text.
- Does not add strong importance.
- Often appears bold by default.
- Useful when text needs visual distinction without semantic importance.
<strong> Element
- Represents strong importance.
- Can communicate seriousness or urgency.
- Often appears bold by default.
- Should be used when the meaning requires importance.
<p>
The product name is <b>PrograMinds Pro</b>.
</p><p>
<strong>Warning:</strong>
Do not close the browser during the update.
</p>| Element | Main Purpose | Default Appearance |
|---|---|---|
| <b> | Draw attention without extra importance | Usually bold |
| <strong> | Represent strong importance or urgency | Usually bold |
If the text is important, serious, or urgent, use strong. If it only needs attention without extra importance, b may be appropriate.
2. Italic Text (<i>) vs Emphasized Text (<em>)
The i and em elements are also commonly confused because browsers usually display both using italic text.
The i element represents text in an alternative voice or mood, or text that is conventionally different from normal prose. The em element represents stressed emphasis.
<i> Element
- Represents an alternative voice or mood.
- Can identify technical terms.
- Can represent certain foreign phrases or taxonomic names.
- Usually appears italic by default.
<em> Element
- Represents stressed emphasis.
- Can affect the intended meaning of a sentence.
- Communicates emphasis semantically.
- Usually appears italic by default.
<p>
The term <i>viewport</i> refers to the
visible area of a webpage.
</p><p>
You <em>must</em> save your work
before closing the application.
</p>| Element | Main Purpose | Default Appearance |
|---|---|---|
| <i> | Alternative voice, mood, or textual convention | Usually italic |
| <em> | Stressed emphasis | Usually italic |
Use em when a word or phrase needs stressed emphasis. Use i when the text belongs to an alternative voice, term, or textual convention.
3. Underlined (<u>) and Highlighted (<mark>) Text
The u and mark elements can both make text visually noticeable, but they represent different purposes.
The u element represents a non-textual annotation applied to text, while mark represents text that is marked or highlighted because of its relevance in a particular context.
<u> Element
- Represents an unarticulated annotation.
- Often appears underlined by default.
- Should not be used simply to decorate text.
- Can be confused visually with hyperlinks.
<mark> Element
- Represents marked or highlighted text.
- Indicates contextual relevance.
- Often appears with a highlighted background.
- Useful for search results and relevant passages.
<p>
The word <u>recieve</u> is misspelled.
</p><p>
Learn <mark>HTML</mark> before CSS.
</p>Search Results
mark can highlight matching words in search results.
Study Material
mark can identify a relevant passage being discussed.
Annotation
u can represent a non-textual annotation when appropriate.
Link Confusion
Underlined text may be mistaken for a clickable hyperlink.
Underlined text is strongly associated with hyperlinks on the web. Use the u element only when its annotation meaning is appropriate.
4. Small Text (<small>)
The small element represents side comments and small print, such as copyright notices, legal information, disclaimers, or attribution.
Browsers normally display text inside the small element using a smaller font size, but its purpose is not simply to make arbitrary text visually smaller.
<p>
Start your free trial today.
</p>
<p>
<small>
Terms and conditions apply.
</small>
</p>Copyright
Copyright and ownership notices.
Legal Information
Short legal statements and conditions.
Disclaimers
Supporting restrictions or qualifications.
Side Comments
Secondary information related to the main content.
<footer>
<small>
Copyright 2026 PrograMinds.
All rights reserved.
</small>
</footer>Use small for side comments and small print. If you only want to reduce the visual font size of ordinary content, use CSS.
5. Deleted (<del>) and Inserted (<ins>) Text
The del and ins elements represent changes made to a document.
The del element identifies content that has been removed, while the ins element identifies content that has been added.
<del> Element
- Represents deleted content.
- Shows that text was removed.
- Usually appears with a line through it.
- Useful for revisions and changed information.
<ins> Element
- Represents inserted content.
- Shows that text was added.
- Usually appears underlined.
- Useful for revisions and updated information.
<p>
The meeting starts at
<del>10:00 AM</del>
<ins>11:00 AM</ins>.
</p><p>
Original Price:
<del>₹1000</del>
</p>
<p>
New Price:
<strong>₹800</strong>
</p>| Element | Meaning | Typical Appearance |
|---|---|---|
| <del> | Content removed from the document | Strikethrough |
| <ins> | Content added to the document | Underline |
Use del and ins when content has actually been removed or inserted. Do not use them only because you want strikethrough or underlined styling.
6. Subscript (<sub>) and Superscript (<sup>)
The sub and sup elements represent text that appears below or above the normal text baseline for typographical reasons.
They are commonly used in chemical formulas, mathematical expressions, ordinal indicators, footnote references, and other specialized notation.
<sub> Element
- Represents subscript text.
- Appears below the normal baseline.
- Commonly used in chemical formulas.
- Useful when the lowered position has meaning.
<sup> Element
- Represents superscript text.
- Appears above the normal baseline.
- Commonly used for exponents.
- Useful for references and certain notation.
<p>
Water: H<sub>2</sub>O
</p>
<p>
Carbon dioxide: CO<sub>2</sub>
</p><p>
x<sup>2</sup> + y<sup>2</sup>
</p>
<p>
10<sup>3</sup> = 1000
</p>| Element | Position | Common Uses |
|---|---|---|
| <sub> | Below the baseline | Chemical formulas and subscripts |
| <sup> | Above the baseline | Exponents, references, and superscripts |
Chemistry
H₂O, CO₂, and other chemical formulas.
Mathematics
Powers such as x² and 10³.
References
Superscript markers can be used in certain reference systems.
Scientific Content
Useful when vertical text position communicates meaning.
Use sub and sup when the lowered or raised position is part of the meaning. Use CSS for purely visual positioning.
Combining Text Formatting
Different text-level elements can appear within the same document and within the same paragraph when their meanings are appropriate.
<h1>HTML Text Formatting</h1>
<p>
This is <strong>important</strong> text.
</p>
<p>
This word is <em>emphasized</em>.
</p>
<p>
Learn <mark>HTML</mark> first.
</p>
<p>
Water is H<sub>2</sub>O.
</p>
<p>
The expression is x<sup>2</sup>.
</p>HTML Text Formatting
<p>
This is
<strong>
very <em>important</em>
</strong>
information.
</p>Formatting elements can be nested when the text genuinely has multiple meanings. Avoid unnecessary nesting only to create a visual effect.
Browser Rendering Flow
When a browser processes text formatting elements, it parses each element as part of the HTML document and creates corresponding nodes in the DOM.
<p>
Read the <strong>instructions</strong>.
</p>
│
▼
Parse HTML Elements
│
▼
Create p and strong Nodes
│
▼
Determine Applied Styles
│
▼
Calculate Text Layout
│
▼
Paint Formatted Text
│
▼
Display PageThe HTML element communicates the role of the text, while browser defaults and CSS determine its final visual appearance.
HTML elements communicate what the text means. CSS can change how that text looks without changing its semantic purpose.
Real-World Applications
Text formatting elements are used throughout websites and web applications wherever specific words or phrases require additional meaning.
Educational Websites
Important notes, emphasized concepts, highlighted terms, formulas, and equations.
E-Commerce
Price changes, important conditions, product terms, and promotional information.
News Websites
Important statements, marked passages, corrections, and updated content.
Scientific Documents
Chemical formulas, scientific notation, and mathematical expressions.
Documentation
Warnings, technical terms, important instructions, and changes.
Legal Content
Small print, disclaimers, inserted clauses, and deleted text.
Search Interfaces
Highlighted matching terms using marked text.
Editing Systems
Inserted and deleted content in document revisions.
Advantages of Text Formatting
Clear Importance
Helps identify information with strong importance.
Meaningful Emphasis
Communicates stressed emphasis within sentences.
Relevant Information
Highlights text that is relevant in a specific context.
Document Changes
Represents inserted and deleted content.
Scientific Support
Supports subscripts and superscripts.
Semantic Structure
Meaningful elements provide more information than visual styling alone.
Flexible Styling
CSS can change appearance without changing semantic meaning.
Maintainability
Makes the purpose of special text clearer in the source code.
- Represent strongly important text.
- Add stressed emphasis.
- Identify alternative voices or technical terms.
- Mark contextually relevant text.
- Represent side comments and small print.
- Show deleted content.
- Show inserted content.
- Create chemical subscripts.
- Create mathematical superscripts.
- Improve the clarity of specialized content.
- Communicate meaning beyond visual appearance.
- Support semantic HTML.
- Allow CSS to control presentation independently.
- Make document changes easier to understand.
- Improve the overall structure of textual content.
Common Beginner Mistakes
Use strong when the text has strong importance. The b element does not communicate the same meaning.
Use em when the text requires stressed emphasis. The i element has a different purpose.
Do not choose an element only because it looks bold, italic, underlined, or smaller.
Formatting too much content makes important information harder to identify.
Underlined text may be confused with hyperlinks and should not be used as general decoration.
Use mark when text is relevant or highlighted in context, not simply to add a background color.
Use small for side comments and small print. Use CSS when ordinary text only needs a smaller visual size.
Use del for content that has been removed, not merely to create a line through text.
Use these elements when the vertical position has meaning, not simply to move text.
Do not combine many formatting elements unless each element represents a genuine meaning.
<!-- ❌ Importance represented only visually -->
<p>
<b>Warning:</b> Do not delete this file.
</p>
<!-- ✅ Strong importance -->
<p>
<strong>Warning:</strong>
Do not delete this file.
</p><!-- ❌ Italic chosen only for emphasis -->
<p>
You <i>must</i> save your work.
</p>
<!-- ✅ Stressed emphasis -->
<p>
You <em>must</em> save your work.
</p><!-- ❌ Too much formatting -->
<p>
<strong>
Everything in this entire paragraph
is extremely important.
</strong>
</p>
<!-- ✅ Highlight only meaningful content -->
<p>
Save your work before continuing.
<strong>
Unsaved changes will be lost.
</strong>
</p><!-- ❌ Using small only to reduce font size -->
<small>Normal article content</small>
<!-- ✅ Use small for small print -->
<small>
Terms and conditions apply.
</small>Poor Formatting
- Elements chosen only by appearance.
- Everything is bold or highlighted.
- Underlining used as decoration.
- Semantic differences are ignored.
- Formatting makes content distracting.
Meaningful Formatting
- Elements chosen according to purpose.
- Only relevant text receives special treatment.
- Semantic elements communicate meaning.
- CSS controls purely visual presentation.
- Formatting improves understanding.
Best Practices
- Choose text elements according to meaning.
- Use strong for strong importance, seriousness, or urgency.
- Use b when text needs attention without extra importance.
- Use em for stressed emphasis.
- Use i for alternative voice, technical terms, or appropriate textual conventions.
- Use mark for text that is relevant or highlighted in context.
- Use u only when an annotation is semantically appropriate.
- Avoid underlining ordinary text because users may expect a hyperlink.
- Use small for side comments and small print.
- Use del for content that has been deleted.
- Use ins for content that has been inserted.
- Use sub when lowered text has meaning.
- Use sup when raised text has meaning.
- Do not choose elements only by default appearance.
- Use CSS for purely visual styling.
- Avoid excessive bold text.
- Avoid excessive italic text.
- Avoid highlighting too much content.
- Keep formatting consistent across similar pages.
- Do not use formatting as a substitute for headings.
- Do not use formatting elements for page layout.
- Nest elements only when multiple meanings genuinely apply.
- Keep the HTML structure readable.
- Review whether each formatted phrase has a clear purpose.
- Prefer semantic meaning before visual decoration.
<article>
<h1>System Update</h1>
<p>
A new version of the application
is now available.
</p>
<p>
<strong>Important:</strong>
Save your work before starting
the update.
</p>
<p>
You <em>must</em> keep the application
open until installation is complete.
</p>
<p>
The previous version
<del>2.4</del>
has been replaced by
<ins>2.5</ins>.
</p>
<p>
<small>
Installation time may vary
depending on your device.
</small>
</p>
</article>A useful test is to imagine the page without custom styling. The HTML elements should still correctly describe the purpose of the text.
Frequently Asked Questions
What is HTML text formatting?
HTML text formatting uses text-level elements to represent special meaning or presentation within textual content.
Which element makes text bold?
Both b and strong are usually displayed in bold by browsers, but they represent different meanings.
What is the difference between b and strong?
The b element draws attention without adding extra importance, while strong represents strong importance, seriousness, or urgency.
Should I always replace b with strong?
No. Use the element that matches the meaning. Use strong for important content and b when attention is needed without additional importance.
Which element makes text italic?
Both i and em are usually displayed in italic by browsers, but they represent different meanings.
What is the difference between i and em?
The i element represents an alternative voice, mood, or textual convention, while em represents stressed emphasis.
Can emphasis change the meaning of a sentence?
Yes. Stressing different words can change how a sentence is understood, which is why the em element has semantic meaning.
What does the mark element do?
The mark element represents text that is marked or highlighted because of its relevance in a particular context.
Does mark always have a yellow background?
Browsers commonly display mark with a highlighted background, but CSS can change its appearance.
What is the u element used for?
The u element represents a non-textual annotation applied to text.
Should I underline normal text?
Usually not. Underlined text is commonly associated with hyperlinks and may confuse users.
What is the small element used for?
The small element represents side comments and small print, such as disclaimers, copyright information, or legal notes.
Should I use small whenever I want smaller text?
No. Use CSS for purely visual font-size changes. Use small when the content is genuinely side information or small print.
What does the del element represent?
The del element represents content that has been deleted from a document.
What does the ins element represent?
The ins element represents content that has been inserted into a document.
Can del and ins be used together?
Yes. They can be used together to show old content that was removed and new content that was added.
Which element creates subscript text?
The sub element creates subscript text.
Which element creates superscript text?
The sup element creates superscript text.
When is subscript commonly used?
Subscript is commonly used in chemical formulas and other notation where lowered text has meaning.
When is superscript commonly used?
Superscript is commonly used for mathematical exponents, references, and other notation where raised text has meaning.
Can formatting elements be nested?
Yes. Text-level elements can be nested when each element represents a genuine meaning that applies to the content.
Can CSS change the appearance of formatting elements?
Yes. CSS can change their visual appearance without changing the semantic meaning of the HTML element.
Are formatting elements only visual?
No. Many text-level elements communicate semantic meaning in addition to having a default visual appearance.
What should I learn after HTML text formatting?
The next lesson is HTML Comments, where you will learn how to add notes and explanations to source code without displaying them on the webpage.
Key Takeaways
- HTML provides several elements for special types of text.
- Text elements should be chosen according to meaning.
- The b element draws attention without adding strong importance.
- The strong element represents strong importance, seriousness, or urgency.
- The i element represents alternative voice, mood, or textual conventions.
- The em element represents stressed emphasis.
- b and strong often look similar but have different meanings.
- i and em often look similar but have different meanings.
- The u element represents an unarticulated annotation.
- Underlined text may be confused with hyperlinks.
- The mark element represents highlighted contextual relevance.
- The small element represents side comments and small print.
- The del element represents deleted content.
- The ins element represents inserted content.
- The sub element creates meaningful subscript text.
- The sup element creates meaningful superscript text.
- Subscript is commonly used in chemical formulas.
- Superscript is commonly used in mathematical expressions.
- Formatting elements can be combined when multiple meanings apply.
- Default appearance does not define the complete meaning of an element.
- CSS can change appearance without changing semantic meaning.
- Do not choose HTML elements only by how they look.
- Avoid excessive formatting.
- Use CSS for purely visual presentation.
- Meaningful text markup creates clearer and more maintainable HTML.
Summary
HTML text formatting elements are used to represent different meanings and purposes within textual content.
The b and strong elements are usually displayed in bold, but b draws attention without extra importance while strong represents strong importance, seriousness, or urgency.
The i and em elements are usually displayed in italic, but i represents an alternative voice or textual convention while em represents stressed emphasis.
The u element can represent an annotation, while the mark element identifies text that is highlighted because of its relevance in a particular context.
The small element represents side comments and small print, while del and ins represent deleted and inserted content.
The sub and sup elements are used when text must appear below or above the normal baseline for meaningful reasons, such as chemical formulas and mathematical expressions.
The most important rule is to choose text elements according to meaning rather than their default visual appearance. CSS should be used when only the presentation needs to change.
In the next lesson, you will learn about HTML Comments and how to write notes inside HTML source code that are not displayed as normal webpage content.