HTML · Quick Reference

Lesson 9 — Formatting Tags Cheat Sheet

HTML

In one line: HTML has two categories of text formatting tags: semantic tags and presentational tags. Semantic tags carry meaning — they tell browsers, screen readers, and search engines some...

Key Ideas

1Semantic vs Presentational Text. HTML has two categories of text formatting tags: semantic tags and presentational tags. Semantic tags carry meaning — they tell browsers, screen readers, and search en...

2Bold and Importance — vs . marks text as semantically important — screen readers may change their tone of voice, and search engines give the word extra weight. simply re...

3Italic and Emphasis — vs . adds stressed emphasis that changes the meaning of a sentence. The word choice matters — "I never said that" vs "I never said that" mean different things. &...

4Highlighted Text — . renders text with a yellow highlight by default — like using a highlighter pen. It semantically means "this text is relevant to the current context." Perf...

5Small, Deleted, Inserted — , <del>, <ins>. These three tags represent common real-world editing and fine-print patterns:

Code Examples

<!-- strong = semantically important -->
<p><strong>Warning:</strong> This action cannot be undone.</p>
<p>Always read the <strong>terms and conditions</strong> carefully.</p>

<!-- b = stylistic bold...

<!-- em = stressed emphasis that changes meaning -->
<p><em>Please</em> read the instructions carefully.</p>
<p>I <em>never</em> said that was okay.</p>

<!-- i = stylistic italic, no emphasis change ...

<!-- Highlighting search results -->
<p>Your search for "Python" found: <mark>Python</mark> is a high-level language.</p>

<!-- Highlighting a key term -->
<p>The most important concept is <mark>semantic HTML&...