---
id: html-block-and-inline
title: "HTML Block and Inline"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["block-level elements", "inline elements", "display block", "display inline", "div vs span"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "layout"]
raw_sources: ["https://www.w3schools.com/html/html_blocks.asp"]
applied_in: []
github_commit: ""
---

# [[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]
```html
<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]
```html
<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]
```html
<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]
```html
<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):
```html
<div>Block content</div>
```
Inline element (flows within text):
```html
<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).