2nd/10_Wiki/Topic_HTML/HTML_Block_and_Inline.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-block-and-inline	HTML Block and Inline	Frontend	draft	conceptual		block-level elements inline elements display block display inline div vs span		B	0.89	2026-06-23	2026-06-23			html web frontend w3schools layout	https://www.w3schools.com/html/html_blocks.asp

HTML Block and Inline

🎯 한 줄 통찰 (One-line insight)

Every HTML element has a default display value — block-level elements start on a new line and take the full width, while inline elements flow within a line and take only the width they need. [S1]

🧠 핵심 개념 (Core concepts)

• Default display value — every HTML element has a default display value depending on what type of element it is. The two most common display values are block and inline. [S1]
• Block-level element — always starts on a new line; browsers automatically add some space (a margin) before and after it; takes up the full width available. [S1]
• Inline element — does not start on a new line; only takes up as much width as necessary. [S1]
• <div> — a block-level element used as a container for other HTML elements. [S1]
• <span> — an inline container used to mark up a part of a text, or a part of a document. [S1]
• Nesting rule — an inline element cannot contain a block-level element. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Block container pattern — use <div> to group block-level sections that each occupy their own horizontal band. [S1]
• Inline highlight pattern — use <span> to style a fragment of text inside a larger block without breaking the flow of the line. [S1]
• Containment constraint — block elements may contain inline elements, but inline elements may not contain block elements. [S1]

📖 세부 내용 (Details)

Block-level Elements. A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). Two commonly used block elements are <p> and <div>. [S1]

<p>Hello World</p>
<div>Hello World</div>

Here are the block-level elements in HTML: [S1]

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>

Inline Elements. An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a <span> element inside a paragraph. [S1]

<span>Hello World</span>

Here are the inline elements in HTML: [S1]

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>

Note: An inline element cannot contain a block-level element! [S1]

The <div> Element. The <div> element is often used as a container for other HTML elements. [S1]

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

The <span> Element. The <span> element is an inline container used to mark up a part of a text, or a part of a document. [S1]

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>

HTML Tag Reference. [S1]

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

🛠️ 적용 사례 (Applied in summary)

The black-background <div> (London) and the colored-<span> eye-color sentence are the canonical applied examples of block vs. inline behavior. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Block element (full width, new line):

<div>Block content</div>

Inline element (flows within text):

<p>Text with an <span>inline</span> fragment.</p>

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

• Use a block-level element (e.g. <div>, <p>) when the content should occupy its own horizontal band and start on a new line. [S1]
• Use an inline element (e.g. <span>) when the content should sit within the flow of a line and take only the width it needs. [S1]
• Constraint: an inline element cannot contain a block-level element. [S1]

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

No contradictions found in the source. [S1]

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: HTML Tutorial
• 관련 개념: HTML Div, HTML Classes, HTML Id, HTML Tables
• 참조 맥락: Referenced whenever deciding how an element flows in a layout — on its own line versus within a line of text.

📚 출처 (Sources)

• [S1] W3Schools — HTML Block and Inline Elements — https://www.w3schools.com/html/html_blocks.asp

📝 변경 이력 (Change history)

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