2nd/10_Wiki/Topic_Programming/Topic_HTML/HTML_Computercode.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-computercode	HTML Computercode	Frontend	draft	conceptual		computer code elements kbd element samp element code element var element pre element keyboard input		B	0.90	2026-06-23	2026-06-23			html web frontend w3schools code semantic	https://www.w3schools.com/html/html_computercode_elements.asp

HTML Computercode

🎯 한 줄 통찰 (One-line insight)

HTML provides several semantic elements for marking up user input and computer code — <kbd>, <samp>, <code>, <var>, and <pre> — most of which render in the browser's default monospace font. [S1]

🧠 핵심 개념 (Core concepts)

• <kbd> — defines keyboard input; content is displayed in the browser's default monospace font. [S1]
• <samp> — defines sample output from a computer program; displayed in monospace. [S1]
• <code> — defines a piece of computer code; displayed in monospace, but does NOT preserve extra whitespace and line-breaks. [S1]
• <var> — defines a variable in programming or in a mathematical expression; typically displayed in italic. [S1]
• <pre> — defines preformatted text; wrapping <code> in <pre> preserves whitespace and line-breaks. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Keyboard shortcut markup — <kbd>Ctrl + S</kbd>. [S1]
• Program output markup — <samp>...</samp> (with <br> for line breaks). [S1]
• Inline code — <code>...</code> (whitespace collapses). [S1]
• Preserved code block — <pre><code>...</code></pre> to keep whitespace and line-breaks. [S1]
• Variable markup — <var>b</var>, <var>h</var> for math/programming variables. [S1]

📖 세부 내용 (Details)

HTML contains several elements for defining user input and computer code. [S1]

HTML <kbd> for keyboard input The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font. [S1]

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

HTML <samp> for program output The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font. [S1]

<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

HTML <code> for computer code The HTML <code> element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font. [S1]

<code>
x = 5;
y = 6;
z = x + y;
</code>

Notice that the <code> element does NOT preserve extra whitespace and line-breaks. [S1]

Preserve line-breaks To preserve extra whitespace and line-breaks, you can put the <code> element inside a <pre> element: [S1]

<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

HTML <var> for variables The HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic. [S1]

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

Chapter summary

• <kbd> defines keyboard input
• <samp> defines sample output from a computer program
• <code> defines a piece of computer code
• <var> defines a variable in programming or in a mathematical expression
• <pre> defines preformatted text

[S1]

HTML computer code elements reference

Tag	Description
<code>	Defines programming code
<kbd>	Defines keyboard input
<samp>	Defines computer output
<var>	Defines a variable
<pre>	Defines preformatted text

[S1]

🛠️ 적용 사례 (Applied in summary)

The per-element snippets above (keyboard shortcut, program message, code block, preserved code block, variable in a formula) are the canonical applied examples. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Keyboard input:

<kbd>Ctrl + S</kbd>

Program output:

<samp>File not found.<br>Press F1 to continue</samp>

Whitespace-preserving code block:

<pre><code>
x = 5;
y = 6;
z = x + y;
</code></pre>

Variable:

<var>b</var>

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• <code> alone — monospace, but collapses extra whitespace and line-breaks; use for inline/short code. [S1]
• <code> inside <pre> — preserves whitespace and line-breaks; use for multi-line code blocks. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: HTML Tutorial
• 관련 개념: HTML Semantics, HTML Formatting, HTML Introduction, HTML Style Guide
• 참조 맥락: Referenced when documenting code, keyboard shortcuts, program output, or variables within HTML content.

📚 출처 (Sources)

• [S1] W3Schools — HTML Computercode — https://www.w3schools.com/html/html_computercode_elements.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "HTML Computercode" page (Astra wiki-curation, P-Reinforce v3.1 format).