Plain text gets the job done, but sometimes you need to add emphasis, highlight important information, or show that something has changed. HTML gives you a toolkit of formatting tags to make your text more expressive.
Let me walk you through all the formatting tags you will actually use. Some of them look the same in the browser but have different meanings — I will point out which ones matter for more than just appearance.
Bold and Italic
The simplest formatting. <b> makes text bold and <i> makes text italic. They are straightforward and work exactly how you expect.
<p>This is <b>bold text</b> and this is <i>italic text</i>.</p>Strong and Emphasis
<strong> and <em> look identical to <b> and <i> in the browser, but they carry extra meaning. <strong> means "this text is important" and <em> means "this text should be emphasized."
Screen readers treat them differently — they change their tone of voice for <strong> and <em>. For that reason, use <strong> and <em> when the formatting has meaning, and <b> and <i> when it is purely visual.
<p>This is <strong>very important</strong>. You should <em>really</em> pay attention.</p>Underline, Mark, and Small
<u> underlines text. Be careful with underlines — people expect underlined text to be a clickable link. Use it sparingly.
<mark> highlights text like a yellow highlighter pen. Perfect for drawing attention to specific words.
<small> makes text smaller. It is often used for side notes, copyright text, or disclaimers.
<p><u>Underlined</u> text, <mark>highlighted</mark> text, and <small>small text</small>.</p>Deleted and Inserted
These are great for showing edits or changes. <del> shows text that has been deleted (strikethrough) and <ins> shows text that has been inserted (underline).
<p>The price was <del>$50</del> <ins>$35</ins>.</p>Subscript and Superscript
<sub> makes text appear half a character below the normal line (subscript) and <sup> puts it half a character above (superscript).
<p>Water is H<sub>2</sub>O. Einstein's theory is E=mc<sup>2</sup>.</p>