DevAcademy
LearnHTMLText Formatting
BeginnerHTML

Text Formatting

Learn the HTML elements used to emphasize, format, and structure inline text such as bold, italic, and superscript.

Reading Time

14 min

Lesson

Lesson 8 of 27

Formatting Text

HTML includes several inline elements for formatting small pieces of text within a larger block, such as a sentence inside a paragraph.

Common Formatting Elements

<p><strong>Important</strong> text and <em>emphasized</em> text.</p>
<p><b>Bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>
<p>H<sub>2</sub>O and 2<sup>10</sup></p>
<p><small>Fine print text</small></p>
<p><mark>Highlighted</mark> text</p>
<p><del>Deleted</del> and <ins>inserted</ins> text</p>
Output

Formatting Elements

TagMeaning
<strong>Strong importance (rendered bold)
<em>Emphasis (rendered italic)
<b>Bold text with no added importance
<i>Italic text, e.g. a technical term or foreign phrase
<mark>Highlighted / marked text
<small>Side comments or fine print
<del>Text that has been removed
<ins>Text that has been inserted
<sub>Subscript text
<sup>Superscript text

Semantic vs Visual Tags

<strong> and <em> carry semantic meaning — screen readers announce them differently — while <b> and <i> are purely visual with no added meaning. Prefer the semantic versions unless you specifically want styling with no meaning attached.

Line Breaks and Horizontal Rules

<p>First line<br />Second line</p>
<hr />
Output

br vs Paragraphs

<br> forces a line break within the same block of text. It should not be used to create space between paragraphs — use separate <p> elements or CSS margin for that instead.

Best Practice

Choose formatting tags based on meaning, not appearance. If you just want text to look different, use CSS; use <strong>/<em> when the meaning of the text actually changes.

Interview Questions

Quick Quiz

1. Which tag conveys semantic strong importance and is rendered bold by default?

2. Which element inserts a single line break?

3. What is the main difference between <b> and <strong>?