Section 1 · Chapter 4
HTML Formatting, Colors & Typography
HTML contains special elements for defining text with a special meaning. In this chapter, you will learn inline text formatting tags, HTML color formats (HEX, RGB, HSL), entities, and typography.
Live Code Example
Click Try it Yourself » to test text formatting and HTML color models live in the playground.
Example: Inline Text Formatting & Colors
<p>This is <b>bold text</b> and <strong>important text</strong>.</p>
<p>This is <i>italic text</i> and <em>emphasized text</em>.</p>
<p>This is <mark style="background:#fef08a;color:#854d0e;">highlighted text</mark>.</p>
<p style="color:rgb(79,70,229);">RGB Color Model Text</p>
<p style="color:hsl(142,71%,45%);">HSL Color Model Text</p>
Try it Yourself »
4.1 Inline Text Formatting Elements
HTML contains several elements for defining text with special visual or semantic meaning:
<b>&<strong>— Bold text (<strong>carries semantic importance).<i>&<em>— Italic text (<em>carries semantic emphasis for screen readers).<mark>— Highlighted text background.<small>— Smaller text size (for fine print or copyrights).<del>&<ins>— Deleted (strikethrough) and inserted (underlined) text.<sub>&<sup>— Subscript (e.g. H2O) and Superscript (e.g. x2).
Example: Subscript & Superscript
<p>Chemical Formula: H<sub>2</sub>O</p>
<p>Mathematical Equation: E = mc<sup>2</sup></p>
<p>Discount: <del>$99</del> <ins>$49</ins></p>
Try it Yourself »
4.2 HTML Color Formats (HEX, RGB, RGBA, HSL)
HTML colors are specified using color names, HEX color codes, RGB, RGBA (with opacity alpha), or HSL values.
| Color Format | Syntax Example | Color Preview |
|---|---|---|
| HEX Code | #4F46E5 |
|
| RGB | rgb(16, 185, 129) |
|
| HSL | hsl(45, 93%, 47%) |
4.3 HTML Character Entities
Reserved characters in HTML (like < or >) must be replaced with character entities so the browser does not confuse them with HTML tags.
<— Less than sign (<)>— Greater than sign (>)&— Ampersand (&)©— Copyright symbol (©) — Non-breaking space
4.4 HTML Quotations and Citation Elements
HTML provides several semantic elements for quoting text, attributing sources, defining abbreviations, and providing address and citation data:
| Tag | Description & Purpose | Default Browser Rendering |
|---|---|---|
<blockquote> |
Defines a section that is quoted from another source. Use the cite attribute to indicate the source URL. |
Indented block with left margin |
<q> |
Defines a short inline quotation. Browsers automatically insert quotation marks around the text. | Surrounded with quotation marks ("...") |
<abbr> |
Defines an abbreviation or acronym. Use the title attribute to show the expanded description on hover. |
Dotted underline with tooltip cursor |
<address> |
Defines contact information for the author/owner of a document or article. | Italic text with line breaks |
<cite> |
Defines the title of a creative work (book, movie, song, painting, research paper). | Italicized text |
<bdo> |
Bi-Directional Override: Overrides the current text direction using dir="rtl" or dir="ltr". |
Reverses rendering order |
Example: Blockquote & Short Inline Quotation (<q>)
<p>Here is a quote from WWF's website:</p>
<blockquote cite="https://www.worldwildlife.org">
For 60 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in nearly 100 countries.
</blockquote>
<p>Tim Berners-Lee stated: <q>The Web as I envisaged it, we have not seen it yet.</q></p>
Try it Yourself »
Example: <abbr>, <address>, <cite> & <bdo>
<!-- Abbreviation with tooltip -->
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<!-- Citation for a creative work -->
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<!-- Contact address -->
<address>
Written by John Doe.<br>
Visit us at: AICodeLab.tech<br>
Box 564, Disneyland<br>
USA
</address>
<!-- Bi-Directional Override -->
<bdo dir="rtl">This text will be written from right to left</bdo>
Try it Yourself »
💻 Chapter 4 Hands-On Code Challenge
Build a formatted product offer card applying text formatting, custom inline HSL colors, subscript, quotations, and copyright entities:
- Add a heading with an inline
style="color:hsl(243, 75%, 59%);"color. - Display a price with a strikethrough
<del>$129</del>and an inserted<ins>$79</ins>sale price. - Add an abbreviation
<abbr title="Artificial Intelligence">AI</abbr>or quotation tag. - Add a chemical or mathematical formula using
<sub>or<sup>tags. - Add a footer with the copyright entity
© 2026 AICodeLab.
Chapter 4 Key Takeaways
- Use
<strong>and<em>for semantic importance/emphasis over purely visual<b>and<i>. - Subscript
<sub>and Superscript<sup>format formulas and mathematical equations. - HTML colors can be specified using HEX, RGB, RGBA, or HSL color formats.
- Character entities like
<,>, and©display special characters without syntax conflicts. - Quotations and citation tags like
<blockquote>,<q>,<abbr>,<address>, and<cite>provide semantic richness to external references.