2nd/10_Wiki/Topic_HTML/HTML_Formatting.md

---
id: html-formatting
title: "HTML Formatting"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["text formatting", "bold", "italic", "strong", "em", "mark", "sub", "sup", "del", "ins", "small"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.90
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "formatting", "text", "semantics"]
raw_sources: ["https://www.w3schools.com/html/html_formatting.asp"]
applied_in: []
github_commit: ""
---

# [[HTML Formatting]]

## 🎯 한 줄 통찰 (One-line insight)
HTML provides several elements for displaying text with special meaning — some purely visual (`<b>`, `<i>`) and some semantic (`<strong>`, `<em>`) that also convey importance or emphasis. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Formatting elements** — HTML contains several elements for defining text with a special meaning. [S1]
- **Ten core elements** — `<b>`, `<strong>`, `<i>`, `<em>`, `<mark>`, `<small>`, `<del>`, `<ins>`, `<sub>`, `<sup>`. [S1]
- **`<b>` vs `<strong>`** — `<b>` defines bold text without extra importance; `<strong>` defines text with strong importance (also rendered bold). [S1]
- **`<i>` vs `<em>`** — `<i>` defines text in an alternate voice/mood (italic); `<em>` defines emphasized text (italic), and a screen reader will pronounce `<em>` words with verbal stress. [S1]
- **Visual vs semantic** — choose `<strong>`/`<em>` when meaning matters (accessibility, search), `<b>`/`<i>` for purely stylistic differences. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Inline semantic markup** — wrap a span of text in a formatting element inside flowing content (e.g. inside a `<p>`). [S1]
- **Edit tracking** — pair `<del>` (deleted) with `<ins>` (inserted) to show changes. [S1]
- **Scientific notation** — use `<sub>` for subscript (e.g. chemical formulas) and `<sup>` for superscript (e.g. footnotes). [S1]

## 📖 세부 내용 (Details)
HTML contains several elements for defining text with a special meaning. The formatting elements are: [S1]
- `<b>` — Bold text
- `<strong>` — Important text
- `<i>` — Italic text
- `<em>` — Emphasized text
- `<mark>` — Marked text
- `<small>` — Smaller text
- `<del>` — Deleted text
- `<ins>` — Inserted text
- `<sub>` — Subscript text
- `<sup>` — Superscript text

**HTML `<b>` and `<strong>` Elements**
The `<b>` element defines bold text, without any extra importance: [S1]
```html
<b>This text is bold</b>
```
The `<strong>` element defines text with strong importance. The content inside is typically displayed in bold: [S1]
```html
<strong>This text is important!</strong>
```

**HTML `<i>` and `<em>` Elements**
The `<i>` element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic: [S1]
```html
<i>This text is italic</i>
```
The `<em>` element defines emphasized text. The content inside is typically displayed in italic. A screen reader will pronounce the words in `<em>` with an emphasis, using verbal stress: [S1]
```html
<em>This text is emphasized</em>
```

**HTML `<small>` Element**
The `<small>` element defines smaller text: [S1]
```html
<small>This is some smaller text.</small>
```

**HTML `<mark>` Element**
The `<mark>` element defines text that should be marked or highlighted: [S1]
```html
<p>Do not forget to buy <mark>milk</mark> today.</p>
```

**HTML `<del>` Element**
The `<del>` element defines text that has been deleted from a document. Browsers usually strike a line through deleted text: [S1]
```html
<p>My favorite color is <del>blue</del> red.</p>
```

**HTML `<ins>` Element**
The `<ins>` element defines a text that has been inserted into a document. Browsers usually underline inserted text: [S1]
```html
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
```

**HTML `<sub>` Element**
The `<sub>` element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. It can be used for chemical formulas, like H2O: [S1]
```html
<p>This is <sub>subscripted</sub> text.</p>
```

**HTML `<sup>` Element**
The `<sup>` element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. It can be used for footnotes, like WWW[1]: [S1]
```html
<p>This is <sup>superscripted</sup> text.</p>
```

**HTML Text Formatting Elements**

| Tag | Description |
|---|---|
| `<b>` | Defines bold text |
| `<em>` | Defines emphasized text |
| `<i>` | Defines a part of text in an alternate voice or mood |
| `<small>` | Defines smaller text |
| `<strong>` | Defines important text |
| `<sub>` | Defines subscripted text |
| `<sup>` | Defines superscripted text |
| `<ins>` | Defines inserted text |
| `<del>` | Defines deleted text |
| `<mark>` | Defines marked/highlighted text |

## 🛠️ 적용 사례 (Applied in summary)
The examples show real inline uses: highlighting a shopping item (`<mark>`), tracking an edit from blue to red (`<del>`/`<ins>`), and notating science/footnotes (`<sub>`/`<sup>`). No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Bold vs important (HTML):
```html
<b>This text is bold</b>
<strong>This text is important!</strong>
```
Italic vs emphasized:
```html
<i>This text is italic</i>
<em>This text is emphasized</em>
```
Marked, deleted/inserted, sub/superscript:
```html
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> and <sup>superscripted</sup> text.</p>
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
| Element | Renders as | Conveys meaning? | Use when |
|---|---|---|---|
| `<b>` | Bold | No (purely stylistic) | You want bold text with no added importance [S1] |
| `<strong>` | Bold | Yes — strong importance | The text is genuinely important (semantics/accessibility) [S1] |
| `<i>` | Italic | No (alternate voice/mood) | A span is in a different voice or mood, not emphasized [S1] |
| `<em>` | Italic | Yes — emphasis (screen reader stresses it) | You want to emphasize text meaningfully [S1] |

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
The source clarifies a frequent confusion: `<b>`/`<i>` and `<strong>`/`<em>` look identical (bold/italic) but differ in meaning. `<strong>` and `<em>` carry semantic weight (importance/emphasis) that assistive technology and search engines act on, while `<b>` and `<i>` are stylistic only. [S1]

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Paragraphs]], [[HTML Styles]], [[HTML Basic]], [[HTML Elements]]
- **참조 맥락:** Referenced whenever marking up inline text meaning — emphasis, importance, edits, or scientific notation.

## 📚 출처 (Sources)
- [S1] W3Schools — HTML Formatting — https://www.w3schools.com/html/html_formatting.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Formatting" page (Astra wiki-curation, P-Reinforce v3.1 format).