2nd/10_Wiki/Topic_HTML/HTML_Formatting.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

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

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]

<b>This text is bold</b>

The <strong> element defines text with strong importance. The content inside is typically displayed in bold: [S1]

<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]

<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]

<em>This text is emphasized</em>

HTML <small> Element The <small> element defines smaller text: [S1]

<small>This is some smaller text.</small>

HTML <mark> Element The <mark> element defines text that should be marked or highlighted: [S1]

<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]

<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]

<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]

<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]

<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):

<b>This text is bold</b>
<strong>This text is important!</strong>

Italic vs emphasized:

<i>This text is italic</i>
<em>This text is emphasized</em>

Marked, deleted/inserted, sub/superscript:

<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).