bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

Browse Source 
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
g1nation
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topic_HTML/00_INDEX.md
+122
View File
@@ -0,0 +1,122 @@
---
id: html-tutorial-index
title: "HTML Tutorial"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML Tutorial", "HTML MOC", "Topic_HTML index", "HTML 목차"]
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", "moc", "index"]
raw_sources: ["https://www.w3schools.com/html/"]
applied_in: []
github_commit: ""
---
# [[HTML Tutorial]]
## 🎯 한 줄 통찰 (One-line insight)
Map of Content (MOC) for the W3Schools HTML Tutorial — the root that links every HTML knowledge page in this topic folder. [S1]
## 🧠 핵심 개념 (Core concepts)
- This folder (`Topic_HTML`) wikifies the **W3Schools HTML Tutorial** (left-sidebar tutorial menu), one knowledge page per document, in P-Reinforce v3.1 format. [S1]
- Scope of this pilot: **tutorial + "Learning by examples" pages only**. The large reference tables (HTML Tag List, attribute/event references under `/tags/`) and non-knowledge meta pages (Quiz, Exercises, Certificate, Bootcamp, Syllabus, Study Plan, Interview Prep) are **excluded by design**. [S1]
- Every page roots its Knowledge Graph back to this `[[HTML Tutorial]]` node.
## 📖 세부 내용 (Details)
### Basics
- [[HTML Introduction]]
- [[HTML Editors]]
- [[HTML Basic]]
- [[HTML Elements]]
- [[HTML Attributes]]
- [[HTML Headings]]
- [[HTML Paragraphs]]
- [[HTML Styles]]
- [[HTML Formatting]]
- [[HTML Quotations]]
- [[HTML Comments]]
- [[HTML Colors]]
- [[HTML CSS]]
- [[HTML Links]]
- [[HTML Images]]
- [[HTML Favicon]]
- [[HTML Page Title]]
- [[HTML Tables]]
- [[HTML Lists]]
- [[HTML Block and Inline]]
- [[HTML Div]]
- [[HTML Classes]]
- [[HTML Id]]
- [[HTML Iframes]]
- [[HTML JavaScript]]
- [[HTML File Paths]]
- [[HTML Head]]
- [[HTML Layout]]
- [[HTML Responsive]]
- [[HTML Computercode]]
- [[HTML Semantics]]
- [[HTML Style Guide]]
- [[HTML Entities]]
- [[HTML Symbols]]
- [[HTML Emojis]]
- [[HTML Charsets]]
- [[HTML URL Encode]]
- [[HTML vs XHTML]]
- [[HTML Buttons]]
- [[HTML Accessibility]]
### Forms
- [[HTML Forms]]
- [[HTML Form Attributes]]
- [[HTML Form Elements]]
- [[HTML Input Types]]
- [[HTML Input Attributes]]
- [[HTML Input Form Attributes]]
### Graphics
- [[HTML Canvas]]
- [[HTML SVG]]
### Media
- [[HTML Media]]
- [[HTML Video]]
- [[HTML Audio]]
- [[HTML Plugins]]
- [[HTML YouTube]]
### APIs
- [[HTML Web APIs]]
- [[HTML Geolocation]]
- [[HTML Drag and Drop]]
- [[HTML Web Storage]]
- [[HTML Web Workers]]
- [[HTML SSE]]
## 🛠️ 적용 사례 (Applied in summary)
59 knowledge documents generated in this pilot (1 exemplar + 58 batch-produced), all grounded in the corresponding W3Schools pages.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[10_Wiki]]
- **관련 개념:** [[HTML Introduction]], [[HTML Forms]], [[HTML Semantics]], [[Topic_Programming]]
- **참조 맥락:** Entry point for the W3Schools HTML knowledge set; future Topic_CSS / Topic_JavaScript / Topic_SQL folders will sit alongside this one.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Tutorial — https://www.w3schools.com/html/
## 📝 변경 이력 (Change history)
- 2026-06-23: Created HTML Tutorial MOC and linked all 58 wikified pages (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Accessibility.md
+121
View File
@@ -0,0 +1,121 @@
---
id: html-accessibility
title: "HTML Accessibility"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["web accessibility", "semantic HTML", "a11y", "accessible HTML", "screen reader HTML"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "accessibility", "semantic-html", "a11y"]
raw_sources: ["https://www.w3schools.com/html/html_accessibility.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Accessibility]]
## 🎯 한 줄 통찰 (One-line insight)
Always write HTML with accessibility in mind — use semantic elements for their intended purpose so all users get a good way to navigate and interact with your site. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Accessibility-first mindset** — always write HTML code with accessibility in mind, giving users a good way to navigate and interact with the site. [S1]
- **Semantic HTML** — use the correct HTML element for its purpose; a semantic `<button>` carries suitable default styling, screen-reader recognition, focusability, and keyboard navigation that a `<div>` does not. [S1]
- **Headings convey structure** — use headings (`<h1>`–`<h6>`) for headings only, not to make text big or bold. [S1]
- **Alternative text** — provide descriptive `alt` text for images. [S1]
- **Declare the language** — set the page language with the `lang` attribute on `<html>`. [S1]
- **Meaningful link text** — links should describe where they lead, not say "Click here" or "Read more.." [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Semantic vs non-semantic** — non-semantic elements: `<div>`, `<span>`; semantic elements: `<form>`, `<table>`, `<article>` (and `<button>`). [S1]
- **Right element for the job** — prefer `<button>Report an Error</button>` over `<div>Report an Error</div>`. [S1]
- **Heading hierarchy** — order headings `<h1>`→`<h6>` to express document structure. [S1]
- **`alt` on every meaningful image** — `<img ... alt="descriptive text">`. [S1]
## 📖 세부 내용 (Details)
**Write with accessibility in mind**
Always write HTML code with accessibility in mind. Provide the user a good way to navigate and interact with your site. [S1]
**Use semantic HTML**
Use the correct HTML element for the correct purpose. For example, a button should be a `<button>`, not a `<div>`: [S1]
```html
<button>Report an Error</button>
```
rather than the non-semantic:
```html
<div>Report an Error</div>
```
Benefits of using the semantic `<button>` include suitable default styling, screen reader recognition, focusability, and keyboard navigation support. Non-semantic elements include `<div>` and `<span>`; semantic elements include `<form>`, `<table>`, and `<article>`. [S1]
**Use headings for structure**
Use HTML headings for headings only. Don't use headings to make text **BIG** or **bold**. [S1]
```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```
**Provide alternative text for images**
```html
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
```
**Declare the page language**
```html
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
```
**Use meaningful link text**
Good links use descriptive text explaining where the link leads; bad links use generic text like "Click here" or "Read more..". [S1]
## 🛠️ 적용 사례 (Applied in summary)
The applied guidance is concrete: replace non-semantic `<div>` buttons with `<button>`, keep headings hierarchical and reserved for structure, add descriptive `alt` text, declare `lang`, and write meaningful link text. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Semantic button (HTML):
```html
<button>Report an Error</button>
```
Image with alternative text (HTML):
```html
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
```
Document language declaration (HTML):
```html
<html lang="en">
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note this page does not cover ARIA attributes, `<label for>` form-input labels, `tabindex`, or color-contrast requirements — those topics are not addressed here (Not found in source). [S1]
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.87
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Semantics]], [[HTML Headings]], [[HTML Images]], [[HTML Buttons]]
- **참조 맥락:** Referenced whenever building markup that must be usable by screen readers, keyboards, and assistive technology.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Accessibility — https://www.w3schools.com/html/html_accessibility.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Accessibility" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Attributes.md
+169
View File
@@ -0,0 +1,169 @@
---
id: html-attributes
title: "HTML Attributes"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML attribute", "href", "src", "alt", "style attribute", "lang attribute", "title attribute", "name/value pair"]
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", "attributes"]
raw_sources: ["https://www.w3schools.com/html/html_attributes.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Attributes]]
## 🎯 한 줄 통찰 (One-line insight)
Attributes provide additional information about HTML elements; they are always specified in the start tag as name/value pairs like `name="value"`. [S1]
## 🧠 핵심 개념 (Core concepts)
- **All elements can have attributes** — they give additional information about an element. [S1]
- **Always in the start tag** — attributes are written inside the opening tag. [S1]
- **Name/value pairs** — usually written as `name="value"`. [S1]
- **`href`** — on `<a>`, specifies the URL the link goes to. [S1]
- **`src`** — on `<img>`, specifies the path to the image; can be an absolute URL (external) or a relative URL (internal). [S1]
- **`width` / `height`** — on `<img>`, provide size information in pixels. [S1]
- **`alt`** — on `<img>`, provides alternate text shown if the image cannot be displayed, and used by screen readers. [S1]
- **`style`** — adds styling such as color, font, size to an element. [S1]
- **`lang`** — on `<html>`, declares the language of the page (aids search engines and browsers). [S1]
- **`title`** — defines extra info about an element, shown as a tooltip on mouseover. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Lowercase attribute names** — W3C recommends lowercase; W3Schools demands it. [S1]
- **Quote the values** — W3C recommends quoting; required when the value contains spaces. [S1]
- **Single vs. double quotes** — when a value itself contains double quotes, wrap it in single quotes (and vice-versa). [S1]
- **Relative over absolute `src`** — relative URLs are preferable because they won't break if the domain changes. [S1]
## 📖 세부 내용 (Details)
HTML attributes provide additional information about HTML elements. All HTML elements can have attributes; attributes are always specified in the start tag and usually come in name/value pairs like `name="value"`. [S1]
**The href Attribute**
The `<a>` tag defines a hyperlink. The `href` attribute specifies the URL of the page the link goes to: [S1]
```html
<a href="https://www.w3schools.com">Visit W3Schools</a>
```
**The src Attribute**
The `<img>` tag is used to embed an image. The `src` attribute specifies the path to the image to be displayed: [S1]
```html
<img src="img_girl.jpg">
```
There are two ways to specify the URL in the `src` attribute. An **absolute URL** links to an external image hosted on another website. An **relative URL** links to an image hosted within the website; here the URL does not include the domain name. It is almost always best to use relative URLs — they will not break if you change domain. [S1]
**The width and height Attributes**
The `<img>` tag should also contain the `width` and `height` attributes, which specify the width and height of the image (in pixels): [S1]
```html
<img src="img_girl.jpg" width="500" height="600">
```
**The alt Attribute**
The required `alt` attribute for `<img>` specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, an error in the `src` attribute, or if the user uses a screen reader: [S1]
```html
<img src="img_girl.jpg" alt="Girl with a jacket">
```
If a browser cannot find an image, it will display the value of the `alt` attribute: [S1]
```html
<img src="img_typo.jpg" alt="Girl with a jacket">
```
**The style Attribute**
The `style` attribute is used to add styles to an element, such as color, font, size, and more: [S1]
```html
<p style="color:red;">This is a red paragraph.</p>
```
**The lang Attribute**
You should always include the `lang` attribute inside the `<html>` tag, to declare the language of the Web page. This is meant to assist search engines and browsers: [S1]
```html
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
```
Country codes can also be added to the language code in the `lang` attribute. The first two characters define the language; the last two define the country. For example "en-US" means English in the United States: [S1]
```html
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
```
**The title Attribute**
The `title` attribute defines some extra information about an element. The value of the `title` attribute will be displayed as a tooltip when you mouse over the element: [S1]
```html
<p title="I'm a tooltip">This is a paragraph.</p>
```
**Single or Double Quotes?**
Double quotes around attribute values are the most common, but single quotes can also be used. In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes: [S1]
```html
<p title='John "ShotGun" Nelson'>
```
Or the opposite: [S1]
```html
<p title="John 'ShotGun' Nelson">
```
**Chapter Summary**
- All HTML elements can have **attributes**. [S1]
- The `href` attribute of `<a>` specifies the URL of the page the link goes to. [S1]
- The `src` attribute of `<img>` specifies the path to the image to be displayed. [S1]
- The `width` and `height` attributes of `<img>` provide size information for images. [S1]
- The `alt` attribute of `<img>` provides an alternate text for an image. [S1]
- The `style` attribute is used to add styles to an element, such as color, font, size, and more. [S1]
- The `lang` attribute of the `<html>` tag declares the language of the Web page. [S1]
- The `title` attribute defines some extra information about an element. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The `href`, `src`, `alt`, `width`, `height`, `style`, `lang`, and `title` examples above are the everyday attributes applied to links, images, and text on real pages. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Link with href (HTML):
```html
<a href="https://www.w3schools.com">Visit W3Schools</a>
```
Image with src, alt, width, height:
```html
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
```
Declaring page language:
```html
<html lang="en-US">
```
Inline style and tooltip:
```html
<p style="color:red;" title="I'm a tooltip">This is a red paragraph.</p>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
HTML does not strictly require lowercase attribute names or quoted values, but the W3C recommends both (and quoting is mandatory when a value contains spaces). The source advises preferring relative `src` URLs over absolute ones for resilience to domain changes. [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 Elements]], [[HTML Basic]], [[HTML Styles]], [[HTML Introduction]]
- **참조 맥락:** Referenced whenever configuring an element's behavior, source, language, accessibility text, or inline styling.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Attributes — https://www.w3schools.com/html/html_attributes.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Attributes" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Audio.md
+125
View File
@@ -0,0 +1,125 @@
---
id: html-audio
title: "HTML Audio"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["audio element", "<audio>", "HTML5 audio", "embed audio", "audio controls"]
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", "media", "audio", "html5", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html5_audio.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Audio]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `<audio>` element plays sound natively in a page; multiple `<source>` children let the browser pick the first supported format, with `controls`, `autoplay`, and `muted` attributes governing playback. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<audio>` plays sound** — it embeds an audio player directly in the page. [S1]
- **`controls` adds the UI** — the `controls` attribute adds audio controls such as play, pause, and volume. [S1]
- **Multiple `<source>` for fallback** — list several `<source>` elements with different formats; the browser uses the first recognized one. Text between the tags shows if none is supported. [S1]
- **`autoplay` starts on load**, but Chromium browsers do not allow autoplay in most cases; muted autoplay is always allowed. [S1]
- **Three HTML-standard formats** — MP3, WAV, and Ogg. [S1]
- **Scriptable** — like video, audio has DOM methods, properties, and events for JavaScript control. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Multi-source fallback pattern** — `<audio controls>` wrapping ordered `<source>` elements + fallback text. [S1]
- **Format ordering pattern** — list the preferred format's `<source>` first. [S1]
- **Muted autoplay pattern** — `autoplay muted` to start playback within browser autoplay policies. [S1]
## 📖 세부 내용 (Details)
**The HTML `<audio>` element** — used to play an audio file on a web page. To play an audio file, use the `<audio>` element. The `controls` attribute adds audio controls (play, pause, volume). The `<source>` elements link to different audio files; the browser uses the first recognized format. The text between `<audio>` and `</audio>` is displayed only in browsers that do not support the element: [S1]
```html
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```
**HTML `<audio>` autoplay** — to start an audio file automatically, use the `autoplay` attribute. Note: Chromium browsers do not allow autoplay in most cases; however, muted autoplay is always allowed: [S1]
```html
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```
Add `muted` after `autoplay` to let the file start playing automatically (but muted): [S1]
```html
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```
**HTML audio formats** — three formats are supported: MP3, WAV, and Ogg. Their MIME (media) types: [S1]
| Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
Browser support varies by format (per the source): MP3 and WAV are supported across Edge/IE, Chrome, Firefox, Safari, and Opera; OGG is supported in Edge (from Edge 79), Chrome, Firefox, and Opera, but not Safari. [S1]
**HTML audio — methods, properties, and events** — HTML defines DOM methods, properties, and events for the `<audio>` element, allowing JavaScript to load, play, and pause audio, set duration and volume, and react to events. The source directs to the "HTML Audio/Video DOM Reference" for the full list. [S1]
**HTML audio tags** — [S1]
| Tag | Description |
|---|---|
| `<audio>` | Defines sound content |
| `<source>` | Defines multiple media resources for media elements, such as `<video>` and `<audio>` |
## 🛠️ 적용 사례 (Applied in summary)
The examples above are the canonical applied uses: a controlled player offering Ogg with an MP3 fallback, an autoplay variant, and a muted-autoplay variant that complies with modern browser autoplay policies. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Standard audio player with fallback (HTML):
```html
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```
Muted autoplay (HTML):
```html
<audio controls autoplay muted>
<source src="horse.mp3" type="audio/mpeg">
</audio>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. As with video, the notable constraint is browser autoplay policy: `autoplay` alone is blocked by Chromium browsers in most cases, so `muted` is required for reliable autoplay. [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 Video]], [[HTML Media]], [[HTML Plug-ins]], [[HTML5]]
- **참조 맥락:** Referenced when embedding playable audio with cross-browser format fallbacks.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Audio — https://www.w3schools.com/html/html5_audio.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Audio" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Basic.md
+131
View File
@@ -0,0 +1,131 @@
---
id: html-basic
title: "HTML Basic"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML basics", "basic HTML examples", "HTML fundamentals", "HTML starter", "HTML basic tags"]
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", "basics", "tags"]
raw_sources: ["https://www.w3schools.com/html/html_basic.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Basic]]
## 🎯 한 줄 통찰 (One-line insight)
A handful of basic HTML examples — document structure, headings, paragraphs, links, and images — are enough to build a first web page; don't worry if the tags aren't fully understood yet. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Every HTML document declares its type** — must start with `<!DOCTYPE html>`. [S1]
- **The HTML document itself** — begins with `<html>` and ends with `</html>`. [S1]
- **Visible content lives in the body** — the visible part of the document is between `<body>` and `</body>`. [S1]
- **Headings** — defined with `<h1>` through `<h6>`, where `<h1>` is the most important and `<h6>` the least. [S1]
- **Paragraphs** — defined with the `<p>` tag. [S1]
- **Links** — defined with `<a>`; the destination is specified in the `href` attribute. [S1]
- **Images** — defined with `<img>`, using `src` (path), `alt` (alternate text), `width`, and `height` attributes. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Doctype + html + body skeleton** — the minimal scaffold every page reuses. [S1]
- **Heading hierarchy** — `<h1>`…`<h6>` express importance, not just size. [S1]
- **Attribute-carrying elements** — links carry `href`; images carry `src`/`alt`/`width`/`height`. [S1]
- **Inspect the source** — view a page's HTML with Ctrl+U or right-click → View Page Source / Inspect. [S1]
## 📖 세부 내용 (Details)
**HTML Documents**
All HTML documents must start with a document type declaration: `<!DOCTYPE html>`. The HTML document itself begins with `<html>` and ends with `</html>`. The visible part of the HTML document is between `<body>` and `</body>`. [S1]
```html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
**HTML Headings**
HTML headings are defined with the `<h1>` to `<h6>` tags. `<h1>` defines the most important heading; `<h6>` defines the least important heading. [S1]
```html
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
```
**HTML Paragraphs**
HTML paragraphs are defined with the `<p>` tag. [S1]
```html
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
```
**HTML Links**
HTML links are defined with the `<a>` tag. The link's destination is specified in the `href` attribute. [S1]
```html
<a href="https://www.w3schools.com">This is a link</a>
```
**HTML Images**
HTML images are defined with the `<img>` tag. The source file (`src`), alternative text (`alt`), `width`, and `height` are provided as attributes. [S1]
```html
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
```
**How to View HTML Source**
You can view the HTML source of a page. By pressing Ctrl + U in a browser, or right-clicking on the page and selecting "View Page Source," you can see the HTML. You can also right-click an element and choose "Inspect" to see what elements are made up of. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The document skeleton and the heading/paragraph/link/image snippets above are the basic building blocks reused on virtually every page. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Basic HTML document (HTML):
```html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
A link:
```html
<a href="https://www.w3schools.com">This is a link</a>
```
An image:
```html
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Introduction]], [[HTML Elements]], [[HTML Headings]], [[HTML Paragraphs]], [[HTML Attributes]]
- **참조 맥락:** The quick-start overview referenced when introducing the core tags before studying each in depth.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Basic — https://www.w3schools.com/html/html_basic.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Basic" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Block_and_Inline.md
+119
View File
@@ -0,0 +1,119 @@
---
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).
10_Wiki/Topic_HTML/HTML_Buttons.md
+137
View File
@@ -0,0 +1,137 @@
---
id: html-buttons
title: "HTML Buttons"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["button element", "HTML button", "button type", "submit button", "reset button"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "buttons", "forms"]
raw_sources: ["https://www.w3schools.com/html/html_buttons.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Buttons]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `<button>` element defines a clickable button whose behavior is set by its `type` attribute (`button`, `submit`, or `reset`); you should always specify `type` because the in-form default differs and browsers behave inconsistently when it is omitted. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<button>` element** — defines a clickable button; by itself it does nothing until you add an action. [S1]
- **`type` attribute** — defines what the button does when clicked; three types: `button`, `submit`, `reset`. [S1]
- **Always set `type`** — inside a form the default type is `submit`, and browsers may behave differently if the type is omitted. [S1]
- **`disabled` attribute** — makes a button unclickable; disabled buttons usually appear faded. [S1]
- **Add behavior** — actions can be attached, e.g. with `onclick`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Type-driven behavior** — `type="button"` (does nothing by default), `type="submit"` (submits a form), `type="reset"` (resets all form fields). [S1]
- **Form button pair** — a submit button plus a reset button inside a `<form>`. [S1]
- **Inline action** — `<button onclick="...">`. [S1]
- **Styling via class** — buttons are commonly styled with CSS through a class. [S1]
## 📖 세부 내용 (Details)
**The button element**
The HTML `<button>` element defines a clickable button. By itself, the button does nothing until you add an action to it. [S1]
```html
<button>Click Me</button>
```
**Button types**
The `type` attribute defines what a button does when clicked. There are three button types: [S1]
- `type="button"` — a normal clickable button (does nothing by default)
- `type="submit"` — submits a form
- `type="reset"` — resets all form fields
```html
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
```
Example within a form: [S1]
```html
<form action="/action_page.php">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
```
**Note:** You should always specify the type attribute. Inside a form, the default type is submit, and browsers may behave differently if the type is omitted. [S1]
**Styling buttons**
Buttons are often styled with CSS: [S1]
```html
<button class="mytestbtn">Green Button</button>
```
**Disabled buttons**
Use the `disabled` attribute to make a button unclickable: [S1]
```html
<button disabled>Disabled Button</button>
```
**Tip:** Disabled buttons cannot be clicked and usually appear faded. [S1]
**Button with JavaScript**
```html
<button onclick="alert('Hello!')">Click Me</button>
```
## 🛠️ 적용 사례 (Applied in summary)
The applied cases are a plain clickable button, the three typed buttons, a submit/reset pair inside a form, a CSS-styled button, a disabled button, and a button that runs JavaScript via `onclick`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Typed buttons (HTML):
```html
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
```
Button running JavaScript (HTML):
```html
<button onclick="alert('Hello!')">Click Me</button>
```
Disabled button (HTML):
```html
<button disabled>Disabled Button</button>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The page presents three button types; choosing the right `type` is essential because the in-form default is `submit`: [S1]
| `type` value | Behavior when clicked | Use when |
|---|---|---|
| `button` | A normal clickable button; does nothing by default | You want a button with custom (e.g. JavaScript) behavior only |
| `submit` | Submits the form (the in-form default) | The button should send the form |
| `reset` | Resets all form fields | The button should clear the form |
Always specify the `type` to avoid inconsistent browser behavior when it is omitted. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Important caveat: omitting `type` inside a form defaults to `submit` and can cause divergent browser behavior, so it should always be set explicitly. [S1]
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Forms]], [[HTML Form Elements]], [[HTML Input Types]], [[HTML Accessibility]]
- **참조 맥락:** Referenced whenever adding clickable controls or form submit/reset actions to a page.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Buttons — https://www.w3schools.com/html/html_buttons.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Buttons" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_CSS.md
+232
View File
@@ -0,0 +1,232 @@
---
id: html-css
title: "HTML CSS"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS in HTML", "inline CSS", "internal CSS", "external CSS", "Cascading Style Sheets", "HTML styles"]
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", "css", "styling"]
raw_sources: ["https://www.w3schools.com/html/html_css.asp"]
applied_in: []
github_commit: ""
---
# [[HTML CSS]]
## 🎯 한 줄 통찰 (One-line insight)
CSS (Cascading Style Sheets) formats the layout of a web page and can be applied to HTML in three ways — inline (`style` attribute), internal (`<style>` in `<head>`), and external (linked `.css` file). [S1]
## 🧠 핵심 개념 (Core concepts)
- **What CSS is** — Cascading Style Sheets are used to format the layout of a webpage: color, font, text size, spacing, positioning/layout, background images/colors, responsive displays for different devices and screen sizes, and much more. [S1]
- **Cascading** — a style applied to a parent element also applies to all children elements within the parent. [S1]
- **Three ways to add CSS** — inline (the `style` attribute on elements), internal (a `<style>` element in `<head>`), and external (a `<link>` to an external `.css` file). [S1]
- **Common properties** — `color` (text color), `font-family` (font), `font-size` (text size), `border`, `padding` (internal spacing), `margin` (external spacing). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Inline pattern** — `<h1 style="color:blue;">…</h1>` styles one element directly. [S1]
- **Internal pattern** — `<style> selector { property: value; } </style>` inside `<head>` styles the whole document. [S1]
- **External pattern** — `<link rel="stylesheet" href="styles.css">` references a shared stylesheet. [S1]
- **Box-model pattern** — `border` + `padding` + `margin` control an element's framing and spacing. [S1]
- **Reference-path pattern** — external `href` can be a full URL, a root-relative path, or a same-folder filename. [S1]
## 📖 세부 내용 (Details)
**What is CSS?**
Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more. The cascading concept means a style applied to a parent element will also apply to all children elements within the parent. [S1]
**Three ways to add CSS** [S1]
- **Inline** — using the `style` attribute on HTML elements
- **Internal** — using a `<style>` element in the `<head>` section
- **External** — linking to external CSS files via `<link>`
**Inline CSS** [S1]
```html
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
```
**Internal CSS** [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
**External CSS** — the HTML file links to an external stylesheet: [S1]
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
The external `styles.css` file: [S1]
```css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
```
**CSS color, font-family, and font-size** [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
**Border, Padding, Margin** [S1]
```css
p {
border: 2px solid powderblue;
}
```
```css
p {
border: 2px solid powderblue;
padding: 30px;
}
```
```css
p {
border: 2px solid powderblue;
margin: 50px;
}
```
**Linking to external CSS** — the `href` can point to a full URL, a root-relative path, or a same-folder filename: [S1]
```html
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
```
```html
<link rel="stylesheet" href="/html/styles.css">
```
```html
<link rel="stylesheet" href="styles.css">
```
**Chapter summary** [S1]
- Use the `style` attribute for inline styling
- Use the `<style>` element for internal CSS
- Use the `<link>` element for external CSS files
- Use the `<head>` to store style and link elements
- The CSS `color` property controls text colors
- The CSS `font-family` property defines fonts
- The CSS `font-size` property sets text sizes
- The CSS `border` property creates borders
- The CSS `padding` adds internal spacing
- The CSS `margin` adds external spacing
**Related HTML tags**
| Tag | Description |
|---|---|
| `<style>` | Defines style information for a document |
| `<link>` | Links a document to an external resource |
[S1]
## 🛠️ 적용 사례 (Applied in summary)
The inline, internal, and external CSS examples above are the canonical applied examples from the source. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Inline (HTML):
```html
<h1 style="color:blue;">A Blue Heading</h1>
```
Internal:
```html
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
```
External link:
```html
<link rel="stylesheet" href="styles.css">
```
Box model:
```css
p {
border: 2px solid powderblue;
padding: 30px;
margin: 50px;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The source presents three insertion methods; choosing among them: [S1]
| Method | How | Scope |
|---|---|---|
| Inline | `style` attribute on an element | A single element only |
| Internal | `<style>` element in `<head>` | The whole document |
| External | `<link rel="stylesheet">` to a `.css` file | Shareable across many pages |
## ⚖️ 모순 및 업데이트 (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 Colors]], [[HTML Styles]], [[HTML Attributes]], [[HTML Introduction]]
- **참조 맥락:** Referenced whenever applying styling (color, font, spacing, layout) to HTML, and when choosing inline vs internal vs external CSS.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML CSS — https://www.w3schools.com/html/html_css.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML CSS" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Canvas.md
+189
View File
@@ -0,0 +1,189 @@
---
id: html-canvas
title: "HTML Canvas"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["canvas element", "HTML5 Canvas", "<canvas>", "2d context", "getContext"]
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", "canvas", "graphics", "html5", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html5_canvas.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Canvas]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `<canvas>` element is an empty container for graphics; all actual drawing — lines, shapes, text, gradients, images — is done at runtime with JavaScript via a 2D drawing context. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<canvas>` is just a container** — it has no drawing ability of its own; JavaScript draws into it. [S1]
- **It can draw** paths, boxes, circles, text, and images, and is supported by all major browsers. [S1]
- **Always set `id`, `width`, and `height`** — the `id` lets scripts reference it; `width`/`height` set its drawable size. A border style makes the otherwise invisible canvas visible. [S1]
- **The 2D context is the drawing surface** — obtain it with `canvas.getContext("2d")`; all drawing methods (`moveTo`, `lineTo`, `arc`, `fillText`, etc.) are called on that context object. [S1]
- **Gradients** — created with `createLinearGradient(...)` or `createRadialGradient(...)`, then color stops are added and the gradient is assigned to `fillStyle`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Setup pattern** — `getElementById` → `getContext("2d")` → draw. [S1]
- **Path/line pattern** — `moveTo(x,y)` then `lineTo(x,y)` then `stroke()`. [S1]
- **Circle pattern** — `beginPath()` → `arc(x,y,r,0,2*Math.PI)` → `stroke()`. [S1]
- **Text pattern** — set `font`, then `fillText(...)` (filled) or `strokeText(...)` (outline). [S1]
- **Gradient fill pattern** — create gradient → `addColorStop()` → assign to `fillStyle` → `fillRect(...)`. [S1]
- **Image pattern** — `drawImage(img, x, y)` paints an existing image element. [S1]
## 📖 세부 내용 (Details)
**What is HTML Canvas?** The HTML `<canvas>` element is used to draw graphics, on the fly, via JavaScript. The `<canvas>` element is only a container for graphics — you must use JavaScript to actually draw. Canvas can draw paths, boxes, circles, text, and add images, and it works in all major browsers. [S1]
**The Canvas element** — a canvas is a rectangular area on an HTML page, specified with the `<canvas>` element. Always specify an `id` (to refer to it in a script) and a `width` and `height` (to define its size). To add a border, use the `style` attribute: [S1]
```html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
```
**Draw a Line** — [S1]
```html
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
```
**Draw a Circle** — [S1]
```html
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
```
**Draw Text** — set the font and use `fillText(text, x, y)`: [S1]
```html
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
```
**Stroke Text** — set the font and use `strokeText(text, x, y)` for outlined text: [S1]
```html
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
```
**Draw Linear Gradient** — gradients can fill rectangles, circles, lines, text, etc. Create a linear gradient, add color stops, set it as the fill style, and fill a rectangle: [S1]
```html
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
```
**Draw Radial Gradient** — [S1]
```html
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
```
**Draw Image** — use `drawImage(image, x, y)` to paint an existing image element onto the canvas: [S1]
```html
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
```
## 🛠️ 적용 사례 (Applied in summary)
The examples above are the canonical applied uses: drawing a diagonal line, a circle, filled and outlined text, linear and radial gradient-filled rectangles, and painting an existing image into the canvas. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Canvas setup + draw a line (HTML + JavaScript):
```html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
```
Circle (JavaScript):
```javascript
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
```
Linear gradient fill (JavaScript):
```javascript
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The source frames Canvas in contrast to SVG: SVG describes 2D graphics in XML, while Canvas draws 2D graphics on the fly with JavaScript. In Canvas, once a graphic is drawn it is "forgotten" by the browser (immediate-mode, pixel/bitmap output), whereas in SVG each drawn shape is remembered as an object and re-rendered on change (retained-mode). Canvas is resolution dependent, has no built-in event handlers, has poor text rendering, but can save the result as a .png/.jpg image and is well suited to graphic-intensive games. See [[HTML SVG]] for the complementary trade-offs. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note the immediate-mode nature: Canvas does not retain a scene graph, so anything that must be interactive or re-rendered on data change has to be redrawn manually by your script. [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 SVG]], [[HTML Graphics]], [[HTML Media]], [[HTML5]]
- **참조 맥락:** Referenced when rendering dynamic, script-driven, pixel-based graphics such as charts, visualizations, or games.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Canvas — https://www.w3schools.com/html/html5_canvas.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Canvas" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Charsets.md
+130
View File
@@ -0,0 +1,130 @@
---
id: html-charsets
title: "HTML Charsets"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML character sets", "HTML encoding", "character encoding", "UTF-8", "ASCII", "ANSI", "ISO-8859-1", "charset meta"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "charset", "encoding", "utf-8", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_charset.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Charsets]]
## 🎯 한 줄 통찰 (One-line insight)
To display an HTML page correctly a browser must know which **character set (encoding)** the page uses; modern HTML declares it with `<meta charset="UTF-8">`, and UTF-8 — covering nearly all the world's characters — is the recommended and default choice. [S1]
## 🧠 핵심 개념 (Core concepts)
- **The charset attribute** — proper display requires the browser to know the page's character encoding, declared via `<meta charset="...">`. [S1]
- **UTF-8 is recommended** — it covers almost all of the characters and symbols in the world, and is the default character set in HTML5. [S1]
- **Historical progression of encodings** — ASCII → ANSI (Windows-1252) → ISO-8859-1 (HTML 4 default) → UTF-8 (modern default). Each newer set is largely backward-compatible with ASCII at code points 0–127. [S1]
- **Shared low range** — across ASCII, ANSI, ISO-8859-1, and UTF-8, code points 0–127 are identical. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **HTML5 charset declaration** — `<meta charset="UTF-8">`. [S1]
- **HTML4 charset declaration** — `<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">`. [S1]
- **Backward-compatibility pattern** — newer encodings keep ASCII (0–127) intact and extend the upper range. [S1]
## 📖 세부 내용 (Details)
**The HTML charset Attribute**
To display an HTML page correctly, a web browser must know the character set used in the page. Developers are encouraged to use UTF-8, which covers almost all of the characters and symbols in the world. The standard declaration is: [S1]
```html
<meta charset="UTF-8">
```
**The ASCII Character Set**
ASCII was the first character encoding standard for the web. It defined 128 different Latin characters, including English letters (a–z, A–Z), numbers (0–9), and special characters such as `! $ + - ( ) @ < > . # ?`. [S1]
**The ANSI Character Set (Windows-1252)**
ANSI (Windows-1252) was the first Windows character set. Its layout: [S1]
- Characters 0–127 match ASCII.
- Characters 128–159 contain special characters.
- Characters 160–255 align with UTF-8.
HTML5 declaration: [S1]
```html
<meta charset="Windows-1252">
```
**The ISO-8859-1 Character Set**
ISO-8859-1 was the default character set for HTML 4, supporting 256 characters: [S1]
- Characters 0–127 are identical to ASCII.
- Characters 128–159 are unused.
- Characters 160–255 match ANSI and UTF-8.
HTML 4 syntax: [S1]
```html
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
```
HTML 5 syntax: [S1]
```html
<meta charset="ISO-8859-1">
```
**The UTF-8 Character Set**
UTF-8 character coverage: [S1]
- Values 0–127 match ASCII.
- Characters 128–159 are unused.
- Characters 160–255 align with ANSI / ISO-8859-1.
- From value 256 onward, UTF-8 extends to over 10,000 additional characters.
**Encoding comparison summary** [S1]
| Character set | Range 0–127 | Range 128–159 | Range 160–255 | Beyond 255 |
|---|---|---|---|---|
| ASCII | Latin characters (128 total) | — | — | — |
| ANSI (Windows-1252) | Same as ASCII | Special characters | Same as UTF-8 | — |
| ISO-8859-1 | Same as ASCII | Unused | Same as ANSI/UTF-8 | — |
| UTF-8 | Same as ASCII | Unused | Same as ANSI/8859-1 | 10,000+ characters from 256 onward |
The page also references many UTF-8 character-set categories, including Basic Latin, Latin Extended A–E, IPA Extensions, Spacing Modifiers, Diacritical Marks, General Punctuation, Super/Subscript, and Braille. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The canonical applied case is the single `<meta charset="UTF-8">` declaration that should appear in the head of essentially every modern HTML page. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Declare UTF-8 in HTML5 (recommended):
```html
<meta charset="UTF-8">
```
Legacy HTML4 ISO-8859-1 declaration:
```html
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **ASCII** — only 128 Latin characters; the original web encoding, insufficient for international text. [S1]
- **ANSI (Windows-1252)** — the first Windows set; adds special characters in 128–159, but Windows-specific. [S1]
- **ISO-8859-1** — the HTML 4 default; 256 characters, still limited for global content. [S1]
- **UTF-8** — recommended choice and the HTML5 default; covers almost all of the world's characters and is backward-compatible with ASCII at 0–127. Use UTF-8 unless a legacy constraint forces otherwise. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. The historical default shifted from ISO-8859-1 (HTML 4) to UTF-8 (HTML5), reflecting the move toward universal Unicode support. [S1]
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Emojis]], [[HTML Symbols]], [[HTML URL Encode]], [[HTML Head]]
- **참조 맥락:** Referenced whenever defining how a page's text is encoded, especially for international characters and emojis.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Charsets — https://www.w3schools.com/html/html_charset.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Charsets" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Classes.md
+205
View File
@@ -0,0 +1,205 @@
---
id: html-classes
title: "HTML Classes"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["class attribute", "HTML class", "CSS class selector", "getElementsByClassName", "multiple classes"]
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", "css"]
raw_sources: ["https://www.w3schools.com/html/html_classes.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Classes]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `class` attribute assigns one or more class names to elements so CSS and JavaScript can select and act on a whole group of elements at once. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Purpose** — the `class` attribute is often used to point to a class name in a style sheet; it can also be used by JavaScript to access and manipulate elements with the specific class name. [S1]
- **CSS selector** — in a stylesheet a class is referenced with a period (e.g. `.city`). [S1]
- **Shared by many elements** — multiple HTML elements can share the same class. [S1]
- **Multiple classes per element** — separate class names with a space (e.g. `class="city main"`); the element is styled according to all classes specified. [S1]
- **Works across element types** — different HTML elements can point to the same class name. [S1]
- **JavaScript access** — `getElementsByClassName()` returns all elements with a given class name. [S1]
- **Usable anywhere** — the `class` attribute can be used on any HTML element, and the class name is case sensitive. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Shared-style pattern** — give several elements the same class so one CSS rule styles them all. [S1]
- **Multi-class pattern** — combine general and specific classes on one element (`class="city main"`). [S1]
- **Inline-styling pattern** — apply a class to a `<span>` to style a fragment of text. [S1]
- **JS-grouping pattern** — collect and manipulate all elements of a class with `getElementsByClassName()`. [S1]
## 📖 세부 내용 (Details)
**The class Attribute.** The `class` attribute is often used to point to a class name in a style sheet. It can also be used by JavaScript to access and manipulate elements with the specific class name. [S1]
Basic class with CSS styling — three headings share the `city` class: [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
```
**Using the class attribute on `<div>` elements.** [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
```
**The class attribute on inline (`<span>`) elements.** [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
```
**Multiple Classes.** HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. `<div class="city main">`. The element will be styled according to all the classes specified. [S1]
```html
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
```
**Different Elements Can Share Same Class.** Different HTML elements can point to the same class name. [S1]
```html
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
```
**Using the class Attribute in JavaScript.** JavaScript can access elements with a specific class name by using the `getElementsByClassName()` method. [S1]
```javascript
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
```
> **Tip:** The `class` attribute can be used on **any** HTML element. [S1]
> **Note:** The class name is case sensitive! [S1]
**Chapter Summary.** [S1]
- The HTML `class` attribute specifies one or more class names for an element.
- Classes are used by CSS and JavaScript to select and access specific elements.
- The `class` attribute can be used on any HTML element.
- The class name is case sensitive.
- Different HTML elements can point to the same class name.
- JavaScript can access elements with a specific class name with the `getElementsByClassName()` method.
## 🛠️ 적용 사례 (Applied in summary)
The shared `city` class (across headings, divs, and paragraphs), the multi-class `city main` heading, and the `getElementsByClassName("city")` hide-function are the canonical applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Define and apply a class (HTML + CSS):
```html
<style>
.city { color: white; }
</style>
<h2 class="city">London</h2>
```
Multiple classes (HTML):
```html
<div class="city main">...</div>
```
Select by class in JavaScript:
```javascript
var x = document.getElementsByClassName("city");
```
## ⚖️ 모순 및 업데이트 (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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Id]], [[HTML Div]], [[HTML Block and Inline]], [[HTML JavaScript]]
- **참조 맥락:** Referenced whenever a group of elements must share styling or be selected together by CSS or JavaScript.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Classes — https://www.w3schools.com/html/html_classes.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Classes" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Colors.md
+138
View File
@@ -0,0 +1,138 @@
---
id: html-colors
title: "HTML Colors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML color names", "HTML background color", "HTML text color", "RGB HEX HSL", "RGBA HSLA", "CSS color values"]
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", "colors", "css"]
raw_sources: ["https://www.w3schools.com/html/html_colors.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Colors]]
## 🎯 한 줄 통찰 (One-line insight)
In HTML, colors can be specified by one of the 140 standard color names or by RGB, HEX, HSL, RGBA, or HSLA values, and applied to backgrounds, text, and borders via the `style` attribute. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Color names** — a color can be specified using a color name; HTML supports 140 standard color names (e.g. Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray). [S1]
- **Background color** — set the background color for HTML elements with `background-color`. [S1]
- **Text color** — set the color of text with `color`. [S1]
- **Border color** — set the color of borders with the `border` shorthand. [S1]
- **Color values** — colors can also be specified using RGB, HEX, HSL, RGBA, and HSLA values. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Named-color pattern** — `style="color:Tomato;"` / `style="background-color:DodgerBlue;"`. [S1]
- **Bordered-element pattern** — `style="border:2px solid Tomato;"`. [S1]
- **Numeric-value pattern** — interchange named colors with `rgb()`, `#hex`, `hsl()`, `rgba()`, or `hsla()` to get the same hue. [S1]
- **Alpha-channel pattern** — `rgba()` and `hsla()` add a fourth opacity value (e.g. `0.5`). [S1]
## 📖 세부 내용 (Details)
**Color Names**
In HTML, a color can be specified by using a color name. The page displays examples such as Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, and LightGray. HTML supports 140 standard color names. [S1]
**Background Color**
You can set the background color for HTML elements. [S1]
```html
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
```
**Text Color**
You can set the color of text. [S1]
```html
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
```
**Border Color**
You can set the color of borders. [S1]
```html
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
```
**Color Values**
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. The following all represent the same Tomato-like hue: [S1]
| Value type | Example |
|---|---|
| RGB | `rgb(255, 99, 71)` |
| HEX | `#ff6347` |
| HSL | `hsl(9, 100%, 64%)` |
| RGBA | `rgba(255, 99, 71, 0.5)` |
| HSLA | `hsla(9, 100%, 64%, 0.5)` |
```html
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
```
## 🛠️ 적용 사례 (Applied in summary)
The background-color, text-color, and border-color examples above are the canonical applied examples from the source. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Named color on background and text (HTML):
```html
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="color:Tomato;">Lorem ipsum...</p>
```
Colored border:
```html
<h1 style="border:2px solid Violet;">Hello World</h1>
```
Equivalent numeric color values:
```html
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The source presents five interchangeable ways to express the same color, letting authors pick the form that fits their need: [S1]
| Form | When useful |
|---|---|
| Color name | Quick, readable; limited to 140 standard names |
| RGB `rgb(r,g,b)` | Explicit red/green/blue channels (0–255) |
| HEX `#rrggbb` | Compact hexadecimal form of RGB |
| HSL `hsl(h,s%,l%)` | Hue/saturation/lightness, intuitive for tweaking |
| RGBA / HSLA | Same as RGB/HSL plus an alpha (opacity) channel |
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML CSS]], [[HTML Styles]], [[HTML Attributes]], [[HTML Introduction]]
- **참조 맥락:** Referenced whenever specifying background, text, or border colors in HTML/CSS.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Colors — https://www.w3schools.com/html/html_colors.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Comments.md
+124
View File
@@ -0,0 +1,124 @@
---
id: html-comments
title: "HTML Comments"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML comment syntax", "comment tag", "comment out HTML", "hide HTML content", "HTML annotations"]
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", "comments", "debugging"]
raw_sources: ["https://www.w3schools.com/html/html_comments.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Comments]]
## 🎯 한 줄 통찰 (One-line insight)
HTML comments are written between `<!--` and `-->`, are not displayed in the browser, and help document source code, hide content temporarily, and debug pages. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Comments are invisible** — HTML comments are not displayed in the browser, but they can help document your HTML source code. [S1]
- **Comment syntax** — written as `<!-- Write your comments here -->`. The exclamation point (`!`) appears in the opening tag but not the closing tag. [S1]
- **Documentation use** — comments can hold notes and reminders for the author. [S1]
- **Hiding content** — comments can temporarily conceal content (a block, multiple lines, or a mid-line/inline section). [S1]
- **Debugging aid** — comment out HTML lines individually to locate errors. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Note/reminder pattern** — drop `<!-- reminder -->` markers near relevant markup. [S1]
- **Block-hide pattern** — wrap one or many lines in `<!-- … -->` to remove them from rendering without deleting them. [S1]
- **Inline-hide pattern** — `<!-- … -->` placed mid-line hides just that fragment. [S1]
- **Debug-by-elimination pattern** — comment out lines one at a time to isolate the source of an error. [S1]
## 📖 세부 내용 (Details)
HTML comments are not displayed in the browser, but they can help document your HTML source code. [S1]
**Comment syntax**
The basic syntax for an HTML comment is the text written between `<!--` and `-->`. Note that the exclamation point (`!`) appears in the opening tag but not the closing tag. [S1]
```html
<!-- Write your comments here -->
```
**Adding comments**
Comments can include notifications and reminders. [S1]
```html
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
```
**Hiding content**
Comments can conceal content temporarily. [S1]
```html
<p>This is a paragraph.</p>
<!-- <p>This is another paragraph </p> -->
<p>This is a paragraph too.</p>
```
Multiple lines can be hidden between the opening and closing comment delimiters. Comments are useful for debugging — comment out HTML lines individually to locate errors. [S1]
```html
<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>
```
**Hiding inline content**
Comments can obscure mid-code (inline) sections. [S1]
```html
<p>This <!-- great text --> is a paragraph.</p>
```
## 🛠️ 적용 사례 (Applied in summary)
The reminder note, the block-hidden paragraph/image, and the inline-hidden fragment above are the canonical applied examples from the source. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Basic comment (HTML):
```html
<!-- Write your comments here -->
```
Comment out a block of markup:
```html
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
```
Hide an inline fragment:
```html
<p>This <!-- great text --> is a paragraph.</p>
```
## ⚖️ 모순 및 업데이트 (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 Introduction]], [[HTML Elements]], [[HTML Attributes]], [[HTML Quotations]]
- **참조 맥락:** Referenced when documenting markup, hiding content during development, or debugging by elimination.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Comments — https://www.w3schools.com/html/html_comments.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Comments" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Computercode.md
+155
View File
@@ -0,0 +1,155 @@
---
id: html-computercode
title: "HTML Computercode"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["computer code elements", "kbd element", "samp element", "code element", "var element", "pre element", "keyboard input"]
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", "code", "semantic"]
raw_sources: ["https://www.w3schools.com/html/html_computercode_elements.asp"]
applied_in: []
github_commit: ""
---
# [[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]
```html
<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]
```html
<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]
```html
<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]
```html
<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]
```html
<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:
```html
<kbd>Ctrl + S</kbd>
```
Program output:
```html
<samp>File not found.<br>Press F1 to continue</samp>
```
Whitespace-preserving code block:
```html
<pre><code>
x = 5;
y = 6;
z = x + y;
</code></pre>
```
Variable:
```html
<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).
10_Wiki/Topic_HTML/HTML_Div.md
+170
View File
@@ -0,0 +1,170 @@
---
id: html-div
title: "HTML Div"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["div element", "div tag", "block container", "div layout", "div centering"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
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_div.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Div]]
## 🎯 한 줄 통찰 (One-line insight)
The `<div>` element is a block-level container that groups other HTML elements together so they can be styled and laid out as a unit. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<div>` is a container** for other HTML elements. [S1]
- **Block-level by default** — the `<div>` element is by default a block element, meaning it takes all available width and comes with line breaks before and after. [S1]
- **No required attributes** — the `<div>` element has no required attributes, but `style`, `class`, and `id` are common. [S1]
- **Centering** — to center a non-full-width `<div>`, set a width and the CSS `margin` property to `auto`. [S1]
- **Side-by-side layout** — multiple `<div>` elements can be aligned horizontally using Float, Inline-block, Flexbox, or Grid. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Grouping pattern** — wrap a heading and its paragraph(s) in a `<div>` to treat them as one logical section. [S1]
- **Centering pattern** — give the `<div>` a fixed width and `margin: auto` to center it horizontally. [S1]
- **Horizontal layout pattern** — apply a layout technique (Float / Inline-block / Flexbox / Grid) to place several `<div>` containers in columns. [S1]
## 📖 세부 내용 (Details)
**The `<div>` Element.** The `<div>` element is used as a container for other HTML elements. The `<div>` element is by default a block element, meaning that it takes all available width, and comes with line breaks before and after. The `<div>` element has no required attributes, but `style`, `class`, and `id` are common. [S1]
Grouping a section with a `<div>`: [S1]
```html
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
```
**Center align a `<div>` element.** If you have a `<div>` element that is not 100% wide, and you want to center-align it, set the CSS `margin` property to `auto`. [S1]
```css
div {
width: 300px;
margin: auto;
}
```
**Multiple `<div>` elements.** You can have many `<div>` containers on the same page. [S1]
```html
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
</div>
```
**Aligning `<div>` elements side by side.** There are several CSS methods to lay out `<div>` elements horizontally. [S1]
*Float* — use `float: left` with percentage widths (e.g. 33% for three columns): [S1]
```css
.mycontainer {
width: 100%;
overflow: auto;
}
.mycontainer div {
width: 33%;
float: left;
}
```
*Inline-block* — change the display property from block to `inline-block`: [S1]
```css
div {
width: 30%;
display: inline-block;
}
```
*Flexbox* — apply `display: flex` on a parent container: [S1]
```css
.mycontainer {
display: flex;
}
.mycontainer > div {
width: 33%;
}
```
*Grid* — use `display: grid` with the `grid-template-columns` property: [S1]
```css
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
```
**HTML Tag Reference.** [S1]
| Tag | Description |
|---|---|
| `<div>` | Defines a section in a document (block-level) |
## 🛠️ 적용 사례 (Applied in summary)
The city-grouping examples (London, Oslo) and the four horizontal-layout techniques (Float, Inline-block, Flexbox, Grid) are the canonical applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Container div (HTML):
```html
<div>
<h2>Title</h2>
<p>Content.</p>
</div>
```
Centered div (CSS):
```css
div {
width: 300px;
margin: auto;
}
```
Three-column flexbox (CSS):
```css
.mycontainer {
display: flex;
}
.mycontainer > div {
width: 33%;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
For aligning `<div>` elements side by side, the source presents four approaches: [S1]
- **Float** — `float: left` with percentage widths; container uses `overflow: auto`.
- **Inline-block** — set `display: inline-block` and a width on each div.
- **Flexbox** — `display: flex` on the parent container (modern, flexible).
- **Grid** — `display: grid` with `grid-template-columns` (advanced layout control).
## ⚖️ 모순 및 업데이트 (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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Block and Inline]], [[HTML Classes]], [[HTML Id]], [[HTML Iframes]]
- **참조 맥락:** Referenced whenever grouping or laying out page sections as block-level containers.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Div Element — https://www.w3schools.com/html/html_div.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Div Element" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Drag_and_Drop.md
+132
View File
@@ -0,0 +1,132 @@
---
id: html-drag-and-drop
title: "HTML Drag and Drop"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Drag and Drop API", "draggable attribute", "dataTransfer", "ondragstart", "ondrop", "HTML5 drag and drop"]
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", "drag-and-drop", "api", "html5"]
raw_sources: ["https://www.w3schools.com/html/html5_draganddrop.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Drag and Drop]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML Drag and Drop API lets an element be dragged and dropped by marking it `draggable="true"` and wiring `ondragstart`, `ondragover`, and `ondrop` handlers that pass data through the `dataTransfer` object. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Drag and Drop API** — enables an element to be dragged and dropped, a common interaction where users grab an object and move it elsewhere. [S1]
- **`draggable="true"`** — the attribute that makes an element draggable. [S1]
- **`dataTransfer`** — the object that carries data between the drag source and drop target via `setData()` / `getData()`. [S1]
- **Default targets reject drops** — elements cannot receive drops by default; you must call `preventDefault()` in the dragover handler to allow a drop. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **`ondragstart` + `setData()`** — when dragging starts, store the data type and the dragged element's value. [S1]
- **`ondragover` + `preventDefault()`** — allow dropping by preventing the default behavior that blocks it. [S1]
- **`ondrop` + `getData()` + `appendChild()`** — on drop, retrieve the data using the same type used in `setData()`, then move the element into the drop target. [S1]
## 📖 세부 내용 (Details)
**What it is**
The HTML Drag and Drop API enables an element to be dragged and dropped. Browser support begins with Chrome 4.0, Internet Explorer 9.0, Firefox 3.5, Safari 6.0, and Opera 12.0. [S1]
**Make an element draggable**
Set the `draggable` attribute to `true`: [S1]
```html
<img id="img1" draggable="true">
```
or
```html
<p id="p1" draggable="true">Draggable text</p>
```
**Complete example**
```html
<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragoverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">
</body>
</html>
```
**The events explained**
- **`ondragstart` and `setData()`** — the `dataTransfer.setData()` method sets the data type and the value of the dragged data. [S1]
- **`ondragover`** — by default, elements cannot receive drops. To allow a drop, call `preventDefault()` in the dragover handler. [S1]
- **`ondrop`** — when the dragged data is dropped, retrieve it via `dataTransfer.getData()` using the same type that was specified in `setData()`. The example then appends the dragged element into the drop target. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The complete example above is the canonical applied case: dragging an `<img>` into a `<div>` drop zone. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Drag start — store the id (JavaScript):
```javascript
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
```
Allow drop (JavaScript):
```javascript
function dragoverHandler(ev) {
ev.preventDefault();
}
```
Perform drop — move the element (JavaScript):
```javascript
function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note the non-obvious requirement: a drop target rejects drops unless `preventDefault()` is called in its dragover handler. [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 Web APIs]], [[HTML Geolocation]], [[HTML Web Storage]], [[HTML Web Workers]]
- **참조 맥락:** Referenced whenever building interactive UIs where users rearrange or move elements directly.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Drag and Drop — https://www.w3schools.com/html/html5_draganddrop.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Drag and Drop" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Editors.md
+110
View File
@@ -0,0 +1,110 @@
---
id: html-editors
title: "HTML Editors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML editor", "text editor for HTML", "Notepad HTML", "TextEdit HTML", "code editor", "HTML IDE"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "tooling", "editor"]
raw_sources: ["https://www.w3schools.com/html/html_editors.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Editors]]
## 🎯 한 줄 통찰 (One-line insight)
HTML can be written and edited in any plain text editor — a simple editor like Notepad (Windows) or TextEdit (Mac) is a good way to learn HTML before moving on to professional editors. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Plain text editors suffice** — web pages can be created and modified using professional editors, but a simple text editor is recommended for learning HTML. [S1]
- **Windows tool** — Notepad is the built-in editor on Windows. [S1]
- **Mac tool** — TextEdit is the built-in editor on Mac, but it must be switched to Plain Text format first. [S1]
- **Three-step workflow** — write the HTML, save it as an `.htm`/`.html` file with UTF-8 encoding, then open it in a browser. [S1]
- **`.htm` and `.html` are interchangeable** — either file extension works. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Write → Save → View** — the canonical learning loop: type HTML in the editor, save with the correct extension and encoding, double-click (or right-click → Open with) to view in a browser. [S1]
- **UTF-8 saving** — choose UTF-8 encoding when saving so characters render correctly. [S1]
- **No special software required** — the workflow relies only on an OS-bundled editor and a web browser. [S1]
## 📖 세부 내용 (Details)
**Learn HTML using a text editor**
Web pages can be created and modified by using professional HTML editors. However, for learning HTML, a simple text editor like Notepad (PC) or TextEdit (Mac) is recommended. W3Schools believes using a simple text editor is a good way to learn HTML. [S1]
**Open Notepad (Windows)**
On Windows 8 or later, open the Start Screen (the window symbol at the bottom-left of the screen), type "Notepad", and open it. On Windows 7 and earlier, open Start > Programs > Accessories > Notepad. [S1]
**Open TextEdit (Mac)**
Open Finder > Applications > TextEdit. Then change some preferences to get the application to save files correctly: in Preferences > Format, choose "Plain Text". [S1]
**Step 1 — Write some HTML**
Write or copy the following HTML into the editor: [S1]
```html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
**Step 2 — Save the HTML page**
Save the file on your computer. Select File > Save as in the editor menu. Name the file "index.htm" and set the encoding to UTF-8 (the preferred encoding for HTML files). [S1]
> **Note:** You can use either `.htm` or `.html` as the file extension. There is no difference; it is up to you. [S1]
**Step 3 — View the HTML page in your browser**
Open the saved HTML file in your browser (double-click on the file, or right-click and choose "Open with"). The result will look much like the rendered heading and paragraph. [S1]
**Other tools mentioned**
W3Schools also provides an online "Try it Yourself" editor (with color coding and the ability to share code) and W3Schools Spaces, a tool for building and saving code online. A video tutorial is also available. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The "My First Heading / My first paragraph" snippet above is the canonical first file a learner saves as `index.htm` and opens in a browser. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Minimal first HTML file to save and open in a browser (HTML):
```html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Introduction]], [[HTML Basic]], [[HTML Elements]]
- **참조 맥락:** Referenced when setting up a workspace to author the first HTML document by hand.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Editors — https://www.w3schools.com/html/html_editors.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Editors" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Elements.md
+148
View File
@@ -0,0 +1,148 @@
---
id: html-elements
title: "HTML Elements"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML element", "start tag", "end tag", "empty element", "nested elements", "HTML tags"]
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", "elements", "tags"]
raw_sources: ["https://www.w3schools.com/html/html_elements.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Elements]]
## 🎯 한 줄 통찰 (One-line insight)
An HTML element is everything from a start tag to its matching end tag — `<tagname>content</tagname>` — and HTML documents are simply nested elements. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Element = start tag + content + end tag** — e.g. `<h1>My First Heading</h1>`. [S1]
- **Some elements are empty** — they have no content and no end tag (e.g. `<br>`); these are called empty elements. [S1]
- **Elements nest** — elements can contain other elements; all HTML documents consist of nested HTML elements. [S1]
- **Tags are not case sensitive** — `<P>` means the same as `<p>`, but W3Schools recommends lowercase. [S1]
- **Don't skip the end tag** — even if some browsers tolerate a missing end tag, never rely on it; unexpected results and errors may occur. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Three-part element** — `<tag>` … content … `</tag>`. [S1]
- **Empty element** — `<br>` style tags with no closing tag. [S1]
- **Nesting / containment** — `<html>` wraps `<body>`, which wraps `<h1>`, `<p>`, etc. [S1]
- **Lowercase convention** — write tags in lowercase even though HTML is case-insensitive. [S1]
## 📖 세부 내용 (Details)
**What is an HTML element?**
An HTML element is defined by a start tag, some content, and an end tag: [S1]
```html
<tagname>Content goes here...</tagname>
```
The HTML element is everything from the start tag to the end tag. Examples: [S1]
```html
<h1>My First Heading</h1>
```
```html
<p>My first paragraph.</p>
```
The element structure can be broken into three parts: the start tag, the element content, and the end tag. For `<h1>My First Heading</h1>`, the start tag is `<h1>`, the content is "My First Heading", and the end tag is `</h1>`. [S1]
**Nested HTML Elements**
HTML elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements. The following example contains four HTML elements (`<html>`, `<body>`, `<h1>`, and `<p>`): [S1]
```html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
**Never Skip the End Tag**
Some HTML elements will display correctly even if you forget the end tag: [S1]
```html
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
```
> **Note:** Never rely on this. Unexpected results and errors may occur if you forget the end tag. [S1]
**Empty HTML Elements**
HTML elements with no content are called empty elements. The `<br>` tag defines a line break and is an empty element without a closing tag. [S1]
```html
<p>This is a <br> paragraph with a line break.</p>
```
**HTML is Not Case Sensitive**
HTML tags are not case sensitive: `<P>` means the same as `<p>`. The HTML standard does not require lowercase tags, but W3Schools recommends lowercase in HTML and demands lowercase for stricter document types like XHTML. [S1]
**Tag reference**
| Tag | Description |
|---|---|
| `<html>` | Defines the root of an HTML document |
| `<body>` | Defines the document's body |
| `<h1>` to `<h6>` | Defines HTML headings |
A complete list of all available HTML tags is available in the HTML Tag Reference. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The nested-document example above demonstrates how the element model composes a full page from `<html>`/`<body>`/`<h1>`/`<p>`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Element pattern (HTML):
```html
<tagname>Content goes here...</tagname>
```
Nested elements forming a document:
```html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
Empty element inside a paragraph:
```html
<p>This is a <br> paragraph with a line break.</p>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
The source notes a tolerated-but-discouraged behavior: browsers may render some elements correctly even without an end tag, but this must never be relied upon. HTML is case-insensitive for tags, yet lowercase is the recommended (and, for XHTML, required) convention. [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 Introduction]], [[HTML Basic]], [[HTML Attributes]], [[HTML Paragraphs]]
- **참조 맥락:** Referenced whenever explaining what a tag, element, or nesting structure means in any page.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Elements — https://www.w3schools.com/html/html_elements.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Elements" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Emojis.md
+146
View File
@@ -0,0 +1,146 @@
---
id: html-emojis
title: "HTML Emojis"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML emoji", "emojis in HTML", "Unicode emojis", "UTF-8 emojis", "emoji characters", "emoji entity numbers"]
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", "emojis", "unicode", "utf-8", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_emojis.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Emojis]]
## 🎯 한 줄 통찰 (One-line insight)
Emojis look like images but are actually **letters (characters) from the UTF-8 (Unicode) character set**, so they can be copied, displayed, and sized just like any other HTML character. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Emojis are characters, not images** — they are letters from the UTF-8 (Unicode) character set, which is why they behave like ordinary text. [S1]
- **Charset must be declared** — to display a page correctly the browser must know its character set, declared with `<meta charset="UTF-8">`. If not specified, UTF-8 is the default in HTML. [S1]
- **Entity numbers** — each emoji has a numeric reference (e.g. `&#128512;` for 😀), exactly like other character entities. [S1]
- **Styleable like text** — because emojis are characters, they can be copied, displayed, and sized (e.g. via `font-size`) just like any other character. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Charset declaration pattern** — `<meta charset="UTF-8">` in the document head. [S1]
- **Numeric character pattern** — `&#NNN;` renders a Unicode character; e.g. `&#65;` → A, `&#128512;` → 😀. [S1]
- **Sizing pattern** — wrap emojis in a styled element, e.g. `<p style="font-size:48px">😀</p>`. [S1]
## 📖 세부 내용 (Details)
**What are Emojis?**
Emojis look like images, but they are not. Emojis are letters (characters) from the UTF-8 (Unicode) character set. Examples shown include 😄 😍 💗. [S1]
**The HTML charset Attribute**
To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in the `<meta>` tag: `<meta charset="UTF-8">`. If not specified, UTF-8 is the default character set in HTML. [S1]
**UTF-8 Characters**
Because letters are UTF-8 characters, they can be displayed by their entity numbers. The characters A, B, and C are displayed by the numbers 65, 66, and 67: [S1]
```html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<p>I will display A B C</p>
<p>I will display &#65; &#66; &#67;</p>
</body>
</html>
```
The `<meta charset="UTF-8">` element defines the character set. [S1]
**Emoji Characters**
Emojis are also characters from the UTF-8 alphabet and can be referenced by their entity number. A basic emoji display: [S1]
```html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<h1>My First Emoji</h1>
<p>&#128512;</p>
</body>
</html>
```
Since emojis are characters, they can be copied, displayed, and sized just like any other character in HTML — here using `font-size`: [S1]
```html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>
</body>
</html>
```
**Emoji reference values (sample)** [S1]
| Emoji | Value |
|---|---|
| 🗻 | `&#128507;` |
| 🗼 | `&#128508;` |
| 🗽 | `&#128509;` |
| 🗾 | `&#128510;` |
| 🗿 | `&#128511;` |
| 😀 | `&#128512;` |
| 😁 | `&#128513;` |
| 😂 | `&#128514;` |
| 😃 | `&#128515;` |
| 😄 | `&#128516;` |
| 😅 | `&#128517;` |
**HTML Emoji Examples**
The page lists emoji categories with sample characters, including Smileys (😀 😂 😊 😎 😜), Hands (✌ ✊ ☝ ✋ 👌), and further categories: People, Office, Places, Transport, Animals, Food, Plants, Fruits, Sports, Earth & Sky, Weather, Clothing, Audio/Video, Celebration, Entertainment, and Symbols. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The "My First Emoji" and "Sized Emojis" examples above are the canonical applied cases: rendering an emoji by entity number and scaling it with CSS `font-size`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Display an emoji by entity number (HTML):
```html
<meta charset="UTF-8">
<p>&#128512;</p>
```
Size emojis like text (HTML):
```html
<p style="font-size:48px">&#128512; &#128516; &#128525; &#128151;</p>
```
## ⚖️ 모순 및 업데이트 (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 Symbols]], [[HTML Charsets]], [[HTML Entities]], [[HTML URL Encode]]
- **참조 맥락:** Referenced when adding emoji or Unicode characters to a page, which depends on declaring the UTF-8 character set.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Emojis — https://www.w3schools.com/html/html_emojis.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Emojis" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Entities.md
+143
View File
@@ -0,0 +1,143 @@
---
id: html-entities
title: "HTML Entities"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["character entities", "reserved characters", "non-breaking space", "nbsp", "entity name", "entity number", "diacritical marks"]
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", "entities", "characters"]
raw_sources: ["https://www.w3schools.com/html/html_entities.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Entities]]
## 🎯 한 줄 통찰 (One-line insight)
Reserved characters in HTML must be replaced with entities — written as an entity name (`&name;`) or an entity number (`&#number;`) — so the browser does not confuse them with tags. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Reserved characters need entities** — characters like `<` and `>` are reserved; if used directly in text, the browser might mix them up with tags. [S1]
- **Two entity forms** — entity names (`&entity_name;`) or entity numbers (`&#entity_number;`) can both display reserved characters. [S1]
- **Names are easier** — entity names are easier to remember than entity numbers. [S1]
- **Names are case sensitive** — entity names must use the correct case. [S1]
- **Non-breaking space (`&nbsp;`)** — a space that will not break into a new line and prevents the browser from truncating consecutive spaces. [S1]
- **Combining diacritical marks** — marks can combine with alphanumeric characters to produce characters not present in the page's encoding. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Less-than** — `&lt;` or `&#60;` displays `<`. [S1]
- **Greater-than** — `&gt;` or `&#62;` displays `>`. [S1]
- **Ampersand** — `&amp;` displays `&`. [S1]
- **Non-breaking space** — `&nbsp;` keeps two words on the same line (e.g. `10 km/h`, `10 PM`) and adds real spaces. [S1]
- **Combining mark** — base char + mark number, e.g. `a&#768;` → `à`. [S1]
## 📖 세부 내용 (Details)
**Reserved characters**
Some characters are reserved in HTML. If you use the less-than (`<`) or greater-than (`>`) signs in your HTML text, the browser might mix them with tags. Entity names or entity numbers can be used to display reserved HTML characters. [S1]
- `<` (less than) = `&lt;`
- `>` (greater than) = `&gt;`
**Entity syntax**
An entity is written either as a name or as a number: [S1]
```text
&entity_name;
&#entity_number;
```
For example, to display a less-than sign (`<`) we must write `&lt;` or `&#60;`. Entity names are easier to remember than entity numbers. [S1]
> Note: Entity names are case sensitive. [S1]
**Non-breaking space**
A commonly used HTML entity is the non-breaking space: `&nbsp;`. A non-breaking space is a space that will not break into a new line. Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive, for example: [S1]
- `§ 10`
- `10 km/h`
- `10 PM`
Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them; to add real spaces to your text, you can use the `&nbsp;` character entity. The non-breaking hyphen (`&#8209;`) is used to define a hyphen character (`‑`) that does not break into a new line. [S1]
**Some useful HTML character entities**
| Result | Description | Name | Number |
|---|---|---|---|
| (space) | non-breaking space | `&nbsp;` | `&#160;` |
| < | less than | `&lt;` | `&#60;` |
| > | greater than | `&gt;` | `&#62;` |
| & | ampersand | `&amp;` | `&#38;` |
| " | double quotation mark | `&quot;` | `&#34;` |
| ' | single quotation mark | `&apos;` | `&#39;` |
| ¢ | cent | `&cent;` | `&#162;` |
| £ | pound | `&pound;` | `&#163;` |
| ¥ | yen | `&yen;` | `&#165;` |
| € | euro | `&euro;` | `&#8364;` |
| © | copyright | `&copy;` | `&#169;` |
| ® | registered trademark | `&reg;` | `&#174;` |
| ™ | trademark | `&trade;` | `&#8482;` |
[S1]
**Combining diacritical marks**
A diacritical mark is a "glyph" added to a letter. Some diacritical marks, like grave ( ̀) and acute ( ́), are called accents. Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page. [S1]
| Mark | Character | Construct | Result |
|---|---|---|---|
| ̀ | a | `a&#768;` | à |
| ́ | a | `a&#769;` | á |
| ̂ | a | `a&#770;` | â |
| ̃ | a | `a&#771;` | ã |
| ̀ | O | `O&#768;` | Ò |
| ́ | O | `O&#769;` | Ó |
| ̂ | O | `O&#770;` | Ô |
| ̃ | O | `O&#771;` | Õ |
[S1]
## 🛠️ 적용 사례 (Applied in summary)
The reserved-character substitutions (`&lt;`, `&gt;`, `&amp;`), the `&nbsp;` usage examples (`10 km/h`, `10 PM`, preserving spaces), and the combining-mark constructs (`a&#768;` → à) are the canonical applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Display a literal less-than sign:
```html
&lt;
&#60;
```
Keep two words on the same line:
```html
10&nbsp;km/h
```
Combine a base character with a diacritical mark:
```html
a&#768; <!-- renders as à -->
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Entity name (`&lt;`)** — easier to remember; case sensitive. [S1]
- **Entity number (`&#60;`)** — numeric alternative producing the same character. [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 Symbols]], [[HTML Charset]], [[HTML Formatting]], [[HTML Introduction]]
- **참조 맥락:** Referenced whenever reserved characters, special symbols, real spaces, or accented characters must be displayed safely in HTML text.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Entities — https://www.w3schools.com/html/html_entities.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Entities" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Favicon.md
+101
View File
@@ -0,0 +1,101 @@
---
id: html-favicon
title: "HTML Favicon"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["favicon", "link rel icon", "favicon.ico", "browser tab icon", "site icon"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "favicon", "head"]
raw_sources: ["https://www.w3schools.com/html/html_favicon.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Favicon]]
## 🎯 한 줄 통찰 (One-line insight)
A favicon is a small image displayed next to the page title in the browser tab, added by placing a `<link rel="icon">` element in the document's `<head>`. [S1]
## 🧠 핵심 개념 (Core concepts)
- **What a favicon is** — a small image displayed next to the page title in the browser tab. [S1]
- **Design guidance** — since a favicon is a small image, it should be a simple image with high contrast. [S1]
- **How to add it** — use the HTML `<link>` element inside the `<head>` section (after the `<title>` element); favicons can be sourced from sites like favicon.cc or custom-created. [S1]
- **File placement** — put the favicon in the site's root directory or an `/images` folder. [S1]
- **Format support** — ICO, PNG, GIF, JPEG, and SVG favicon formats are supported across Edge, Chrome, Firefox, Opera, and Safari. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Favicon link pattern** — `<link rel="icon" type="image/x-icon" href="/images/favicon.ico">` placed in `<head>`. [S1]
- **Head-placement pattern** — the `<link>` goes after the `<title>` element. [S1]
## 📖 세부 내용 (Details)
A favicon is a small image displayed next to the page title in the browser tab. [S1]
**Adding a favicon**
Favicons can be sourced from sites like favicon.cc or custom-created images. A favicon is a small image, so it should be a simple image with high contrast. Place the favicon in your site's root directory or an `/images` folder, then add a `<link>` element to your HTML `<head>` section after the `<title>` element. [S1]
```html
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
**Supported favicon file formats**
The guide includes a compatibility matrix showing support across Edge, Chrome, Firefox, Opera, and Safari: [S1]
| File format | Edge | Chrome | Firefox | Opera | Safari |
|---|---|---|---|---|---|
| ICO | Yes | Yes | Yes | Yes | Yes |
| PNG | Yes | Yes | Yes | Yes | Yes |
| GIF | Yes | Yes | Yes | Yes | Yes |
| JPEG | Yes | Yes | Yes | Yes | Yes |
| SVG | Yes | Yes | Yes | Yes | Yes |
**Key takeaway** — use the HTML `<link>` element to insert a favicon within your document's head section. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The full HTML document with the favicon `<link>` above is the canonical applied example from the source. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Favicon link in head (HTML):
```html
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Page Title]], [[HTML Images]], [[HTML Head]], [[HTML Introduction]]
- **참조 맥락:** Referenced when branding a page in the browser tab and bookmarks via a small icon.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Favicon — https://www.w3schools.com/html/html_favicon.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Favicon" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_File_Paths.md
+121
View File
@@ -0,0 +1,121 @@
---
id: html-file-paths
title: "HTML File Paths"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["file path", "relative path", "absolute path", "HTML src path", "linking files", "URL path"]
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", "file-paths", "links"]
raw_sources: ["https://www.w3schools.com/html/html_filepaths.asp"]
applied_in: []
github_commit: ""
---
# [[HTML File Paths]]
## 🎯 한 줄 통찰 (One-line insight)
A file path describes the location of a file within a web site's folder structure, and is used whenever an HTML page links to external files such as pages, images, style sheets, or scripts. [S1]
## 🧠 핵심 개념 (Core concepts)
- **File path = location in the folder structure** — it tells the browser where to find a file in a web site's folder hierarchy. [S1]
- **Where paths are used** — file paths are used when linking to external files: web pages, images, style sheets, and JavaScripts. [S1]
- **Absolute file path** — provides the complete URL (including the protocol and domain) to a file. [S1]
- **Relative file path** — points to a file relative to the current page, without a fixed base URL. [S1]
- **Best practice** — it is best practice to use relative file paths (if possible), so pages keep working across localhost and different domains. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Same folder** — `src="picture.jpg"` references a file in the same folder as the current page. [S1]
- **Subfolder** — `src="images/picture.jpg"` references a file in an `images` folder inside the current folder. [S1]
- **Root-relative** — `src="/images/picture.jpg"` (leading slash) references a file in an `images` folder at the root of the web site. [S1]
- **Parent folder** — `src="../picture.jpg"` references a file one level up from the current folder. [S1]
## 📖 세부 내용 (Details)
**What is a file path?**
A file path describes the location of a file in a web site's folder structure. File paths are used when linking to external files, including web pages, images, style sheets, and JavaScripts. [S1]
**File path examples**
| Path | Description |
|---|---|
| `<img src="picture.jpg">` | File in the same folder as the current page |
| `<img src="images/picture.jpg">` | File in the `images` folder in the current folder |
| `<img src="/images/picture.jpg">` | File in the `images` folder at the root of the current web |
| `<img src="../picture.jpg">` | File one level up from the current folder |
[S1]
**Absolute file paths**
An absolute file path is the full URL to a file: [S1]
```html
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
```
**Relative file paths**
A relative file path points to a file relative to the current page. [S1]
Root-relative (starts at the web root): [S1]
```html
<img src="/images/picture.jpg" alt="Mountain">
```
Located in the `images` folder in the current folder: [S1]
```html
<img src="images/picture.jpg" alt="Mountain">
```
One level up from the current folder: [S1]
```html
<img src="../images/picture.jpg" alt="Mountain">
```
**Best practice**
It is best practice to use relative file paths (if possible). When relative file paths are used, web pages will not be bound to your current base URL, and all links will work on your own computer (localhost) as well as on your current public domain and your future public domains. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The image-linking snippets above are the canonical applied examples for referencing files from same-folder, subfolder, root, and parent-folder locations. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Absolute path (full URL):
```html
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
```
Relative paths:
```html
<img src="picture.jpg" alt="Mountain"> <!-- same folder -->
<img src="images/picture.jpg" alt="Mountain"> <!-- subfolder -->
<img src="/images/picture.jpg" alt="Mountain"> <!-- web root -->
<img src="../images/picture.jpg" alt="Mountain"><!-- parent folder -->
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Absolute path** — binds the reference to a specific base URL/domain; suitable for linking to external resources on other sites. [S1]
- **Relative path** — not bound to any base URL; the same markup works on localhost and across current and future domains. The source recommends relative paths when possible. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Links]], [[HTML Images]], [[HTML Head]], [[HTML Style Guide]]
- **참조 맥락:** Referenced whenever an HTML document links to an external resource (image, stylesheet, script, or another page).
## 📚 출처 (Sources)
- [S1] W3Schools — HTML File Paths — https://www.w3schools.com/html/html_filepaths.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML File Paths" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Form_Attributes.md
+140
View File
@@ -0,0 +1,140 @@
---
id: html-form-attributes
title: "HTML Form Attributes"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["form attributes", "form action", "form method", "GET vs POST", "form target", "novalidate", "autocomplete"]
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", "forms", "attributes", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_forms_attributes.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Form Attributes]]
## 🎯 한 줄 통찰 (One-line insight)
A `<form>`'s attributes control where its data goes (`action`), how the response is shown (`target`), how the data is transmitted (`method` — GET vs POST), and how validation/autocomplete behave (`novalidate`, `autocomplete`). [S1]
## 🧠 핵심 개념 (Core concepts)
- **`action`** — specifies where the form data is sent (a file on the server) when the submit button is clicked; if omitted, the form submits to the current page. [S1]
- **`target`** — specifies where to display the response (e.g. new tab, current window); default is `_self`. [S1]
- **`method`** — specifies the HTTP method (GET or POST) for sending the data; GET appends data to the URL, POST hides it in the request body. [S1]
- **Security rule** — never use GET for sensitive data (it is visible in the URL); always use POST for sensitive or personal information. [S1]
- **`autocomplete`** — turns browser autocomplete on/off; **`novalidate`** disables form validation on submit. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Action target pattern** — `<form action="/action_page.php">`. [S1]
- **New-tab response** — `<form ... target="_blank">`. [S1]
- **Method selection** — `<form ... method="get">` vs `method="post">`. [S1]
- **Disable validation** — `<form action="..." novalidate>` (boolean attribute). [S1]
## 📖 세부 내용 (Details)
**The Action Attribute**
The `action` attribute defines the action to be performed when the form is submitted — the form data is sent to a file on the server. If the attribute is omitted, the action is set to the current page. [S1]
```html
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
```
**The Target Attribute**
The `target` attribute specifies where to display the response received after submitting the form. The default value is `_self`. [S1]
| Value | Description |
|---|---|
| `_blank` | The response is displayed in a new window or tab |
| `_self` | The response is displayed in the current window |
| `_parent` | The response is displayed in the parent frame |
| `_top` | The response is displayed in the full body of the window |
| `framename` | The response is displayed in a named iframe |
Example opening the result in a new tab: [S1]
```html
<form action="/action_page.php" target="_blank">
```
**The Method Attribute**
The `method` attribute specifies the HTTP method to be used when submitting the form data. The data can be sent as URL variables (`method="get"`) or as an HTTP post transaction (`method="post"`). [S1]
- **GET** — appends the form data to the URL as name/value pairs. The URL length is limited (about 2048 characters). GET is good for non-sensitive data and produces bookmarkable results. **NEVER use GET to send sensitive data** — the submitted form data is visible in the URL. [S1]
- **POST** — sends the form data inside the HTTP request body (not visible in the URL). It supports large amounts of data and is appropriate for sensitive information, but POST submissions cannot be bookmarked. **Always use POST if the form data contains sensitive or personal information.** [S1]
**The Autocomplete Attribute**
The `autocomplete` attribute specifies whether a form should have autocomplete on or off. When on, the browser automatically completes values based on values the user has entered before. [S1]
```html
<form action="/action_page.php" autocomplete="on">
```
**The Novalidate Attribute**
`novalidate` is a boolean attribute. When present, it specifies that the form data should not be validated when submitted. [S1]
```html
<form action="/action_page.php" novalidate>
```
**List of All Form Attributes** [S1]
| Attribute | Description |
|---|---|
| `accept-charset` | Specifies the character encodings used for form submission |
| `action` | Specifies where to send the form-data when the form is submitted |
| `autocomplete` | Specifies whether a form should have autocomplete on or off |
| `enctype` | Specifies how the form-data should be encoded (only for `method="post"`) |
| `method` | Specifies the HTTP method to use when sending form-data |
| `name` | Specifies the name of the form |
| `novalidate` | Specifies that the form should not be validated when submitted |
| `rel` | Specifies the relationship between a linked resource and the current document |
| `target` | Specifies where to display the response that is received after submitting the form |
## 🛠️ 적용 사례 (Applied in summary)
The `action`/submit example above is the canonical applied case: a form posting first/last name to `/action_page.php`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Form posting to a server-side handler:
```html
<form action="/action_page.php" method="post">
...
<input type="submit" value="Submit">
</form>
```
Open response in a new tab and skip validation:
```html
<form action="/action_page.php" target="_blank" novalidate>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **GET** — data appended to the URL (visible), length-limited (~2048 chars), bookmarkable; use for non-sensitive queries where a shareable/bookmarkable URL is desirable. NEVER for sensitive data. [S1]
- **POST** — data hidden in the request body, supports large payloads, not bookmarkable; always use for sensitive or personal information and large data. [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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Forms]], [[HTML Form Elements]], [[HTML Input Types]], [[HTML URL Encode]]
- **참조 맥락:** Referenced when configuring how a form submits and transmits its data to a server.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Form Attributes — https://www.w3schools.com/html/html_forms_attributes.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Form Attributes" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Form_Elements.md
+203
View File
@@ -0,0 +1,203 @@
---
id: html-form-elements
title: "HTML Form Elements"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["form elements", "select element", "textarea", "fieldset", "datalist", "output element", "button element", "optgroup"]
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", "forms", "elements", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_form_elements.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Form Elements]]
## 🎯 한 줄 통찰 (One-line insight)
Beyond `<input>`, the HTML `<form>` can contain a family of dedicated controls — `<label>`, `<select>`/`<option>`, `<textarea>`, `<button>`, `<fieldset>`/`<legend>`, `<datalist>`, and `<output>` — each serving a specific input or grouping role. [S1]
## 🧠 핵심 개념 (Core concepts)
- **A form's element family** — `<input>`, `<label>`, `<select>`, `<textarea>`, `<button>`, `<fieldset>`, `<legend>`, `<datalist>`, `<output>`, `<option>`, `<optgroup>`. [S1]
- **`<select>` = drop-down** — built from `<option>` children; `selected` pre-selects, `size` shows multiple rows, `multiple` allows multiple selections. [S1]
- **`<textarea>` = multi-line text** — sized with `rows`/`cols` or with CSS. [S1]
- **`<fieldset>`/`<legend>`** — group related controls with a caption. [S1]
- **`<datalist>`** — supplies a predefined option list for an `<input>`; **`<output>`** displays a calculation result. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Drop-down pattern** — `<select>` wrapping `<option value="...">` entries. [S1]
- **Pre-select / multi-select** — `selected` on an option; `size="n"` and `multiple` on the select. [S1]
- **Grouping pattern** — `<fieldset><legend>Caption</legend> … </fieldset>`. [S1]
- **Autocomplete-list pattern** — `<input list="id">` + `<datalist id="id">`. [S1]
- **Live calculation pattern** — `<form oninput="...">` + `<output for="a b">`. [S1]
## 📖 세부 내용 (Details)
The HTML `<form>` element can contain one or more of these elements: `<input>`, `<label>`, `<select>`, `<textarea>`, `<button>`, `<fieldset>`, `<legend>`, `<datalist>`, `<output>`, `<option>`, `<optgroup>`. [S1]
**The `<input>` Element**
One of the most used form elements; displayed in many ways depending on its `type` attribute. [S1]
```html
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
```
**The `<label>` Element**
Defines a label for form elements. It helps screen-reader users, and gives a larger click target for checkboxes and radio buttons. The `for` attribute should match the related `<input>` element's `id`. [S1]
**The `<select>` Element**
Defines a drop-down list, built from `<option>` elements. [S1]
```html
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
```
Pre-select an option with `selected`: [S1]
```html
<option value="fiat" selected>Fiat</option>
```
Show a number of visible values with `size`: [S1]
```html
<select id="cars" name="cars" size="3">
...
</select>
```
Allow multiple selections with `multiple`: [S1]
```html
<select id="cars" name="cars" size="4" multiple>
...
</select>
```
**The `<textarea>` Element**
Defines a multi-line input field, sized with `rows` and `cols`: [S1]
```html
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
```
Size can also be defined with CSS: [S1]
```html
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
```
**The `<button>` Element**
Defines a clickable button. Always specify the `type` attribute for a button. [S1]
```html
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
```
**The `<fieldset>` and `<legend>` Elements**
`<fieldset>` groups related data in a form; `<legend>` defines a caption for the `<fieldset>`. [S1]
```html
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
```
**The `<datalist>` Element**
Specifies a list of pre-defined options for an `<input>` element. Users see a drop-down list of the predefined options as they enter data. The input's `list` attribute must match the datalist's `id`. [S1]
```html
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
```
**The `<output>` Element**
Represents the result of a calculation (typically performed by a script). [S1]
```html
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
```
**HTML Form Elements (summary)** [S1]
| Tag | Description |
|---|---|
| `<form>` | Defines an HTML form for user input |
| `<input>` | Defines an input control |
| `<textarea>` | Defines a multiline input control (text area) |
| `<label>` | Defines a label for an `<input>` element |
| `<fieldset>` | Groups related elements in a form |
| `<legend>` | Defines a caption for a `<fieldset>` element |
| `<select>` | Defines a drop-down list |
| `<optgroup>` | Defines a group of related options in a drop-down list |
| `<option>` | Defines an option in a drop-down list |
| `<button>` | Defines a clickable button |
| `<datalist>` | Specifies a list of pre-defined options for input controls |
| `<output>` | Defines the result of a calculation |
## 🛠️ 적용 사례 (Applied in summary)
The `<output>` live-calculation form above is the canonical applied case: a slider plus a number field whose sum is displayed in real time via `oninput`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Drop-down with a pre-selected option (HTML):
```html
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="fiat" selected>Fiat</option>
</select>
```
Grouped fields with caption:
```html
<fieldset>
<legend>Personalia:</legend>
<input type="text" name="fname">
</fieldset>
```
## ⚖️ 모순 및 업데이트 (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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Forms]], [[HTML Form Attributes]], [[HTML Input Types]], [[HTML Input Attributes]]
- **참조 맥락:** Referenced when choosing the right control (drop-down, text area, grouping, etc.) inside a form.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Form Elements — https://www.w3schools.com/html/html_form_elements.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Form Elements" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Formatting.md
+171
View File
@@ -0,0 +1,171 @@
---
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).
10_Wiki/Topic_HTML/HTML_Forms.md
+162
View File
@@ -0,0 +1,162 @@
---
id: html-forms
title: "HTML Forms"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML form", "form element", "input element", "web forms", "form input", "HTML form controls"]
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", "forms", "input", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_forms.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Forms]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `<form>` element is a container for collecting user input, holding controls like text fields, radio buttons, checkboxes, and submit buttons — most of which are variations of the all-purpose `<input>` element. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<form>` as container** — wraps the input controls used to collect user input. [S1]
- **`<input>` is the workhorse** — the most-used form element; its appearance and behavior change with the `type` attribute (text, radio, checkbox, submit, button). [S1]
- **`<label>` for accessibility** — labels identify controls and benefit screen-reader users; bind a label to a control by matching the label's `for` to the input's `id`. [S1]
- **The `name` attribute is required for submission** — each input must have a `name`; if omitted, that field's value is not sent at all. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Form container pattern** — `<form>` … form elements … `</form>`. [S1]
- **Labeled text field** — `<label for="x">…</label>` + `<input type="text" id="x" name="x">`. [S1]
- **Radio group** — multiple `<input type="radio">` sharing the same `name` (select one). [S1]
- **Submit pattern** — `<input type="submit" value="Submit">` inside a `<form action="...">`. [S1]
## 📖 세부 내용 (Details)
**The `<form>` Element**
The HTML `<form>` element is used to create an HTML form for user input. It is a container for different types of input elements such as text fields, checkboxes, radio buttons, and submit buttons. [S1]
```html
<form>
.
form elements
.
</form>
```
**The `<input>` Element**
The HTML `<input>` element is the most used form element. It can be displayed in many ways, depending on the `type` attribute. [S1]
| Type | Description |
|---|---|
| `<input type="text">` | Displays a single-line text input field |
| `<input type="radio">` | Displays a radio button (for selecting one of many choices) |
| `<input type="checkbox">` | Displays a checkbox (for selecting zero or more of many choices) |
| `<input type="submit">` | Displays a submit button (for submitting the form) |
| `<input type="button">` | Displays a clickable button |
**Text Fields**
`<input type="text">` defines a single-line input field for text. The default width of an input field is 20 characters. [S1]
```html
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
```
**The `<label>` Element**
The `<label>` tag defines a label for several form elements and is useful for screen-reader users. The `for` attribute of the `<label>` tag should be equal to the `id` attribute of the `<input>` element to bind them together. [S1]
**Radio Buttons**
A radio button lets a user select ONE of a limited number of choices. [S1]
```html
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
```
**Checkboxes**
Checkboxes let a user select ZERO or MORE options of a limited number of choices. [S1]
```html
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
```
**The Submit Button**
`<input type="submit">` defines a button for submitting the form data to a form-handler (specified by the form's `action` attribute). [S1]
```html
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
```
**The Name Attribute for `<input>`**
Each input field must have a `name` attribute to be submitted. If the `name` attribute is omitted, the value of the input field will not be sent at all. Example where `name` is omitted (the value will not be sent): [S1]
```html
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
```
## 🛠️ 적용 사례 (Applied in summary)
The submit-button example above is the canonical applied case: a complete form posting first/last name to `/action_page.php`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Minimal submitting form (HTML):
```html
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>
```
Radio group (one choice, shared name):
```html
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label>
```
## ⚖️ 모순 및 업데이트 (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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Form Attributes]], [[HTML Form Elements]], [[HTML Input Types]], [[HTML Links]]
- **참조 맥락:** The foundation referenced whenever collecting user input on a web page.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Forms — https://www.w3schools.com/html/html_forms.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Forms" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Geolocation.md
+183
View File
@@ -0,0 +1,183 @@
---
id: html-geolocation
title: "HTML Geolocation"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Geolocation API", "navigator.geolocation", "getCurrentPosition", "watchPosition", "HTML location API"]
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", "geolocation", "api", "html5"]
raw_sources: ["https://www.w3schools.com/html/html5_geolocation.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Geolocation]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML Geolocation API locates a user's position (latitude and longitude) via `navigator.geolocation.getCurrentPosition()`, but only with the user's explicit permission and most accurately on GPS-equipped devices. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`navigator.geolocation`** — the entry point to the Geolocation API; check for its existence to detect support. [S1]
- **User permission required** — the API will not return a location until the user grants permission. [S1]
- **`getCurrentPosition(success, error)`** — requests the current position once, calling a success or error callback. [S1]
- **`watchPosition()`** — continuously tracks the position as the user moves. [S1]
- **Accuracy depends on hardware** — works most accurately on devices with GPS (e.g. smartphones, smartwatches). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Feature-detect first** — `if (navigator.geolocation) { ... } else { /* not supported */ }`. [S1]
- **Two-callback pattern** — pass a success handler that reads `position.coords.*` and an error handler that inspects `error.code`. [S1]
- **Error switch** — branch on `error.code` against `PERMISSION_DENIED`, `POSITION_UNAVAILABLE`, `TIMEOUT`, `UNKNOWN_ERROR`. [S1]
## 📖 세부 내용 (Details)
**Locating the user's position**
The Geolocation API is used to get the geographical position of a user. Because this can compromise privacy, the position is not available unless the user approves it. It is most accurate for devices with GPS, like smartphones. Use the `getCurrentPosition()` method to get the user's position. [S1]
**Basic example**
```javascript
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error() {
alert("Sorry, no position available.");
}
</script>
```
The example checks if geolocation is supported, runs `getCurrentPosition()` if so, and on success outputs the latitude and longitude. [S1]
**Handling errors**
The second parameter of `getCurrentPosition()` is used to handle errors. It specifies a function to run if it fails to get the user's location. The error callback can branch on `error.code`: [S1]
```javascript
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
```
**`getCurrentPosition()` return data**
The `getCurrentPosition()` method returns an object on success. The latitude, longitude, and accuracy properties are always returned; the other properties are returned if available. [S1]
| Property | Returns |
|---|---|
| `coords.latitude` | The latitude as a decimal number (always returned) |
| `coords.longitude` | The longitude as a decimal number (always returned) |
| `coords.accuracy` | The accuracy of position (always returned) |
| `coords.altitude` | The altitude in meters above the mean sea level (returned if available) |
| `coords.altitudeAccuracy` | The altitude accuracy of position (returned if available) |
| `coords.heading` | The heading as degrees clockwise from North (returned if available) |
| `coords.speed` | The speed in meters per second (returned if available) |
| `timestamp` | The date/time of the response (returned if available) |
**`watchPosition()`**
The `watchPosition()` method returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car). The matching `clearWatch()` method stops the `watchPosition()` method. [S1]
```javascript
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(success, error);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
```
**Secure context note**
The Geolocation API requires a secure context such as HTTPS. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The success/error and watch examples above are the canonical applied cases: a one-shot location lookup and continuous tracking, each with full error handling. A dedicated map-display example and a separate location-specific information sample are described conceptually but not provided as code in the source. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Feature detection + request (JavaScript):
```javascript
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
```
Reading coordinates in the success callback (JavaScript):
```javascript
function success(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Privacy and security constraints shape usage: a location is never returned without user approval, and the API requires a secure context (HTTPS). [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 Web APIs]], [[HTML Web Storage]], [[HTML Web Workers]], [[HTML Drag and Drop]]
- **참조 맥락:** Referenced whenever an app needs the user's physical location (maps, local search, geofencing).
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Geolocation — https://www.w3schools.com/html/html5_geolocation.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Geolocation" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Head.md
+201
View File
@@ -0,0 +1,201 @@
---
id: html-head
title: "HTML Head"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["head element", "HTML metadata", "title element", "meta element", "viewport meta", "document head"]
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", "head", "metadata"]
raw_sources: ["https://www.w3schools.com/html/html_head.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Head]]
## 🎯 한 줄 통찰 (One-line insight)
The `<head>` element is a container for metadata (data about data) placed between `<html>` and `<body>`; its contents are not displayed on the page but define the document's title, character set, styles, scripts, and other meta information. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<head>` = metadata container** — placed between the `<html>` tag and the `<body>` tag; metadata is data about the HTML document and is not displayed on the page. [S1]
- **`<title>` is required** — defines the document title (text-only), shown in the browser's title bar / tab, and is very important for SEO. [S1]
- **`<style>`** — defines style information for a single HTML page. [S1]
- **`<link>`** — defines the relationship between the current document and an external resource; most often used to link external style sheets. [S1]
- **`<meta>`** — specifies character set, page description, keywords, author, and viewport settings; used by browsers, search engines, and other web services. [S1]
- **`<script>`** — defines client-side JavaScript. [S1]
- **`<base>`** — specifies the base URL and/or target for all relative URLs in a page (only one per document). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Character encoding** — `<meta charset="UTF-8">` declares the document's character set. [S1]
- **Viewport for responsive design** — `<meta name="viewport" content="width=device-width, initial-scale=1.0">` should be included in all web pages. [S1]
- **Named meta** — `<meta name="..." content="...">` for keywords, description, and author. [S1]
- **Refresh** — `<meta http-equiv="refresh" content="30">` reloads the document every 30 seconds. [S1]
- **External stylesheet link** — `<link rel="stylesheet" href="mystyle.css">`. [S1]
## 📖 세부 내용 (Details)
**The HTML `<head>` element**
The `<head>` element is a container for metadata (data about data) and is placed between the `<html>` tag and the `<body>` tag. HTML metadata is data about the HTML document; it is not displayed on the page. Metadata typically define the document title, character set, styles, scripts, and other meta information. [S1]
**The HTML `<title>` element**
The `<title>` element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The `<title>` element is required in HTML documents. The content of a page title is very important for SEO — the page title is used by search engine algorithms to decide the order when listing pages in search results. The `<title>` element defines a title in the browser toolbar, provides a title for the page when it is added to favorites, and displays a title for the page in search engine results. So, try to make the title as accurate and meaningful as possible. [S1]
```html
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
```
**The HTML `<style>` element**
The `<style>` element is used to define style information for a single HTML page: [S1]
```html
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
```
**The HTML `<link>` element**
The `<link>` element defines the relationship between the current document and an external resource. The `<link>` tag is most often used to link to external style sheets: [S1]
```html
<link rel="stylesheet" href="mystyle.css">
```
**The HTML `<meta>` element**
The `<meta>` element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings. The metadata will not be displayed on the page, but is used by browsers (how to display content or reload the page), by search engines (keywords), and other web services. [S1]
Define the character set: [S1]
```html
<meta charset="UTF-8">
```
Define keywords for search engines: [S1]
```html
<meta name="keywords" content="HTML, CSS, JavaScript">
```
Define a description of your web page: [S1]
```html
<meta name="description" content="Free Web tutorials">
```
Define the author of a page: [S1]
```html
<meta name="author" content="John Doe">
```
Refresh document every 30 seconds: [S1]
```html
<meta http-equiv="refresh" content="30">
```
Setting the viewport to make your website look good on all devices: [S1]
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Example of `<meta>` tags inside `<head>`: [S1]
```html
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
```
**Setting the viewport**
The viewport is the user's visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen. You should include the viewport `<meta>` element in all your web pages. It gives the browser instructions on how to control the page's dimensions and scaling. The `width=device-width` part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The `initial-scale=1.0` part sets the initial zoom level when the page is first loaded by the browser. [S1]
**The HTML `<script>` element**
The `<script>` element is used to define client-side JavaScripts. The following JavaScript writes "Hello JavaScript!" into an HTML element with `id="demo"`: [S1]
```html
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
```
**The HTML `<base>` element**
The `<base>` element specifies the base URL and/or target for all relative URLs in a page. The `<base>` tag must have either an `href` or a `target` attribute present, or both. There can only be one single `<base>` element in a document. [S1]
```html
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
```
**HTML head elements reference**
| Tag | Description |
|---|---|
| `<head>` | Defines information about the document |
| `<title>` | Defines the title of a document |
| `<base>` | Defines a default address or a default target for all links on a page |
| `<link>` | Defines the relationship between a document and an external resource |
| `<meta>` | Defines metadata about an HTML document |
| `<script>` | Defines a client-side script |
| `<style>` | Defines style information for a document |
[S1]
## 🛠️ 적용 사례 (Applied in summary)
The per-element examples above (title, style, link, meta block, script, base) are the canonical applied snippets for constructing a document head. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Recommended head skeleton:
```html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Meaningful Page Title</title>
<link rel="stylesheet" href="mystyle.css">
</head>
```
Inline page style:
```html
<style>
body {background-color: powderblue;}
</style>
```
Client-side script:
```html
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
```
## ⚖️ 모순 및 업데이트 (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 Introduction]], [[HTML Responsive]], [[HTML Style Guide]], [[HTML File Paths]]
- **참조 맥락:** Referenced when defining document metadata, linking stylesheets/scripts, or configuring the viewport for responsive pages.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Head — https://www.w3schools.com/html/html_head.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Head" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Headings.md
+110
View File
@@ -0,0 +1,110 @@
---
id: html-headings
title: "HTML Headings"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["heading tags", "h1", "h2", "h6", "headings hierarchy", "HTML titles"]
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", "headings", "semantics"]
raw_sources: ["https://www.w3schools.com/html/html_headings.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Headings]]
## 🎯 한 줄 통찰 (One-line insight)
HTML headings `<h1>`–`<h6>` express the importance and structure of content (not merely its size), with `<h1>` most important and `<h6>` least. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Six heading levels** — `<h1>` through `<h6>`. [S1]
- **Importance, not size** — `<h1>` defines the most important heading; `<h6>` the least important. [S1]
- **Browsers add margins** — browsers automatically add some white space (a margin) before and after a heading. [S1]
- **Headings are for structure** — search engines use headings to index the structure and content of web pages; users skim them to grasp a page. [S1]
- **Size is styled with CSS** — use the `style` attribute with `font-size` to change a heading's rendered size. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **One `<h1>` per page** — use `<h1>` for the main title (or logo). [S1]
- **Logical hierarchy** — `<h1>` for page title → `<h2>` for section titles → `<h3>` for subsections, in order. [S1]
- **Don't misuse headings for visuals** — do not use headings just to make text big or bold; use CSS for that. [S1]
- **Resize via inline style** — `<h1 style="font-size:60px;">…</h1>`. [S1]
## 📖 세부 내용 (Details)
**HTML Headings**
HTML headings are titles or subtitles that you want to display on a webpage. They are defined with the `<h1>` to `<h6>` tags. `<h1>` defines the most important heading; `<h6>` defines the least important heading: [S1]
```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```
> **Note:** Browsers automatically add some white space (a margin) before and after a heading. [S1]
**Headings Are Important**
Headings are important. Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings; it is important to use headings to show the document structure. `<h1>` headings should be used for main headings, followed by `<h2>` headings, then the less important `<h3>`, and so on. [S1]
> **Note:** Use HTML headings for headings only. Don't use headings to make text BIG or **bold**. [S1]
**Bigger Headings**
Each HTML heading has a default size. However, you can specify the size for any heading with the `style` attribute, using the CSS `font-size` property: [S1]
```html
<h1 style="font-size:60px;">Heading 1</h1>
```
**Heading reference table**
| Tag | Description |
|---|---|
| `<html>` | Defines the root of an HTML document |
| `<body>` | Defines the document's body |
| `<h1>` to `<h6>` | Defines HTML headings |
## 🛠️ 적용 사례 (Applied in summary)
A typical applied structure (e.g. a travel guide) uses `<h1>` for the page title, `<h2>` for region/section titles, and `<h3>` for country/subsection titles — demonstrating heading hierarchy as document outline. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
All six heading levels (HTML):
```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```
Resizing a heading with inline CSS:
```html
<h1 style="font-size:60px;">Heading 1</h1>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
The source stresses semantics over appearance: headings should encode document structure for search engines and users, not be repurposed to make text big or bold — use CSS `font-size` instead. [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 Basic]], [[HTML Styles]], [[HTML Elements]]
- **참조 맥락:** Referenced whenever structuring page content into titles and sections for readers and search engines.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Headings — https://www.w3schools.com/html/html_headings.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Headings" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Id.md
+176
View File
@@ -0,0 +1,176 @@
---
id: html-id
title: "HTML Id"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["id attribute", "HTML id", "getElementById", "HTML bookmark", "unique id"]
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", "css"]
raw_sources: ["https://www.w3schools.com/html/html_id.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Id]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `id` attribute gives an element a unique identifier — used once per page — that CSS, JavaScript, and same-page bookmark links can target precisely. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Unique per page** — the `id` attribute specifies a unique id for an HTML element; you cannot have more than one element with the same id in an HTML document. [S1]
- **CSS selector** — in a stylesheet an id is referenced with a hash (e.g. `#myHeader`). [S1]
- **Naming rules** — the id name is case sensitive, must contain at least one character, cannot start with a number, and must not contain whitespaces. [S1]
- **Class vs. id** — a class name can be used by multiple HTML elements, while an id name must only be used by one element within the page. [S1]
- **Bookmarks** — the `id` attribute can also be used to create HTML bookmarks (jump links). [S1]
- **JavaScript access** — `getElementById()` selects the single element with a given id. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Unique-target pattern** — assign an id to one element and target it with `#id` in CSS or `getElementById` in JS. [S1]
- **Bookmark/anchor pattern** — give a target element an id and link to it with `href="#id"`. [S1]
- **Cross-page bookmark pattern** — link to an id on another page with `href="page.html#id"`. [S1]
## 📖 세부 내용 (Details)
**The id Attribute.** The HTML `id` attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. The `id` attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id. The syntax for id is: write a hash character (`#`), followed by an id name, then define the CSS properties within curly braces. [S1]
Id with CSS styling — a single element styled via `#myHeader`: [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
```
> **Note:** The id name is case sensitive! The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.). [S1]
**Difference Between Class and ID.** A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page. [S1]
```html
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
```
**HTML Bookmarks with id and Links.** Bookmarks are used to allow readers to jump to specific parts of a webpage. To use a bookmark you must first create it, and then add a link to it. When the link is clicked, the page will scroll down or up to the location with the bookmark. [S1]
Create the bookmark:
```html
<h2 id="C4">Chapter 4</h2>
```
Add a link to the bookmark from within the same page:
```html
<a href="#C4">Jump to Chapter 4</a>
```
Or add a link to the bookmark from another page:
```html
<a href="html_demo.html#C4">Jump to Chapter 4</a>
```
**Using the id Attribute in JavaScript.** The `id` attribute can also be used by JavaScript to perform some tasks for that specific element. JavaScript can access an element with a specific id with the `getElementById()` method. [S1]
```html
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
```
**Chapter Summary.** [S1]
- The `id` attribute is used to specify a unique id for an HTML element.
- The value of the `id` attribute must be unique within the HTML document.
- The `id` attribute is used by CSS and JavaScript to style/select a specific element.
- The value of the `id` attribute is case sensitive.
- The `id` attribute is also used to create HTML bookmarks.
- JavaScript can access an element with a specific id with the `getElementById()` method.
## 🛠️ 적용 사례 (Applied in summary)
The `#myHeader` styled element, the class-vs-id comparison page, the Chapter-4 bookmark, and the `getElementById("myHeader")` content swap are the canonical applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Define and target an id (HTML + CSS):
```html
<style>
#myHeader { background-color: lightblue; }
</style>
<h1 id="myHeader">My Header</h1>
```
Same-page bookmark (HTML):
```html
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
```
Select by id in JavaScript:
```javascript
document.getElementById("myHeader").innerHTML = "Have a nice day!";
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Use `id`** for a single, unique element on the page (targeted with `#id`); must be unique. [S1]
- **Use `class`** when the same styling/selection should apply to multiple elements (targeted with `.class`). [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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Classes]], [[HTML Div]], [[HTML JavaScript]], [[HTML Block and Inline]]
- **참조 맥락:** Referenced whenever a single element must be uniquely styled, scripted, or linked as a bookmark.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Id Attribute — https://www.w3schools.com/html/html_id.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Id Attribute" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Iframes.md
+125
View File
@@ -0,0 +1,125 @@
---
id: html-iframes
title: "HTML Iframes"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["iframe", "inline frame", "embed page", "iframe target", "iframe src"]
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", "embedding"]
raw_sources: ["https://www.w3schools.com/html/html_iframe.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Iframes]]
## 🎯 한 줄 통찰 (One-line insight)
An HTML iframe (`<iframe>`) is an inline frame that embeds another HTML document inside the current page. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<iframe>` embeds a document** — it specifies an inline frame used to embed another document within the current HTML document. [S1]
- **`src` attribute** — defines the URL of the page to embed. [S1]
- **`title` attribute** — it is good practice to always include a `title`; screen readers use it to read out what the iframe content is. [S1]
- **Sizing** — `height` and `width` attributes (in pixels) set the iframe size; CSS `style` can be used instead. [S1]
- **Border control** — use `style="border:none;"` to remove the default border, or a CSS `border` value to customize it. [S1]
- **Link target** — naming an iframe (`name="..."`) lets a link target it so the linked page loads inside the iframe. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Embed pattern** — `<iframe src="url" title="description"></iframe>` to place an external/internal page inside the current one. [S1]
- **Styling pattern** — control size and border with either HTML attributes (`height`/`width`) or inline CSS (`style`). [S1]
- **Named-target pattern** — give the iframe a `name`, then point a link's `target` at that name to load content into the frame. [S1]
## 📖 세부 내용 (Details)
**HTML Iframes.** An HTML iframe is used to display a web page within a web page. The HTML `<iframe>` tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. [S1]
**Iframe Syntax.** [S1]
```html
<iframe src="url" title="description"></iframe>
```
> **Tip:** It is a good practice to always include a `title` attribute for the `<iframe>`. This is used by screen readers to read out what the content of the iframe is. [S1]
**Iframe — Set Height and Width.** Use the `height` and `width` attributes to specify the size of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). [S1]
```html
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
```
Or you can use the CSS `height` and `width` properties: [S1]
```html
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
```
**Iframe — Remove the Border.** By default, an iframe has a border around it. To remove the border, add the `style` attribute and use the CSS `border` property: [S1]
```html
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
```
With CSS, you can also change the size, style, and color of the iframe's border: [S1]
```html
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>
```
**Iframe — Target for a Link.** An iframe can be used as the target frame for a link. The `target` attribute of the link must refer to the `name` attribute of the iframe. [S1]
```html
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
```
**Chapter Summary.** [S1]
- The HTML `<iframe>` tag specifies an inline frame.
- The `src` attribute defines the URL of the page to embed.
- Always include a `title` attribute (for screen readers).
- The `height` and `width` attributes specify the size of the iframe.
- Use `border:none;` to remove the border around the iframe.
**HTML iframe Tag.** [S1]
| Tag | Description |
|---|---|
| `<iframe>` | Defines an inline frame |
## 🛠️ 적용 사례 (Applied in summary)
The `demo_iframe.htm` embeds (sized, borderless, custom-border) and the named `iframe_a` used as a link target are the canonical applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Basic iframe (HTML):
```html
<iframe src="url" title="description"></iframe>
```
Sized, borderless iframe (HTML):
```html
<iframe src="demo_iframe.htm" style="height:200px;width:300px;border:none;" title="Iframe Example"></iframe>
```
Iframe as link target (HTML):
```html
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a>
```
## ⚖️ 모순 및 업데이트 (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 JavaScript]], [[HTML Block and Inline]], [[HTML Tables]]
- **참조 맥락:** Referenced whenever one web page must be embedded inside another, or a link should load content into a named frame.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Iframes — https://www.w3schools.com/html/html_iframe.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Iframes" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Images.md
+212
View File
@@ -0,0 +1,212 @@
---
id: html-images
title: "HTML Images"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["img tag", "src attribute", "alt attribute", "HTML image size", "image as link", "image float"]
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", "images", "media"]
raw_sources: ["https://www.w3schools.com/html/html_images.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Images]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `<img>` tag embeds an image via its required `src` (path) and `alt` (alternate text) attributes; images are linked into the page, not technically inserted. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<img>` tag** — embeds an image in a web page; it is empty (attributes only), has no closing tag, and images are linked to pages rather than inserted into them. [S1]
- **`src` attribute** — specifies the path to the image; the browser fetches it from a web server at load time. [S1]
- **`alt` attribute** — required; provides alternate text describing the image for when it cannot be viewed, and for screen readers. [S1]
- **Size** — set width/height via the `style` attribute or the `width`/`height` attributes (always in pixels); the source suggests using `style`. [S1]
- **Paths** — images can live in a sub-folder (include the folder in `src`) or on another server (use an absolute URL). [S1]
- **Animated GIFs, image links, floating** — HTML allows animated GIFs; nest `<img>` in `<a>` for a link; use CSS `float` to float an image left/right of text. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Embed pattern** — `<img src="url" alt="alternatetext">`. [S1]
- **Sizing pattern** — `style="width:500px;height:600px;"` or `width="500" height="600"`. [S1]
- **Sub-folder / cross-server pattern** — `src="/images/file.gif"` or `src="https://host/path.jpg"`. [S1]
- **Image-link pattern** — `<a href="..."><img ...></a>`. [S1]
- **Float pattern** — `style="float:right;"` / `style="float:left;"`. [S1]
## 📖 세부 내용 (Details)
Images can improve the design and the appearance of a web page. [S1]
**HTML Images Syntax**
The HTML `<img>` tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The `<img>` tag is empty, it contains attributes only, and does not have a closing tag. The two required attributes are `src` (the path to the image) and `alt` (an alternate text for the image). [S1]
```html
<img src="url" alt="alternatetext">
```
**The `src` Attribute**
When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. [S1]
```html
<img src="img_chania.jpg" alt="Flowers in Chania">
```
**The `alt` Attribute**
The required `alt` attribute provides an alternate text for an image, if the user for some reason cannot view it. The value of the `alt` attribute should describe the image. A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. [S1]
```html
<img src="wrongname.gif" alt="Flowers in Chania">
```
**Image Size — Width and Height**
Using the `style` attribute: [S1]
```html
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
```
Using the `width` and `height` attributes (these always define the size in pixels): [S1]
```html
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
```
> **Note:** Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads. [S1]
**Width and Height, or Style?**
The `width`, `height`, and `style` attributes are all valid in HTML. However, the source suggests using the `style` attribute. [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
```
**Images in Another Folder**
If you have your images in a sub-folder, you must include the folder name in the `src` attribute. [S1]
```html
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
```
**Images on Another Server/Website**
Some web sites point to an image on another server. To point to an image on another server, you must specify an absolute (full) URL in the `src` attribute. [S1]
```html
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
```
> **Note:** External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed. [S1]
**Animated Images**
HTML allows animated GIFs. [S1]
```html
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
```
**Image as a Link**
To use an image as a link, put the `<img>` tag inside the `<a>` tag. [S1]
```html
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
```
**Image Floating**
Use the CSS `float` property to let the image float to the right or to the left of a text. [S1]
```html
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
```
**Common Image Formats** [S1]
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
**Chapter Summary** [S1]
- Use the HTML `<img>` element to define an image
- Use the HTML `src` attribute to define the URL of the image
- Use the HTML `alt` attribute to define an alternate text for an image, if it cannot be displayed
- Use the HTML `width` and `height` attributes or the CSS `width` and `height` properties to define the size
- Use the CSS `float` property to let the image float to the left or to the right
> **Note:** Loading large images takes time, and can slow down your web page. Use images carefully. [S1]
**HTML Image Tags** [S1]
| Tag | Description |
|---|---|
| `<img>` | Defines an image |
| `<map>` | Defines an image map |
| `<area>` | Defines a clickable area inside an image map |
| `<picture>` | Defines a container for multiple image resources |
## 🛠️ 적용 사례 (Applied in summary)
The Chania, img_girl, HTML5 icon, animated GIF, image-link, and floating examples above are the canonical applied examples from the source. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Basic image (HTML):
```html
<img src="img_chania.jpg" alt="Flowers in Chania">
```
Sized via style:
```html
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
```
Image as a link:
```html
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
```
Floated image:
```html
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The source notes that `width`/`height` attributes and the `style` attribute are all valid for sizing, but suggests using `style`: [S1]
| Approach | Note |
|---|---|
| `width`/`height` attributes | Valid; always in pixels |
| `style` attribute | Valid; suggested (avoids conflicts with stylesheet `width`/`height`) |
## ⚖️ 모순 및 업데이트 (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 Links]], [[HTML Favicon]], [[HTML CSS]], [[HTML Attributes]]
- **참조 맥락:** Referenced whenever embedding images, sizing them, linking via images, or floating images alongside text.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Images — https://www.w3schools.com/html/html_images.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Images" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Input_Attributes.md
+177
View File
@@ -0,0 +1,177 @@
---
id: html-input-attributes
title: "HTML Input Attributes"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["input attributes", "input element attributes", "form input attributes", "value attribute", "required attribute"]
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", "forms", "input", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_form_attributes.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Input Attributes]]
## 🎯 한 줄 통찰 (One-line insight)
A set of standard attributes — `value`, `readonly`, `disabled`, `size`, `maxlength`, `min`/`max`, `multiple`, `pattern`, `placeholder`, `required`, `step`, `autofocus`, `height`/`width`, `list`, `autocomplete` — refine how an `<input>` field behaves, validates, and presents itself. [S1]
## 🧠 핵심 개념 (Core concepts)
- **value** — sets an initial (default) value for the input field. [S1]
- **readonly vs disabled** — `readonly` blocks editing but the value is still selectable, copyable, and submitted; `disabled` makes the field unusable, unclickable, and its value is **not** submitted. [S1]
- **size** — sets the visible width in characters (default 20). [S1]
- **maxlength** — caps the number of characters; the browser gives no feedback when the limit is reached. [S1]
- **min / max** — set the minimum and maximum allowed value for numeric and date/time inputs. [S1]
- **multiple** — allows entering more than one value (works with `email` and `file`). [S1]
- **pattern** — validates the value against a regular expression. [S1]
- **placeholder** — shows a hint inside the field before the user types. [S1]
- **required** — the field must be filled out before submission. [S1]
- **step** — defines the legal number intervals. [S1]
- **autofocus** — focuses the field automatically on page load. [S1]
- **height / width** — set dimensions for `<input type="image">`; recommended to reserve layout space. [S1]
- **list** — references a `<datalist>` that supplies predefined options. [S1]
- **autocomplete** — turns the browser's value-prediction on or off. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Default value pattern** — `value="..."` pre-fills the field. [S1]
- **Lock-but-submit pattern** — `readonly` keeps a value visible and submittable while preventing edits. [S1]
- **Lock-and-drop pattern** — `disabled` greys out a field and excludes its value from submission. [S1]
- **Regex validation pattern** — `pattern="[A-Za-z]{3}"` enforces format on submit. [S1]
- **Datalist autocomplete pattern** — `<input list="id">` + `<datalist id="id">` gives a typeahead of options. [S1]
## 📖 세부 내용 (Details)
**The value attribute** — specifies an initial value for an input field: [S1]
```html
<input type="text" id="fname" name="fname" value="John">
```
**The readonly attribute** — specifies that the input field is read-only; it cannot be modified, but the user can still highlight and copy the text, and the value is sent when the form is submitted: [S1]
```html
<input type="text" id="fname" name="fname" value="John" readonly>
```
**The disabled attribute** — specifies that the input field is disabled. A disabled field is unusable and un-clickable, and its value will **not** be sent when submitting the form: [S1]
```html
<input type="text" id="fname" name="fname" value="John" disabled>
```
**The size attribute** — specifies the visible width, in characters, of an input field. The default value is 20. It works with `text`, `search`, `tel`, `url`, `email`, and `password`: [S1]
```html
<input type="text" id="fname" name="fname" size="50">
```
**The maxlength attribute** — specifies the maximum number of characters allowed. Once reached, no more input is accepted, and the browser provides no feedback; use JavaScript for a message if needed: [S1]
```html
<input type="text" id="pin" name="pin" maxlength="4" size="4">
```
**The min and max attributes** — specify the minimum and maximum values for input fields of type `number`, `range`, `date`, `datetime-local`, `month`, `time`, and `week`: [S1]
```html
<input type="date" id="datemax" name="datemax" max="1979-12-31">
<input type="number" id="quantity" name="quantity" min="1" max="5">
```
**The multiple attribute** — specifies that the user is allowed to enter more than one value. It works with `email` and `file` input types: [S1]
```html
<input type="file" id="files" name="files" multiple>
```
**The pattern attribute** — specifies a regular expression the input's value is checked against. It works with `text`, `date`, `search`, `url`, `tel`, `email`, and `password`: [S1]
```html
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
```
**The placeholder attribute** — specifies a short hint describing the expected value, shown before the user enters a value. It works with `text`, `search`, `url`, `number`, `tel`, `email`, and `password`: [S1]
```html
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
```
**The required attribute** — specifies that the input field must be filled out before submitting the form. It works with `text`, `search`, `url`, `tel`, `email`, `password`, date pickers, `number`, `checkbox`, `radio`, and `file`: [S1]
```html
<input type="text" id="username" name="username" required>
```
**The step attribute** — specifies the legal number intervals for an input field (e.g. `step="3"` allows ..., -3, 0, 3, 6, ...). It works with `number`, `range`, `date`, `datetime-local`, `month`, `time`, and `week`: [S1]
```html
<input type="number" id="points" name="points" step="3">
```
**The autofocus attribute** — specifies that the input field should automatically get focus when the page loads: [S1]
```html
<input type="text" id="fname" name="fname" autofocus>
```
**The height and width attributes** — specify the height and width of an `<input type="image">` element. It is recommended to always specify both so the browser can reserve the right amount of space before the image loads (preventing layout flicker): [S1]
```html
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
```
**The list attribute** — refers to a `<datalist>` element that contains pre-defined options for an `<input>`: [S1]
```html
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
```
**The autocomplete attribute** — specifies whether a form or input field should have autocomplete on or off. When on, the browser automatically completes values based on values the user entered before. It works with `<form>` and the input types `text`, `search`, `url`, `tel`, `email`, `password`, date pickers, `range`, and `color`. [S1]
**Note:** Input restrictions are not foolproof; users can bypass the HTML, so always validate input on the server as well. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The examples above are the canonical applied uses: a prefilled name (`value`), a copy-only field (`readonly`), a 4-digit PIN (`maxlength`/`size`), a regex-validated country code (`pattern`), a multi-file upload (`multiple`), and a browser typeahead (`list` + `<datalist>`). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Required + placeholder field (HTML):
```html
<input type="text" id="username" name="username" placeholder="username" required>
```
Datalist typeahead (HTML):
```html
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
```
Bounded numeric step (HTML):
```html
<input type="number" id="points" name="points" min="0" max="9" step="3">
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. The key conceptual subtlety is `readonly` vs `disabled`: both prevent edits, but only `readonly` submits its value and allows selection/copy — `disabled` drops the value entirely. [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 Input Types]], [[HTML Input Form Attributes]], [[HTML Forms]], [[HTML Form Elements]]
- **참조 맥락:** Referenced when configuring validation, defaults, and UX behavior of individual form fields.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Input Attributes — https://www.w3schools.com/html/html_form_attributes.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Input Attributes" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Input_Form_Attributes.md
+152
View File
@@ -0,0 +1,152 @@
---
id: html-input-form-attributes
title: "HTML Input Form Attributes"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["input form attributes", "formaction", "formmethod", "formtarget", "formnovalidate", "form override attributes"]
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", "forms", "input", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_form_attributes_form.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Input Form Attributes]]
## 🎯 한 줄 통찰 (One-line insight)
The `form*` family of `<input>` attributes (`form`, `formaction`, `formenctype`, `formmethod`, `formtarget`, `formnovalidate`) lets an individual input override its parent `<form>`'s submission behavior — enabling multiple submit buttons with different destinations, methods, encodings, or validation within one form. [S1]
## 🧠 핵심 개념 (Core concepts)
- **form** — associates an input with a `<form>` by that form's `id`, so the input can live **outside** the `<form>` element and still be part of it. [S1]
- **formaction** — specifies the URL that processes the input when submitted; overrides the form's `action`. Works with `submit` and `image`. [S1]
- **formenctype** — specifies how form data is encoded on submit (only for `method="post"`); overrides the form's `enctype`. Works with `submit` and `image`. [S1]
- **formmethod** — specifies the HTTP method (GET/POST) for submission; overrides the form's `method`. Works with `submit` and `image`. [S1]
- **formtarget** — specifies where to display the response after submission; overrides the form's `target`. Works with `submit` and `image`. [S1]
- **formnovalidate** — specifies that this input should bypass validation on submit; overrides the form's `novalidate`. Works with `submit`. [S1]
- **novalidate (form-level)** — a `<form>` attribute that disables validation for all data on submission. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Detached input pattern** — `<input ... form="form1">` ties an input outside the `<form>` to the form whose `id="form1"`. [S1]
- **Multiple-destination pattern** — two `<input type="submit">` in one form, one with `formaction` pointing elsewhere, give two submit targets. [S1]
- **Per-button method override** — one submit uses the form's GET, another adds `formmethod="post"`. [S1]
- **Skip-validation submit** — a secondary submit with `formnovalidate` lets users submit without passing validation (e.g. "save draft"). [S1]
## 📖 세부 내용 (Details)
**The form attribute** — specifies which form an `<input>` element belongs to. Its value must equal the `id` of the `<form>`. This lets an input placed outside the `<form>` element still be submitted with it: [S1]
```html
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
```
**The formaction attribute** — specifies the URL of the file that will process the input when the form is submitted; it overrides the `action` attribute of the `<form>`. It works with `type="submit"` and `type="image"`: [S1]
```html
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
```
**The formenctype attribute** — specifies how the form data should be encoded when submitted (only for `method="post"`); it overrides the `enctype` attribute of the `<form>`. It works with `type="submit"` and `type="image"`: [S1]
```html
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
```
**The formmethod attribute** — defines the HTTP method (GET or POST) for sending form data to the action URL; it overrides the `method` attribute of the `<form>`. GET appends data to the URL; POST sends data as an HTTP transaction (more secure for sensitive data). It works with `type="submit"` and `type="image"`: [S1]
```html
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
```
**The formtarget attribute** — specifies a name or keyword indicating where to display the response after submitting the form; it overrides the `target` attribute of the `<form>`. It works with `type="submit"` and `type="image"`: [S1]
```html
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
```
**The formnovalidate attribute** — specifies that an `<input>` element should not be validated when submitted; it overrides the `novalidate` attribute of the `<form>`. It works with `type="submit"`: [S1]
```html
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>
```
**The novalidate attribute (form-level)** — a `<form>` attribute that, when present, specifies that all of the form data should not be validated when submitted. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The examples above are the canonical applied uses: a "Last name" field rendered outside the form yet submitted with it (`form`), a dual "Submit" / "Submit as Admin" pair routing to different handlers (`formaction`), a GET/POST toggle (`formmethod`), opening the response in a new tab (`formtarget`), and a "Submit without validation" escape hatch (`formnovalidate`). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Two submit buttons → two destinations (HTML):
```html
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
```
Input attached to a form by id (HTML):
```html
<input type="text" id="lname" name="lname" form="form1">
```
Skip-validation submit (HTML):
```html
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. The unifying principle: each `form*` attribute on a submit/image input is an **override** of the corresponding `<form>` attribute, scoped to the moment that button submits the form. [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 Input Attributes]], [[HTML Input Types]], [[HTML Forms]], [[HTML Form Elements]]
- **참조 맥락:** Referenced when a single form needs multiple submit buttons with differing destinations, methods, or validation rules.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Input Form Attributes — https://www.w3schools.com/html/html_form_attributes_form.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Input Form Attributes" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Input_Types.md
+217
View File
@@ -0,0 +1,217 @@
---
id: html-input-types
title: "HTML Input Types"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["input types", "input type attribute", "HTML form input types", "type attribute", "form controls"]
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", "forms", "input", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_form_input_types.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Input Types]]
## 🎯 한 줄 통찰 (One-line insight)
The `type` attribute of the `<input>` element selects the kind of form control rendered — from plain text fields to color pickers, date pickers, and sliders — with `text` as the default. [S1]
## 🧠 핵심 개념 (Core concepts)
- **The `type` attribute drives the control** — changing `type` changes how the input looks and behaves. The default is `type="text"` (a single-line text field). [S1]
- **22 input types** — HTML defines: `text`, `password`, `submit`, `reset`, `radio`, `checkbox`, `button`, `color`, `date`, `datetime-local`, `email`, `image`, `file`, `hidden`, `month`, `number`, `range`, `search`, `tel`, `time`, `url`, `week`. [S1]
- **Grouped radio buttons** — radio buttons that share the same `name` attribute form a mutually exclusive group (only one can be selected). [S1]
- **Submit vs reset vs button** — `submit` sends the form to the `action` URL, `reset` restores all defaults, and `button` is a generic clickable button typically wired to JavaScript. [S1]
- **Validation comes for free with semantic types** — `email`, `url`, `number`, and date/time types provide built-in browser pickers and/or validation. [S1]
- **Restrictions** — input behavior can be constrained with attributes such as `min`, `max`, `step`, `maxlength`, `pattern`, `required`, `readonly`, and `disabled`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Typed control pattern** — `<input type="<kind>" id="..." name="...">` selects the control. [S1]
- **Radio group pattern** — multiple `<input type="radio">` sharing one `name` produce a single-choice group. [S1]
- **Numeric bounds pattern** — `type="number"`/`type="range"` combine with `min`, `max`, and `step` to constrain values. [S1]
- **Date bounds pattern** — `type="date"` accepts `min`/`max` to restrict the selectable range. [S1]
- **Hidden state pattern** — `type="hidden"` carries data that is submitted but not shown to the user. [S1]
## 📖 세부 내용 (Details)
The `<input>` element's `type` attribute determines which form control is displayed. If no `type` is given, the default is `text`. [S1]
**type="text"** — defines a single-line text input field: [S1]
```html
<input type="text" id="fname" name="fname">
<input type="text" id="lname" name="lname">
```
**type="password"** — defines a password field whose characters are masked: [S1]
```html
<input type="password" id="pwd" name="pwd">
```
**type="submit"** — defines a button that submits form data to a form-handler (the page specified in the form's `action` attribute): [S1]
```html
<input type="submit" value="Submit">
```
**type="reset"** — defines a reset button that resets all form values to their defaults: [S1]
```html
<input type="reset" value="Reset">
```
**type="radio"** — defines a radio button; radio buttons sharing the same `name` let the user choose only one option from a set: [S1]
```html
<input type="radio" id="html" name="fav_language" value="HTML">
<input type="radio" id="css" name="fav_language" value="CSS">
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
```
**type="checkbox"** — defines a checkbox; checkboxes let a user select zero or more options from a set: [S1]
```html
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
```
**type="button"** — defines a clickable button, commonly activated with JavaScript: [S1]
```html
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
```
**type="color"** — defines an input field with a color picker: [S1]
```html
<input type="color" id="favcolor" name="favcolor">
```
**type="date"** — defines an input field with a date picker. The `min` and `max` attributes restrict the selectable dates: [S1]
```html
<input type="date" id="datemax" name="datemax" max="1979-12-31">
<input type="date" id="datemin" name="datemin" min="2000-01-02">
```
**type="datetime-local"** — defines a date-and-time input field, with no time zone: [S1]
```html
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
```
**type="email"** — defines a field for an e-mail address; its value is automatically validated for email format. Some smartphones recognize the email type and add ".com" to the keyboard. [S1]
```html
<input type="email" id="email" name="email">
```
**type="file"** — defines a file-select field and a "Browse" button for file uploads: [S1]
```html
<input type="file" id="myfile" name="myfile">
```
**type="hidden"** — defines a hidden input field that is not visible to users. Hidden fields store data the user should not see or modify when the form is submitted (the value is still visible in browser developer tools). [S1]
```html
<input type="hidden" id="custId" name="custId" value="3487">
```
**type="image"** — defines an image used as a submit button: [S1]
```html
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
```
**type="month"** — lets the user select a month and year: [S1]
```html
<input type="month" id="bdaymonth" name="bdaymonth">
```
**type="number"** — defines a numeric input field; `min`, `max`, and `step` restrict the legal values: [S1]
```html
<input type="number" id="quantity" name="quantity" min="1" max="5">
```
**type="range"** — defines a control for entering a number whose exact value is not important (rendered as a slider). The default range is 0 to 100; use `min`, `max`, and `step` to change it: [S1]
```html
<input type="range" id="vol" name="vol" min="0" max="50">
```
**type="search"** — defines a text field for search queries: [S1]
```html
<input type="search" id="gsearch" name="gsearch">
```
**type="tel"** — defines a field for a telephone number; the `pattern` attribute can enforce a format: [S1]
```html
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
```
**type="time"** — lets the user select a time (no time zone): [S1]
```html
<input type="time" id="appt" name="appt">
```
**type="url"** — defines a field for a URL address; its value is automatically validated. Some smartphones add ".com" to the keyboard for this type. [S1]
```html
<input type="url" id="homepage" name="homepage">
```
**type="week"** — lets the user select a week and year: [S1]
```html
<input type="week" id="week" name="week">
```
**Input restrictions** — common attributes used to constrain input values: [S1]
| Attribute | Description |
|---|---|
| `checked` | Specifies that an input field should be pre-selected when the page loads (for `type="checkbox"` or `type="radio"`) |
| `disabled` | Specifies that an input field should be disabled |
| `max` | Specifies the maximum value for an input field |
| `maxlength` | Specifies the maximum number of characters for an input field |
| `min` | Specifies the minimum value for an input field |
| `pattern` | Specifies a regular expression to check the input value against |
| `readonly` | Specifies that an input field is read only (cannot be changed) |
| `required` | Specifies that an input field is required (must be filled out) |
| `size` | Specifies the width (in characters) of an input field |
| `step` | Specifies the legal number intervals for an input field |
| `value` | Specifies the default value for an input field |
**Note:** Input restrictions provide no foolproof security; malicious users can bypass HTML, so always validate input on the server too. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The typed-input examples above are the canonical applied uses: a login field (`password`), a single-choice question (grouped `radio`), a multi-select (`checkbox`), a bounded quantity (`number` with `min`/`max`), and a hidden customer id (`hidden`). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Single-choice radio group (HTML):
```html
<input type="radio" id="html" name="fav_language" value="HTML">
<input type="radio" id="css" name="fav_language" value="CSS">
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
```
Bounded number field (HTML):
```html
<input type="number" id="quantity" name="quantity" min="1" max="5">
```
Pattern-validated telephone field (HTML):
```html
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note the source's security caveat: client-side input restrictions are convenience/UX features, not security controls — server-side validation remains mandatory. [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 Forms]], [[HTML Input Attributes]], [[HTML Input Form Attributes]], [[HTML Form Elements]]
- **참조 맥락:** Referenced whenever choosing the right form control for a given piece of user data.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Input Types — https://www.w3schools.com/html/html_form_input_types.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Input Types" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Introduction.md
+158
View File
@@ -0,0 +1,158 @@
---
id: html-introduction
title: "HTML Introduction"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML", "HyperText Markup Language", "HTML5", "markup language", "HTML intro"]
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", "markup", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_intro.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Introduction]]
## 🎯 한 줄 통찰 (One-line insight)
HTML (HyperText Markup Language) is the standard markup language that describes the *structure* of a web page through a series of elements that tell the browser how to display content. [S1]
## 🧠 핵심 개념 (Core concepts)
- **HTML = HyperText Markup Language** — the standard markup language for creating web pages. It describes the *structure* of a page, not its logic or styling. [S1]
- **Elements** — HTML is a series of elements that label pieces of content (headings, paragraphs, links, …) so the browser knows how to render them. [S1]
- **The browser's role** — a web browser (Chrome, Edge, Firefox, Safari) reads HTML and displays it. The browser does **not** show the tags themselves; it uses them to decide how to render the document. [S1]
- **Document skeleton** — every HTML5 document opens with `<!DOCTYPE html>` and nests content inside `<html>` → `<head>` (meta info) and `<body>` (visible content). [S1]
- **HTML5** — the current standard this tutorial follows. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Element pattern** — `<tagname>content</tagname>`: a start tag, content, and an end tag (e.g. `<h1>My First Heading</h1>`). [S1]
- **Empty elements** — some elements have no content and no end tag (e.g. `<br>`). [S1]
- **Nesting / containment** — `<head>` holds metadata (like `<title>`); `<body>` holds everything visible; `<html>` is the single root that wraps both. [S1]
- **Title surfacing** — `<title>` content appears in the browser's title bar / tab, not in the page body. [S1]
## 📖 세부 내용 (Details)
**What is HTML?**
HTML stands for **Hyper Text Markup Language** and is the standard markup language for creating web pages. It describes the structure of a web page using a series of elements, which tell the browser how to display the content. Elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", and so on. [S1]
**A simple HTML document**
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
Each part explained: [S1]
| Part | Meaning |
|---|---|
| `<!DOCTYPE html>` | Declares that this document is an HTML5 document |
| `<html>` | The root element of an HTML page |
| `<head>` | Contains meta information about the page |
| `<title>` | Specifies a title shown in the browser's title bar / tab |
| `<body>` | The document body — container for all visible content |
| `<h1>` | Defines a large heading |
| `<p>` | Defines a paragraph |
**What is an HTML element?**
An HTML element is defined by a start tag, some content, and an end tag: `<tagname>Content goes here...</tagname>`. Examples: `<h1>My First Heading</h1>`, `<p>My first paragraph.</p>`. Some elements are *empty* (like `<br>`) — they have no content and no end tag. [S1]
**Web browsers**
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. A browser does not display the HTML tags but uses them to determine how to render the document. [S1]
**HTML page structure**
A visualization of an HTML page's nesting:
```html
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
```
Content inside `<body>` is displayed by the browser; content inside `<title>` appears in the title bar / tab. [S1]
**HTML history**
| Year | Milestone |
|---|---|
| 1989 | Tim Berners-Lee invented the WWW |
| 1991 | Tim Berners-Lee invented HTML |
| 1993 | Dave Raggett drafted HTML+ |
| 1995 | HTML Working Group defined HTML 2.0 |
| 1997 | W3C Recommendation: HTML 3.2 |
| 1999 | W3C Recommendation: HTML 4.01 |
| 2000 | W3C Recommendation: XHTML 1.0 |
| 2008 | WHATWG HTML5 First Public Draft |
| 2012 | WHATWG HTML5 Living Standard |
| 2014 | W3C Recommendation: HTML5 |
| 2016 | W3C Candidate Recommendation: HTML 5.1 |
| 2017 | W3C Recommendations: HTML5.1 2nd Edition & HTML5.2 |
This tutorial follows the latest HTML5 standard. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The "simple HTML document" above is itself the canonical minimal applied example: a complete, valid HTML5 page. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Minimal valid HTML5 page (HTML / HTML5):
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
```
Single element pattern:
```html
<h1>My First Heading</h1>
```
Empty element (no end tag):
```html
<br>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note the historical shift of HTML stewardship: HTML5 began as a WHATWG draft (2008) and "Living Standard" (2012) before the W3C Recommendation (2014) — reflecting that modern HTML is maintained as a continuously updated living standard rather than fixed versioned releases. [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 Elements]], [[HTML Basic]], [[HTML Attributes]], [[HTML vs XHTML]]
- **참조 맥락:** The entry point referenced whenever building or explaining the structure of any web page.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Introduction — https://www.w3schools.com/html/html_intro.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Introduction" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_JavaScript.md
+118
View File
@@ -0,0 +1,118 @@
---
id: html-javascript
title: "HTML JavaScript"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["script tag", "HTML script", "noscript", "client-side script", "JavaScript in HTML"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "javascript"]
raw_sources: ["https://www.w3schools.com/html/html_scripts.asp"]
applied_in: []
github_commit: ""
---
# [[HTML JavaScript]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `<script>` tag embeds client-side JavaScript that can dynamically change a page's content, styles, and attributes, while `<noscript>` supplies fallback content when scripting is unavailable. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<script>` defines a client-side script** — JavaScript that runs in the browser. [S1]
- **Inline or external** — the `<script>` element either contains script statements, or points to an external script file through the `src` attribute. [S1]
- **What JavaScript can do** — common uses include image manipulation, form validation, and dynamic changes of content. [S1]
- **Changing content/style/attributes** — JavaScript can set an element's `innerHTML`, its `style` properties, and its attributes (e.g. an image `src`). [S1]
- **`<noscript>` fallback** — defines alternate content to display to users who have disabled scripts or whose browser doesn't support scripts. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Content-change pattern** — select an element by id and set its `innerHTML`. [S1]
- **Style-change pattern** — set `style.fontSize`, `style.color`, `style.backgroundColor`, etc. on a selected element. [S1]
- **Attribute-change pattern** — set an element attribute such as an image `src`. [S1]
- **Graceful-degradation pattern** — pair a `<script>` with a `<noscript>` block for non-scripting browsers. [S1]
## 📖 세부 내용 (Details)
**The HTML `<script>` Tag.** The HTML `<script>` tag is used to define a client-side script (JavaScript). The `<script>` element either contains script statements, or it points to an external script file through the `src` attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. [S1]
To select an HTML element, JavaScript often uses `document.getElementById(id)`. This JavaScript example writes "Hello JavaScript!" into an HTML element with `id="demo"`: [S1]
```javascript
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
```
**A Taste of JavaScript.** JavaScript can change content: [S1]
```javascript
document.getElementById("demo").innerHTML = "Hello JavaScript!";
```
JavaScript can change styles: [S1]
```javascript
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
```
JavaScript can change attributes (here, an image source): [S1]
```javascript
document.getElementById("image").src = "picture.gif";
```
**The HTML `<noscript>` Tag.** The HTML `<noscript>` tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts. [S1]
```javascript
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
```
**HTML Script Tags.** [S1]
| Tag | Description |
|---|---|
| `<script>` | Defines a client-side script |
| `<noscript>` | Defines an alternate content for users that do not support client-side scripts |
## 🛠️ 적용 사례 (Applied in summary)
The `innerHTML` content swap, the style changes (font size / color / background), the image `src` change, and the `<noscript>` fallback are the canonical applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Inline script changing content (HTML + JS):
```html
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
```
Change style via JS:
```javascript
document.getElementById("demo").style.color = "red";
```
Fallback for no-script browsers (HTML):
```html
<noscript>Sorry, your browser does not support JavaScript!</noscript>
```
## ⚖️ 모순 및 업데이트 (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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Id]], [[HTML Classes]], [[HTML Div]], [[HTML Iframes]]
- **참조 맥락:** Referenced whenever a page needs client-side behavior — dynamic content, styling, validation — or a no-script fallback.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML JavaScript — https://www.w3schools.com/html/html_scripts.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML JavaScript" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Layout.md
+112
View File
@@ -0,0 +1,112 @@
---
id: html-layout
title: "HTML Layout"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML layout elements", "page layout", "semantic layout", "CSS layout techniques", "header nav footer", "web page structure"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "layout", "semantic"]
raw_sources: ["https://www.w3schools.com/html/html_layout.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Layout]]
## 🎯 한 줄 통찰 (One-line insight)
Web pages are commonly built from semantic layout elements (header, nav, section, article, aside, footer, details, summary) and arranged with CSS layout techniques such as frameworks, float, flexbox, and grid. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Multi-column display** — websites often display content in multiple columns, like a magazine or a newspaper. [S1]
- **Semantic layout elements** — HTML provides elements that describe the role of each part of a page (header, nav, section, article, aside, footer, details, summary). [S1]
- **Layout techniques** — the page structure can be arranged using CSS frameworks, CSS float, CSS flexbox, or CSS grid. [S1]
- **Semantics cross-reference** — semantic elements are described further in the HTML Semantics chapter. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Header / footer pattern** — `<header>` and `<footer>` bracket a document or section. [S1]
- **Navigation block** — `<nav>` groups a set of navigation links. [S1]
- **Content grouping** — `<section>` for thematic sections, `<article>` for independent self-contained content, `<aside>` for sidebar-style related content. [S1]
- **Disclosure widget** — `<details>` + `<summary>` for content the user can open and close on demand. [S1]
- **Layout strategy selection** — choose a CSS technique (framework, float, flexbox, grid) for the visual arrangement. [S1]
## 📖 세부 내용 (Details)
**HTML layout elements**
Websites often display content in multiple columns (like a magazine or a newspaper). HTML has several semantic elements that define the different parts of a web page: [S1]
| Element | Description |
|---|---|
| `<header>` | Defines a header for a document or a section |
| `<nav>` | Defines a set of navigation links |
| `<section>` | Defines a section in a document |
| `<article>` | Defines independent, self-contained content |
| `<aside>` | Defines content aside from the content (like a sidebar) |
| `<footer>` | Defines a footer for a document or a section |
| `<details>` | Defines additional details that the user can open and close on demand |
| `<summary>` | Defines a heading for the `<details>` element |
You can read more about semantic elements in the HTML Semantics chapter. [S1]
**HTML layout techniques**
There are four techniques to create multi-column layouts. Each technique has its pros and cons: [S1]
- **CSS framework** — if you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap. [S1]
- **CSS float** — you can create an entire web layout using the CSS `float` property. Float is easy to learn — you just need to remember how the `float` and `clear` properties work. A disadvantage is that floating elements are tied to the document flow, which may harm flexibility. [S1]
- **CSS flexbox** — use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. [S1]
- **CSS grid** — the CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The semantic elements table and the four CSS techniques are themselves the applied guidance: combine semantic structure (header/nav/section/article/aside/footer) with one CSS technique (framework, float, flexbox, or grid) to build a page. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Semantic page skeleton (composed from the layout elements described in the source):
```html
<header>...</header>
<nav>...</nav>
<section>
<article>...</article>
<aside>...</aside>
</section>
<footer>...</footer>
```
Disclosure widget:
```html
<details>
<summary>Heading</summary>
...additional details...
</details>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **CSS framework (W3.CSS / Bootstrap)** — fastest way to create a layout. [S1]
- **CSS float** — easy to learn (`float` + `clear`), but floating elements are tied to the document flow, which may harm flexibility. [S1]
- **CSS flexbox** — predictable behavior across different screen sizes and display devices. [S1]
- **CSS grid** — row/column grid system that avoids the need for floats and positioning. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Semantics]], [[HTML Responsive]], [[HTML Introduction]], [[HTML Head]]
- **참조 맥락:** Referenced when structuring the overall arrangement of a web page using semantic regions and a CSS layout technique.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Layout — https://www.w3schools.com/html/html_layout.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Layout" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Links.md
+154
View File
@@ -0,0 +1,154 @@
---
id: html-links
title: "HTML Links"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML hyperlinks", "a tag", "href attribute", "target attribute", "mailto link", "HTML anchor"]
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", "links", "hyperlinks"]
raw_sources: ["https://www.w3schools.com/html/html_links.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Links]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `<a>` tag defines a hyperlink, using the `href` attribute for the destination and the `target` attribute to control where the linked document opens. [S1]
## 🧠 핵심 개념 (Core concepts)
- **The `<a>` tag** — defines a hyperlink; syntax is `<a href="url">link text</a>`, where `href` indicates the destination. [S1]
- **The `target` attribute** — controls where the link opens; values are `_self` (default, same window), `_blank` (new tab/window), `_parent` (parent frame), and `_top` (full window). [S1]
- **Absolute vs relative URLs** — absolute URLs are full web addresses; a relative URL links to a page within the same website. [S1]
- **Image as a link** — put an `<img>` tag inside the `<a>` tag. [S1]
- **Email link** — use `mailto:` inside `href` to open the user's email program. [S1]
- **Button as a link** — requires JavaScript (an `onclick` handler that sets `document.location`). [S1]
- **The `title` attribute** — specifies extra information, most often shown as a tooltip on hover. [S1]
- **Link color states** — an unvisited link is underlined and blue, a visited link is underlined and purple, an active link is underlined and red. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Basic link pattern** — `<a href="url">link text</a>`. [S1]
- **New-tab pattern** — `<a href="url" target="_blank">…</a>`. [S1]
- **Image-link pattern** — nest `<img>` inside `<a>`. [S1]
- **Email pattern** — `<a href="mailto:address">…</a>`. [S1]
- **Button-link pattern** — `<button onclick="document.location='url'">…</button>`. [S1]
- **Tooltip pattern** — add a `title` attribute to the `<a>` tag. [S1]
## 📖 세부 내용 (Details)
**Link syntax** — the HTML `<a>` tag defines a hyperlink; it has the following syntax: [S1]
```html
<a href="url">link text</a>
```
**Basic link** — a link to W3Schools.com: [S1]
```html
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
```
**The `target` attribute** — use `target="_blank"` to open the linked document in a new browser window or tab. Target values are `_self` (default), `_blank`, `_parent`, and `_top`. [S1]
```html
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
```
**Absolute vs relative URLs** — a local link (a link to a page within the same website) is specified with a relative URL: [S1]
```html
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
```
**Image as a link** — to use an image as a link, just put the `<img>` tag inside the `<a>` tag: [S1]
```html
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
```
**Email link** — use `mailto:` inside the `href` attribute to create a link that opens the user's email program: [S1]
```html
<a href="mailto:someone@example.com">Send email</a>
```
**Button as a link** — to use an HTML button as a link, you have to add some JavaScript code: [S1]
```html
<button onclick="document.location='default.asp'">HTML Tutorial</button>
```
**Link title attribute** — the `title` attribute specifies extra information about an element; the information is most often shown as a tooltip text: [S1]
```html
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
```
**Link color states** — by default: an unvisited link is underlined and blue; a visited link is underlined and purple; an active link is underlined and red. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The W3Schools basic link, the new-tab link, the image link, the mailto link, and the button link above are the canonical applied examples from the source. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Basic hyperlink (HTML):
```html
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
```
Open in a new tab:
```html
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
```
Image as a link:
```html
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
```
Email link:
```html
<a href="mailto:someone@example.com">Send email</a>
```
Button as a link:
```html
<button onclick="document.location='default.asp'">HTML Tutorial</button>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The source distinguishes the four `target` values and absolute vs relative URLs: [S1]
| Choice | Meaning |
|---|---|
| `target="_self"` | Open in the same window (default) |
| `target="_blank"` | Open in a new window or tab |
| `target="_parent"` | Open in the parent frame |
| `target="_top"` | Open in the full body of the window |
| Absolute URL | Full web address (e.g. `https://www.w3.org/`) |
| Relative URL | Page within the same website (e.g. `html_images.asp`) |
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Images]], [[HTML Attributes]], [[HTML Page Title]], [[HTML Introduction]]
- **참조 맥락:** Referenced whenever creating navigation, hyperlinks, email links, image links, or button-based navigation.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Links — https://www.w3schools.com/html/html_links.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Links" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Lists.md
+125
View File
@@ -0,0 +1,125 @@
---
id: html-lists
title: "HTML Lists"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML list", "unordered list", "ordered list", "description list", "ul ol li"]
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", "lists"]
raw_sources: ["https://www.w3schools.com/html/html_lists.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Lists]]
## 🎯 한 줄 통찰 (One-line insight)
HTML lists group related items as unordered (bulleted) lists, ordered (numbered) lists, or description lists that pair terms with their descriptions. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Unordered list (`<ul>`)** — a list of items where order does not matter; items show with bullet markers by default. Each item is an `<li>`. [S1]
- **Ordered list (`<ol>`)** — a list where order matters; items show numbered by default. Each item is an `<li>`. [S1]
- **List item (`<li>`)** — the element used for each item inside both `<ul>` and `<ol>`. [S1]
- **Description list (`<dl>`)** — a list of terms with a description of each term, using `<dt>` for the term and `<dd>` for its description. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Container + item pattern** — both unordered and ordered lists wrap a series of `<li>` items in a single list container (`<ul>` or `<ol>`). [S1]
- **Term/description pairing pattern** — a description list alternates `<dt>` (term) and `<dd>` (description) pairs inside `<dl>`. [S1]
## 📖 세부 내용 (Details)
**Unordered HTML List.** An unordered list starts with the `<ul>` tag. Each list item starts with the `<li>` tag. The list items will be marked with bullets (small black circles) by default. [S1]
```html
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
```
**Ordered HTML List.** An ordered list starts with the `<ol>` tag. Each list item starts with the `<li>` tag. The list items will be marked with numbers by default. [S1]
```html
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
```
**HTML Description Lists.** HTML also supports description lists. A description list is a list of terms, with a description of each term. The `<dl>` tag defines the description list, the `<dt>` tag defines the term (name), and the `<dd>` tag describes each term. [S1]
```html
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
```
**HTML List Tags.** [S1]
| Tag | Description |
|---|---|
| `<ul>` | Defines an unordered list |
| `<ol>` | Defines an ordered list |
| `<li>` | Defines a list item |
| `<dl>` | Defines a description list |
| `<dt>` | Defines a term in a description list |
| `<dd>` | Describes the term in a description list |
## 🛠️ 적용 사례 (Applied in summary)
The "Coffee / Tea / Milk" examples above are the canonical applied examples of each list type. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Unordered list (HTML):
```html
<ul>
<li>Item</li>
</ul>
```
Ordered list (HTML):
```html
<ol>
<li>Item</li>
</ol>
```
Description list (HTML):
```html
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Use `<ul>`** when the order of items does not matter (rendered with bullets). [S1]
- **Use `<ol>`** when order matters (rendered with numbers). [S1]
- **Use `<dl>`** when each item is a term paired with a description. [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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Tables]], [[HTML Block and Inline]], [[HTML Div]], [[HTML Elements]]
- **참조 맥락:** Referenced whenever a sequence or grouping of related items must be displayed on a web page.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Lists — https://www.w3schools.com/html/html_lists.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Lists" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Media.md
+102
View File
@@ -0,0 +1,102 @@
---
id: html-media
title: "HTML Media"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML multimedia", "media formats", "web media", "audio formats", "video formats"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "media", "multimedia", "html5", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_media.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Media]]
## 🎯 한 줄 통찰 (One-line insight)
Web multimedia is anything you can see or hear — images, music, sound, video, animations — but only a small set of formats (MP4/WebM/Ogg for video, MP3/WAV/Ogg for audio) is actually supported by the HTML standard across browsers. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Multimedia is broad** — it can be almost anything you can hear or see: images, music, sound, videos, records, films, animations, and more. [S1]
- **Browsers evolved** — early web browsers supported only text in a single font and color; modern browsers support colors, fonts, images, and multimedia. [S1]
- **Formats matter** — multimedia files have their own formats and extensions; only some are supported by HTML. [S1]
- **HTML-supported video** — only MP4, WebM, and Ogg video are supported by the HTML standard. [S1]
- **HTML-supported audio** — only MP3, WAV, and Ogg audio are supported by the HTML standard. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Format-by-extension pattern** — a media file's container/codec is identified by its extension (.mp4, .webm, .ogg, .mp3, .wav). [S1]
- **HTML-standard subset pattern** — many formats exist, but author for the HTML-supported subset (MP4/WebM/Ogg, MP3/WAV/Ogg) for cross-browser playback. [S1]
- **Recommended-format pattern** — MP4 is supported by all browsers and recommended by YouTube; MP3 is supported by all browsers for audio. [S1]
## 📖 세부 내용 (Details)
**What is multimedia?** Multimedia on the web is sound, music, videos, movies, and animations. Multimedia comes in many different formats — almost anything you can hear or see: images, music, sound, videos, records, films, animations, and more. [S1]
**Browser support** — web pages often contain multimedia elements of different types and formats. Early web browsers had support for only text, limited to a single font in a single color. Later browsers added support for colors, fonts, images, and multimedia. [S1]
**Common video formats** — multimedia elements (like audio or video) are stored in media files; the most common way to discover the type is to look at the file extension: [S1]
| Format | File | Description |
|---|---|---|
| MPEG | .mpg, .mpeg | One of the first popular video formats for the web; no longer supported in HTML |
| AVI | .avi | Developed by Microsoft; commonly used in video cameras and TV hardware; plays well on Windows but not in web browsers |
| WMV | .wmv | Windows Media Video, developed by Microsoft; plays well on Windows but not in web browsers |
| QuickTime | .mov | Developed by Apple; plays well on Apple computers but not in web browsers |
| RealVideo | .rm, .ram | Developed by Real Media for video streaming with low bandwidths; does not play in web browsers |
| Flash | .swf, .flv | Developed by Macromedia, often requires an extra plug-in; no longer supported |
| Ogg | .ogg | Theora Ogg, supported by HTML |
| WebM | .webm | Developed by Mozilla, Opera, Adobe, and Google; supported by HTML |
| MP4 | .mp4 | Designed to store video and audio; commonly used in video cameras and TV hardware; supported by all browsers and recommended by YouTube |
**Note:** Only MP4, WebM, and Ogg video are supported by the HTML standard. [S1]
**Common audio formats** — [S1]
| Format | File | Description |
|---|---|---|
| MIDI | .mid, .midi | Format for electronic music devices; very small files; not supported directly by web browsers |
| RealAudio | .rm, .ram | Developed by Real Media for audio streaming at low bandwidths; does not play in web browsers |
| WMA | .wma | Windows Media Audio; plays well on Windows but not in web browsers |
| AAC | .aac | Advanced Audio Coding, developed by Apple as the default format for iTunes; does not play in web browsers |
| WAV | .wav | Developed by IBM and Microsoft; plays well on Windows, Macintosh, and Linux; supported by HTML |
| Ogg | .ogg | Developed by the Xiph.Org Foundation; supported by HTML |
| MP3 | .mp3 | The most popular format for music players; combines good compression with high quality; supported by all browsers |
| MP4 | .mp4 | A video format, but can also be used for audio; supported by all browsers |
**Note:** Only MP3, WAV, and Ogg audio are supported by the HTML standard. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The format tables above are the practical takeaway: when adding `<video>` or `<audio>` to a page, author for the HTML-supported subset (MP4/WebM/Ogg video; MP3/WAV/Ogg audio), favoring MP4 and MP3 for the widest browser coverage. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
This overview page does not present a specific code example; the supported formats are applied via the `<video>` and `<audio>` elements documented in [[HTML Video]] and [[HTML Audio]]. The actionable pattern is the HTML-supported format subset:
- Video: MP4 (`video/mp4`), WebM (`video/webm`), Ogg (`video/ogg`)
- Audio: MP3 (`audio/mpeg`), WAV (`audio/wav`), Ogg (`audio/ogg`)
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. The historical note is that several once-common formats (MPEG, Flash .swf/.flv, RealMedia) are "no longer supported" in browsers — reflecting the move to the small, royalty-conscious HTML-native format set. [S1]
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Video]], [[HTML Audio]], [[HTML Plug-ins]], [[HTML5]]
- **참조 맥락:** Referenced when choosing which audio/video file formats to provide for cross-browser playback.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Media — https://www.w3schools.com/html/html_media.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Media" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Page_Title.md
+100
View File
@@ -0,0 +1,100 @@
---
id: html-page-title
title: "HTML Page Title"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["title element", "page title", "browser title bar", "HTML SEO title", "document title"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "title", "seo"]
raw_sources: ["https://www.w3schools.com/html/html_page_title.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Page Title]]
## 🎯 한 줄 통찰 (One-line insight)
Every web page should have a `<title>` element describing the meaning of the page; it appears in the browser title bar, in bookmarks, and in search engine results, and is very important for SEO. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Purpose** — every web page should have a page title to describe the meaning of the page; the `<title>` element adds it. [S1]
- **A good title** — should describe the content and the meaning of the page. [S1]
- **SEO importance** — the page title is very important for search engine optimization (SEO); the text is used by search engine algorithms to decide the order when listing pages in search results. [S1]
- **Where it appears** — the `<title>` element defines a title in the browser toolbar, provides a title for the page when added to favorites, and displays a title for the page in search engine results. [S1]
- **Guidance** — try to make the title as accurate and meaningful as possible. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Title placement pattern** — `<title>…</title>` lives inside the `<head>` section. [S1]
- **Meaningful-title pattern** — describe the content and meaning of the page for users and search engines. [S1]
## 📖 세부 내용 (Details)
Every web page should have a page title to describe the meaning of the page. [S1]
**The title element** — the `<title>` element adds a title to your page, displayed in the browser's title bar. [S1]
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>
```
**What is a good title?**
The title should describe the content and the meaning of the page. The page title is very important for search engine optimization (SEO). The text is used by search engine algorithms to decide the order when listing pages in search results. The `<title>` element: [S1]
- Defines a title in the browser toolbar
- Provides a title for the page when it is added to favorites
- Displays a title for the page in search engine results
So, try to make the title as accurate and meaningful as possible. [S1]
**HTML title tag reference** [S1]
| Tag | Description |
|---|---|
| `<title>` | Defines the title of the document |
## 🛠️ 적용 사례 (Applied in summary)
The complete HTML document with `<title>HTML Tutorial</title>` above is the canonical applied example from the source. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Page title in head (HTML):
```html
<head>
<title>HTML Tutorial</title>
</head>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Favicon]], [[HTML Head]], [[HTML Introduction]], [[HTML Links]]
- **참조 맥락:** Referenced when naming a page for the browser tab, bookmarks, and search engine results (SEO).
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Page Title — https://www.w3schools.com/html/html_page_title.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Page Title" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Paragraphs.md
+121
View File
@@ -0,0 +1,121 @@
---
id: html-paragraphs
title: "HTML Paragraphs"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["paragraph tag", "p element", "br", "pre", "hr", "line break", "preformatted text", "horizontal rule"]
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", "paragraphs", "text"]
raw_sources: ["https://www.w3schools.com/html/html_paragraphs.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Paragraphs]]
## 🎯 한 줄 통찰 (One-line insight)
The `<p>` element defines a paragraph that always starts on a new line with browser-added margins, and the browser collapses any extra spaces and blank lines in the source. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<p>` defines a paragraph** — always starts on a new line; browsers add white space (margin) before and after. [S1]
- **Whitespace is collapsed** — the browser automatically removes any extra spaces and lines when the page is displayed. [S1]
- **Display is unpredictable** — you cannot be sure how HTML will display; different screen sizes and resized windows give different results. [S1]
- **`<br>` is a line break** — inserts a single line break without starting a new paragraph; it is an empty element with no end tag. [S1]
- **`<pre>` preserves formatting** — preformatted text displays in a fixed-width font and keeps both spaces and line breaks. [S1]
- **`<hr>` is a thematic break** — defines a thematic change in content, displayed as a horizontal rule. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Don't rely on source whitespace** — formatting must come from tags/CSS, not extra spaces or newlines. [S1]
- **`<br>` for in-paragraph breaks** — use it when you want a new line without a new paragraph. [S1]
- **`<pre>` for poems/code-like text** — when whitespace and line breaks must be preserved. [S1]
## 📖 세부 내용 (Details)
**HTML Paragraphs**
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. The `<p>` element defines a paragraph: [S1]
```html
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
```
**HTML Display**
You cannot be sure how HTML will be displayed. Large or small screens, and resized windows, will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The browser will automatically remove any extra spaces and lines when the page is displayed. [S1]
**HTML Line Breaks**
The HTML `<br>` element defines a line break. Use `<br>` if you want a line break (a new line) without starting a new paragraph: [S1]
```html
<p>This is<br>a paragraph<br>with line breaks.</p>
```
The `<br>` tag is an empty tag, which means that it has no end tag. [S1]
**The HTML `<pre>` Element**
The HTML `<pre>` element defines preformatted text. The text inside a `<pre>` element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: [S1]
```html
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
</pre>
```
**HTML Horizontal Rules**
The `<hr>` tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The `<hr>` element is used to separate content (or define a change) in an HTML page. The `<hr>` tag is an empty tag, which means that it has no end tag. [S1]
**Tag reference**
| Tag | Description |
|---|---|
| `<p>` | Defines a paragraph |
| `<hr>` | Defines a thematic change in the content |
| `<br>` | Inserts a single line break |
| `<pre>` | Defines pre-formatted text |
## 🛠️ 적용 사례 (Applied in summary)
The poem inside `<pre>` shows when preformatting is needed (preserving the layout of verse), while `<br>` and `<hr>` show how to control breaks within and between content blocks. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Two paragraphs (HTML):
```html
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
```
Line breaks within a paragraph:
```html
<p>This is<br>a paragraph<br>with line breaks.</p>
```
Preformatted text:
```html
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
</pre>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
A common beginner expectation is corrected here: extra spaces and blank lines in the HTML source do NOT affect the rendered output — the browser collapses them. Use `<br>`, `<pre>`, or CSS for intended spacing. [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 Headings]], [[HTML Basic]], [[HTML Formatting]], [[HTML Elements]]
- **참조 맥락:** Referenced whenever laying out body text, breaks, and preformatted blocks on a page.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Paragraphs — https://www.w3schools.com/html/html_paragraphs.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Paragraphs" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Plugins.md
+106
View File
@@ -0,0 +1,106 @@
---
id: html-plugins
title: "HTML Plug-ins"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML plugins", "object element", "embed element", "<object>", "<embed>", "browser plug-ins"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "plugins", "object", "embed", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_object.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Plug-ins]]
## 🎯 한 줄 통찰 (One-line insight)
Plug-ins once extended browsers with extra functionality (Java applets, ActiveX, Flash), but most are now unsupported; the `<object>` and `<embed>` elements remain the standard, browser-supported ways to embed external content. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Plug-ins = helper programs** — computer programs that extend the standard functionality of the browser. [S1]
- **Historical uses** — plug-ins were used to run Java applets, run Microsoft ActiveX controls, display Flash movies, display maps, scan for viruses, and verify a bank id. [S1]
- **Largely deprecated** — most browsers no longer support Java applets and plug-ins; ActiveX controls are no longer supported in any browser; support for Shockwave Flash has also been turned off in modern browsers. [S1]
- **`<object>`** — defines an embedded object within an HTML document; supported in all browsers; originally designed for plug-ins but can also embed HTML pages, images, and other media. [S1]
- **`<embed>`** — also defines an embedded object; supported in all major browsers. It has no closing tag and cannot contain alternative (fallback) text. [S1]
- **`<embed>` standardization** — long supported by browsers, but it was not part of the HTML specification before HTML5. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Object-embed pattern** — `<object data="..." width height></object>` embeds external content with a closing tag. [S1]
- **Embed pattern** — `<embed src="..." >` embeds content with no closing tag and no fallback text. [S1]
- **HTML-in-HTML pattern** — `<object data="snippet.html">` embeds another HTML page. [S1]
## 📖 세부 내용 (Details)
**Plug-ins** — plug-ins are computer programs that extend the standard functionality of the browser. They were designed to be used for many different purposes: to run Java applets, to run Microsoft ActiveX controls, to display Flash movies, to display maps, to scan for viruses, to verify a bank id, and so on. [S1]
**Warning:** Most browsers no longer support Java applets and plug-ins. ActiveX controls are no longer supported in any browsers. The support for Shockwave Flash has also been turned off in modern browsers. [S1]
**The `<object>` element** — defines an embedded object within an HTML document. It was designed to embed plug-ins (like Java applets, PDF readers, and Flash players) in web pages, but can also be used to include HTML in HTML, or images. It is supported in all browsers. [S1]
Embed an image with `<object>`: [S1]
```html
<object width="100%" height="500px" data="snippet.html"></object>
```
The `<object>` element can also display an image: [S1]
```html
<object data="audi.jpeg"></object>
```
**The `<embed>` element** — also defines an embedded object within an HTML document, and is supported in all major browsers. The `<embed>` element does not have a closing tag and cannot contain alternative text. [S1]
Embed an image with `<embed>`: [S1]
```html
<embed src="audi.jpeg">
```
Embed an HTML page with `<embed>`: [S1]
```html
<embed width="100%" height="500px" src="snippet.html">
```
**Note:** The `<embed>` element does not have a closing tag, so it cannot contain alternative text to be displayed if the resource cannot be loaded. The element was not part of the HTML specification before HTML5, even though it had been supported by browsers for a long time. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The examples above are the canonical applied uses: embedding an external HTML page or an image with `<object>` (which supports a closing tag and fallback content) versus `<embed>` (a self-closing element with no fallback). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Embed an HTML page with `<object>` (HTML):
```html
<object width="100%" height="500px" data="snippet.html"></object>
```
Embed an image with `<embed>` (HTML, no closing tag):
```html
<embed src="audi.jpeg">
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The source contrasts `<object>` and `<embed>`: both embed external objects and are supported in all major browsers, but `<object>` has a closing tag (so it can hold alternative/fallback content), while `<embed>` has no closing tag and cannot contain alternative text. `<object>` has long been part of HTML; `<embed>` was not part of the HTML specification before HTML5 despite long browser support. Prefer `<object>` when you need fallback content; `<embed>` is a terser self-closing alternative. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. The dominant update is deprecation: the classic plug-in ecosystem (Java applets, ActiveX, Flash/Shockwave) is no longer supported in modern browsers, so native HTML5 elements ([[HTML Video]], [[HTML Audio]], [[HTML Canvas]], [[HTML SVG]]) have replaced most plug-in use cases. [S1]
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Media]], [[HTML Video]], [[HTML Audio]], [[HTML5]]
- **참조 맥락:** Referenced when embedding external objects (HTML pages, images, media) or when migrating away from deprecated browser plug-ins.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Plug-ins — https://www.w3schools.com/html/html_object.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Plug-ins" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Quotations.md
+146
View File
@@ -0,0 +1,146 @@
---
id: html-quotations
title: "HTML Quotations"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML blockquote", "HTML q tag", "HTML citation elements", "HTML abbr", "HTML cite", "HTML bdo", "HTML address"]
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", "quotations", "semantics"]
raw_sources: ["https://www.w3schools.com/html/html_quotation_elements.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Quotations]]
## 🎯 한 줄 통찰 (One-line insight)
HTML provides a family of semantic elements — `<blockquote>`, `<q>`, `<abbr>`, `<address>`, `<cite>`, and `<bdo>` — that mark up quotations, citations, abbreviations, and text direction so browsers, translators, and search engines can interpret content meaningfully. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<blockquote>`** — defines a section that is quoted from another source; browsers usually indent it. [S1]
- **`<q>`** — defines a short inline quotation; browsers normally insert quotation marks around it. [S1]
- **`<abbr>`** — defines an abbreviation or acronym (e.g. "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM"); marking abbreviations gives useful information to browsers, translation systems, and search engines. [S1]
- **`<address>`** — defines contact information for the author/owner of a document or an article; renders in italic with a line break before and after. [S1]
- **`<cite>`** — defines the title of a creative work (book, poem, song, movie, painting, sculpture, etc.); renders in italic. [S1]
- **`<bdo>`** — BDO stands for Bi-Directional Override; overrides the current text direction. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Source attribution pattern** — `<blockquote cite="URL">` ties a quoted block to its source URL. [S1]
- **Inline quotation pattern** — wrap a short quote in `<q>…</q>` and let the browser supply quote marks. [S1]
- **Tooltip-on-abbreviation pattern** — `<abbr title="full description">SHORT</abbr>` surfaces the expansion on mouse-over via the global `title` attribute. [S1]
- **Direction-override pattern** — `<bdo dir="rtl">…</bdo>` forces right-to-left rendering. [S1]
## 📖 세부 내용 (Details)
This chapter goes through the `<blockquote>`, `<q>`, `<abbr>`, `<address>`, `<cite>`, and `<bdo>` HTML elements. [S1]
**The `<blockquote>` Element**
The HTML `<blockquote>` element defines a section that is quoted from another source. Browsers usually indent `<blockquote>` elements. [S1]
```html
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
</blockquote>
```
**The `<q>` Element**
The HTML `<q>` tag defines a short quotation. Browsers normally insert quotation marks around the quotation. [S1]
```html
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
```
**The `<abbr>` Element**
The HTML `<abbr>` tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Marking abbreviations can give useful information to browsers, translation systems and search-engines. [S1]
> **Tip:** Use the global `title` attribute to show the description for the abbreviation/acronym when you mouse over the element. [S1]
```html
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
```
**The `<address>` Element**
The HTML `<address>` tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc. The text in the `<address>` element usually renders in italic, and browsers will always add a line break before and after the `<address>` element. [S1]
```html
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
```
**The `<cite>` Element**
The HTML `<cite>` tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). A person's name is not the title of a work. The text in the `<cite>` element usually renders in italic. [S1]
```html
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
```
**The `<bdo>` Element**
BDO stands for Bi-Directional Override. The HTML `<bdo>` tag is used to override the current text direction. [S1]
```html
<bdo dir="rtl">This text will be written from right to left</bdo>
```
**Reference table**
| Tag | Description |
|---|---|
| `<abbr>` | Defines an abbreviation or acronym |
| `<address>` | Defines contact information for the author/owner of a document |
| `<bdo>` | Defines the text direction |
| `<blockquote>` | Defines a section that is quoted from another source |
| `<cite>` | Defines the title of a work |
| `<q>` | Defines a short inline quotation |
[S1]
## 🛠️ 적용 사례 (Applied in summary)
The WWF blockquote, the WHO abbreviation, and the "The Scream" citation above are the canonical applied examples from the source. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Block quotation with source (HTML):
```html
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive...
</blockquote>
```
Inline quotation:
```html
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
```
Abbreviation with tooltip:
```html
<abbr title="World Health Organization">WHO</abbr>
```
Direction override:
```html
<bdo dir="rtl">This text will be written from right to left</bdo>
```
## ⚖️ 모순 및 업데이트 (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 Formatting]], [[HTML Text Formatting]], [[HTML Comments]], [[HTML Attributes]]
- **참조 맥락:** Referenced when marking up quoted material, citations, abbreviations, contact info, or overriding text direction.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Quotations — https://www.w3schools.com/html/html_quotation_elements.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Quotations" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Responsive.md
+230
View File
@@ -0,0 +1,230 @@
---
id: html-responsive
title: "HTML Responsive"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["responsive web design", "RWD", "viewport meta", "responsive images", "media queries", "viewport width unit"]
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", "responsive", "css"]
raw_sources: ["https://www.w3schools.com/html/html_responsive.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Responsive]]
## 🎯 한 줄 통찰 (One-line insight)
Responsive Web Design uses HTML and CSS to automatically resize, hide, shrink, or enlarge a website so it looks good on all devices — desktops, tablets, and phones. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Responsive Web Design** — using HTML and CSS to automatically resize, hide, shrink, or enlarge a website to look good on all devices (desktops, tablets, phones). [S1]
- **Viewport meta tag** — the viewport `<meta>` element should be added to all web pages to control the page's dimensions and scaling. [S1]
- **Responsive images** — using CSS `width:100%` scales an image up and down; `max-width:100%` scales down but never above original size; `<picture>` serves different images per browser width. [S1]
- **Responsive text** — the `vw` (viewport width) unit lets text size follow the browser window size. [S1]
- **Media queries** — define completely different styles for different browser sizes via breakpoints. [S1]
- **CSS frameworks** — W3.CSS and Bootstrap provide responsive layouts by default. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Viewport setup** — `<meta name="viewport" content="width=device-width, initial-scale=1.0">`. [S1]
- **Fluid image** — `style="width:100%"` (scales both ways) vs. `style="max-width:100%;height:auto;"` (caps at original size). [S1]
- **Art-direction with `<picture>`** — `<source media="(max-width: ...)">` elements provide alternative images. [S1]
- **Viewport-relative text** — `font-size:10vw` (1vw = 1% of viewport width). [S1]
- **Breakpoint via media query** — `@media screen and (max-width: 800px) { ... }`. [S1]
## 📖 세부 내용 (Details)
**What is responsive web design?**
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge a website, to make it look good on all devices (desktops, tablets, and phones). [S1]
**Setting the viewport**
Add the following `<meta>` tag to all your web pages. This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling. [S1]
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
**Responsive images — using the `width` property**
If the CSS `width` property is set to 100%, the image will be responsive and scale up and down. Note: the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the `max-width` property instead. [S1]
```html
<img src="img_girl.jpg" style="width:100%;">
```
**Using the `max-width` property**
If the `max-width` property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size. [S1]
```html
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
```
**Show different images depending on browser width**
The `<picture>` element allows you to define different images for different browser window sizes: [S1]
```html
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
```
**Responsive text size**
The text size can be set with a `vw` unit, which means the "viewport width". That way the text size will follow the size of the browser window. Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. [S1]
```html
<h1 style="font-size:10vw">Hello World</h1>
```
**Media queries**
With media queries you can define completely different styles for different browser sizes. The example below shows columns that default to 20%/60%/20% widths but stack to 100% width when the viewport is 800px or smaller: [S1]
```css
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
```
**CSS frameworks — W3.CSS**
W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default. W3.CSS is smaller and faster than similar CSS frameworks, and is designed to be independent of jQuery or any other JavaScript library. [S1]
```html
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-green">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
```
**CSS frameworks — Bootstrap**
Bootstrap is another popular framework that uses HTML, CSS, and jQuery to make responsive web pages: [S1]
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
```
## 🛠️ 적용 사례 (Applied in summary)
The W3.CSS and Bootstrap full-page examples above are the canonical applied demonstrations of building a complete responsive page; the image, text, and media-query snippets are applied techniques for individual responsive behaviors. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Viewport (required on every page):
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Responsive image (capped at original size):
```html
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
```
Viewport-relative text:
```html
<h1 style="font-size:10vw">Hello World</h1>
```
Breakpoint:
```css
@media screen and (max-width: 800px) {
.left, .main, .right { width: 100%; }
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`width:100%`** — image scales both up and down; can exceed original size. [S1]
- **`max-width:100%`** — image scales down only, never larger than original; preferred in many cases. [S1]
- **W3.CSS** — smaller and faster than similar frameworks; independent of jQuery / any JS library. [S1]
- **Bootstrap** — popular framework using HTML, CSS, and jQuery for responsive pages. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Layout]], [[HTML Head]], [[HTML Images]], [[HTML Style Guide]]
- **참조 맥락:** Referenced when making a page adapt to multiple device sizes via the viewport, fluid images, viewport-relative text, media queries, or a CSS framework.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Responsive — https://www.w3schools.com/html/html_responsive.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Responsive" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_SSE.md
+148
View File
@@ -0,0 +1,148 @@
---
id: html-sse
title: "HTML SSE"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Server-Sent Events", "EventSource", "SSE", "server push", "text/event-stream"]
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", "sse", "server-sent-events", "html5"]
raw_sources: ["https://www.w3schools.com/html/html5_serversentevents.asp"]
applied_in: []
github_commit: ""
---
# [[HTML SSE]]
## 🎯 한 줄 통찰 (One-line insight)
Server-Sent Events (SSE) let a web page automatically receive pushed updates from a server through an `EventSource` connection, instead of the page repeatedly requesting data. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Server-Sent Event** — when a web page automatically gets messages/updates from a server; updates are pushed automatically rather than requested. [S1]
- **`EventSource`** — the client-side object that opens the connection to the URL sending updates. [S1]
- **`onmessage`** — the handler that fires when an update is received. [S1]
- **`text/event-stream`** — the server response Content-Type for an SSE stream, with caching disabled and each message prefixed by `data: `. [S1]
- **Typical uses** — social media feeds, market/stock data, news updates, sports results. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Feature-detect with `typeof(EventSource)`** — `if (typeof(EventSource) !== "undefined") { ... }`. [S1]
- **Open + handle** — `new EventSource(url)` then assign `source.onmessage`. [S1]
- **Server contract** — set `Content-Type: text/event-stream`, disable caching, write `data: ...` lines, flush. [S1]
## 📖 세부 내용 (Details)
**What are Server-Sent Events?**
A server-sent event is when a web page automatically gets messages/updates from a server. Normally, a web page has to request data from the server, but with server-sent events, the updates are pushed automatically. Examples include social media feeds, market/stock data, news updates, and sports results. [S1]
**Browser support**
| API | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
**Client-side: receive events**
```javascript
const x = document.getElementById("result");
// Check browser support for SSE
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
x.innerHTML += event.data + "<br>";
};
} else {
x.innerHTML = "Sorry, no support for server-sent events.";
}
```
Create an `EventSource` targeting the URL that sends updates. The `onmessage` event fires whenever an update arrives, appending the received data to the target element. [S1]
**Browser support detection**
```javascript
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}
```
**Server-side example (PHP — `demo_sse.php`)**
```php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
```
**Server-side example (ASP/VB — `demo_sse.asp`)**
```asp
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
```
**Server code explained** [S1]
- Set the "Content-Type" header to "text/event-stream".
- Disable page caching.
- Output data prefixed with "data: ".
- Flush the output data back to the client.
**EventSource events**
| Event | Description |
|---|---|
| `onopen` | When a connection to the server is opened |
| `onmessage` | When a message is received |
| `onerror` | When an error occurs |
## 🛠️ 적용 사례 (Applied in summary)
The applied case is a live server-time feed: a client `EventSource` subscribes to `demo_sse.php` (or `demo_sse.asp`), which streams the current server time, and the page appends each update. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Subscribe to an event stream (JavaScript):
```javascript
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
x.innerHTML += event.data + "<br>";
};
```
Server stream contract (PHP):
```php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo "data: ...\n\n";
flush();
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note the directionality: SSE is a server-to-browser push channel — the server initiates updates rather than the page polling for them. [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 Web APIs]], [[HTML Web Workers]], [[HTML Web Storage]], [[HTML Geolocation]]
- **참조 맥락:** Referenced whenever a page must reflect server-side changes in real time (feeds, tickers, live results).
## 📚 출처 (Sources)
- [S1] W3Schools — HTML SSE — https://www.w3schools.com/html/html5_serversentevents.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML SSE" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_SVG.md
+150
View File
@@ -0,0 +1,150 @@
---
id: html-svg
title: "HTML SVG"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["SVG", "Scalable Vector Graphics", "<svg>", "vector graphics", "inline SVG"]
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", "svg", "graphics", "html5", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html5_svg.asp"]
applied_in: []
github_commit: ""
---
# [[HTML SVG]]
## 🎯 한 줄 통찰 (One-line insight)
SVG (Scalable Vector Graphics) defines vector-based 2D graphics in XML markup that can be embedded directly in HTML, scaling to any size without quality loss and integrating with CSS, the DOM, and JavaScript. [S1]
## 🧠 핵심 개념 (Core concepts)
- **SVG = Scalable Vector Graphics** — used to define vector-based graphics for the web, defined in XML format. [S1]
- **Lossless scaling** — every element and attribute can be animated, and graphics do not lose quality when zoomed or resized. [S1]
- **A W3C recommendation** that integrates with other standards such as CSS, DOM, XSL, and JavaScript. [S1]
- **Retained-mode / object model** — each drawn shape is remembered as an object; changing an attribute triggers automatic re-rendering by the browser. [S1]
- **Declarative shapes** — circles, rectangles, polygons, ellipses, text, and gradients are written as XML elements (`<circle>`, `<rect>`, `<polygon>`, `<ellipse>`, `<text>`, `<linearGradient>`). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Inline SVG pattern** — an `<svg width height>` block with shape child elements drawn directly in the HTML body. [S1]
- **Shape + style pattern** — shapes carry presentation attributes (`stroke`, `stroke-width`, `fill`) or a `style="..."` string. [S1]
- **Rounded rect pattern** — `<rect rx ry>` produces rounded corners. [S1]
- **Gradient pattern** — define `<linearGradient>` (with `<stop>` color stops) inside `<defs>`, then reference via `fill="url(#id)"`. [S1]
- **Fallback text pattern** — text inside `<svg>` ("Sorry, your browser does not support inline SVG.") serves as a fallback. [S1]
## 📖 세부 내용 (Details)
**What is SVG?** SVG stands for Scalable Vector Graphics and is used to define vector-based graphics for the web. Key points: SVG defines graphics in XML format; each element and attribute can be animated; SVG is a W3C recommendation; SVG integrates with other standards such as CSS, DOM, XSL, and JavaScript. SVG graphics are scalable and lose no quality when zoomed or resized. [S1]
**SVG circle** — a complete document drawing a yellow circle with a green border: [S1]
```html
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
```
**SVG rectangle** — [S1]
```html
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>
```
**SVG rounded rectangle (with opacity)** — `rx`/`ry` round the corners; the `style` string sets fill, stroke, and opacity: [S1]
```html
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
```
**SVG star** — a polygon with a non-zero fill rule: [S1]
```html
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
```
**SVG gradient ellipse with text** — a linear gradient defined in `<defs>` and applied to an ellipse, with overlaid text: [S1]
```html
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
```
## 🛠️ 적용 사례 (Applied in summary)
The examples above are the canonical applied uses: a bordered circle, a filled rectangle, a translucent rounded rectangle, a polygon star with an even-odd fill rule, and a gradient-filled ellipse with overlaid text. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Inline SVG circle (HTML/SVG):
```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
```
Gradient via defs (HTML/SVG):
```html
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The source contrasts SVG and Canvas: "SVG is a language for describing 2D graphics in XML," while "Canvas draws 2D graphics, on the fly (with JavaScript)." In SVG, each drawn shape is remembered as an object, and if an attribute changes, the browser can automatically re-render; in Canvas, once a graphic is drawn it is forgotten by the browser. [S1]
| | SVG | Canvas |
|---|---|---|
| Resolution | Resolution independent | Resolution dependent |
| Event handlers | Supports event handlers | No support for event handlers |
| Text rendering | Good text rendering | Poor text rendering |
| Complex graphics | Slow rendering if complex | — |
| Save as image | — | Can save result as .png or .jpg |
| Games | Not suited for game applications | Well suited for graphic-intensive games |
Choose SVG for resolution-independent, interactive, text-heavy, or animatable graphics; choose [[HTML Canvas]] for pixel-level, graphic-intensive rendering such as games. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. The core distinction is retained-mode (SVG, an object model the browser re-renders) versus immediate-mode (Canvas, draw-and-forget pixels). [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 Canvas]], [[HTML Graphics]], [[HTML Media]], [[HTML5]]
- **참조 맥락:** Referenced when rendering scalable, declarative, interactive vector graphics such as icons, charts, and logos.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML SVG — https://www.w3schools.com/html/html5_svg.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML SVG" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Semantics.md
+293
View File
@@ -0,0 +1,293 @@
---
id: html-semantics
title: "HTML Semantics"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["semantic elements", "semantic HTML", "HTML5 semantic elements", "section article", "non-semantic elements", "figure figcaption"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.91
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "semantic", "html5"]
raw_sources: ["https://www.w3schools.com/html/html5_semantic_elements.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Semantics]]
## 🎯 한 줄 통찰 (One-line insight)
Semantic elements are elements with a meaning: a semantic element clearly describes its meaning to both the browser and the developer, unlike non-semantic elements such as `<div>` and `<span>` that say nothing about their content. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Semantic = meaning** — a semantic element clearly describes its meaning to both the browser and the developer. [S1]
- **Non-semantic elements** — `<div>` and `<span>` tell nothing about their content. [S1]
- **Semantic elements** — `<img>`, `<table>`, `<article>`, etc. clearly define their content. [S1]
- **Page-region elements** — `<article>`, `<aside>`, `<details>`, `<figcaption>`, `<figure>`, `<footer>`, `<header>`, `<main>`, `<mark>`, `<nav>`, `<section>`, `<summary>`, `<time>` define different parts of a web page. [S1]
- **Why semantics** — per the W3C, a semantic Web allows data to be shared and reused across applications, enterprises, and communities. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **`<section>`** — a thematic grouping of content, typically with a heading. [S1]
- **`<article>`** — independent, self-contained content that should make sense on its own. [S1]
- **`<header>` / `<footer>`** — introductory content/nav vs. footer info; multiple of each allowed per document. [S1]
- **`<nav>`** — only for major blocks of navigation links, not every link. [S1]
- **`<aside>`** — content indirectly related to the surrounding content (sidebar). [S1]
- **`<figure>` + `<figcaption>`** — self-contained illustration plus its caption. [S1]
- **Free nesting** — `<section>` and `<article>` may contain each other; definitions do not dictate nesting. [S1]
## 📖 세부 내용 (Details)
**What are semantic elements?**
Semantic elements = elements with a meaning. A semantic element clearly describes its meaning to both the browser and the developer. Non-semantic elements such as `<div>` and `<span>` tell nothing about their content. Semantic elements such as `<img>`, `<table>`, and `<article>` clearly define their content. [S1]
Semantic elements that define different parts of a web page: `<article>`, `<aside>`, `<details>`, `<figcaption>`, `<figure>`, `<footer>`, `<header>`, `<main>`, `<mark>`, `<nav>`, `<section>`, `<summary>`, `<time>`. [S1]
**HTML `<section>` element**
The `<section>` element defines a section in a document. According to W3C documentation, a section is a thematic grouping of content, typically with a heading. Use cases include chapters, introduction, news items, and contact information. [S1]
```html
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
```
**HTML `<article>` element**
The `<article>` element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site. Use cases include forum posts, blog posts, user comments, product cards, and newspaper articles. [S1]
```html
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
```
Example with CSS styling articles: [S1]
```html
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
```
**Nesting `<article>` in `<section>` or vice versa?**
The `<article>` element specifies independent, self-contained content. The `<section>` element defines a section in a document. Can we use the definitions to decide how to nest those elements? No, we cannot. So, you will find HTML pages with `<section>` elements containing `<article>` elements, and `<article>` elements containing `<section>` elements. [S1]
**HTML `<header>` element**
The `<header>` element represents a container for introductory content or a set of navigational links. It typically contains one or more heading elements (`<h1>` – `<h6>`), a logo or icon, and authorship information. You can have several `<header>` elements in one HTML document. However, `<header>` cannot be placed within a `<footer>`, `<address>`, or another `<header>` element. [S1]
```html
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
```
**HTML `<footer>` element**
The `<footer>` element defines a footer for a document or section. It typically contains authorship information, copyright information, contact information, sitemap, back-to-top links, and related documents. You can have several `<footer>` elements in one document. [S1]
```html
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
```
**HTML `<nav>` element**
The `<nav>` element defines a set of navigation links. Notice that NOT all links of a document should be inside a `<nav>` element. The `<nav>` element is intended only for major blocks of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content. [S1]
```html
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
```
**HTML `<aside>` element**
The `<aside>` element defines some content aside from the content it is placed in (like a sidebar). The `<aside>` content should be indirectly related to the surrounding content. [S1]
```html
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
```
Example with CSS styling the aside: [S1]
```html
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
</body>
</html>
```
**HTML `<figure>` and `<figcaption>` elements**
The `<figure>` tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. The `<figcaption>` tag defines a caption for a `<figure>` element. The `<figcaption>` element can be placed as the first or as the last child of a `<figure>` element. The `<img>` element defines the actual image/illustration. [S1]
```html
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
```
**Why semantic elements?**
According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities." [S1]
**Semantic elements reference**
| Tag | Description |
|---|---|
| `<article>` | Defines independent, self-contained content |
| `<aside>` | Defines content aside from the page content |
| `<details>` | Defines additional details that the user can view or hide |
| `<figcaption>` | Defines a caption for a `<figure>` element |
| `<figure>` | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| `<footer>` | Defines a footer for a document or section |
| `<header>` | Specifies a header for a document or section |
| `<main>` | Specifies the main content of a document |
| `<mark>` | Defines marked/highlighted text |
| `<nav>` | Defines navigation links |
| `<section>` | Defines a section in a document |
| `<summary>` | Defines a visible heading for a `<details>` element |
| `<time>` | Defines a date/time |
[S1]
## 🛠️ 적용 사례 (Applied in summary)
The WWF section example, the browser-list article examples (plain and CSS-styled), the header/footer/nav/aside snippets, and the figure/figcaption example are the canonical applied demonstrations of each semantic element. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Thematic section:
```html
<section>
<h1>Heading</h1>
<p>...</p>
</section>
```
Self-contained article with header:
```html
<article>
<header><h1>Title</h1></header>
<p>...</p>
</article>
```
Major navigation block:
```html
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a>
</nav>
```
Figure with caption:
```html
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Semantic elements** (`<article>`, `<section>`, `<header>`, …) — clearly define their content to browsers and developers; preferred for meaningful structure and accessibility. [S1]
- **Non-semantic elements** (`<div>`, `<span>`) — tell nothing about their content; use only when no semantic element fits. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note the deliberate non-rule about nesting: the definitions of `<section>` and `<article>` do not determine how to nest them, so either can contain the other. [S1]
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.91
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Layout]], [[HTML Computercode]], [[HTML Introduction]], [[HTML Style Guide]]
- **참조 맥락:** Referenced when choosing meaningful structural elements for a page's regions and for accessibility / SEO benefits.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Semantics — https://www.w3schools.com/html/html5_semantic_elements.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Semantics" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Style_Guide.md
+343
View File
@@ -0,0 +1,343 @@
---
id: html-style-guide
title: "HTML Style Guide"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML coding conventions", "HTML syntax", "HTML best practices", "lowercase elements", "close all elements", "lang attribute"]
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", "style-guide", "conventions"]
raw_sources: ["https://www.w3schools.com/html/html5_syntax.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Style Guide]]
## 🎯 한 줄 통찰 (One-line insight)
A consistent HTML style guide — lowercase elements and attributes, quoted attribute values, closed elements, declared doctype/lang/charset, proper indentation, and always-present `<title>` — produces cleaner, more portable, and more maintainable code. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Declare the document type** — always start with `<!DOCTYPE html>`. [S1]
- **Lowercase names** — use lowercase element names and lowercase attribute names; cleaner and easier to type. [S1]
- **Close elements & quote values** — close all HTML elements and always quote attribute values (required when the value contains spaces). [S1]
- **Image attributes** — always specify `alt`, `width`, and `height` for images (alt for fallback; width/height reduce flickering). [S1]
- **Readable formatting** — no spaces around `=`, avoid long lines, use blank lines and two-space indentation (not tabs). [S1]
- **Required `<title>`** — never skip it; it is required and important for SEO. [S1]
- **Recommended structure** — add `<html>`, `<head>`, `<body>`, `lang`, and `charset` even though pages can validate without some of them. [S1]
- **File naming** — use lowercase file names; `.html`/`.htm` for HTML, `.css`, `.js`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Good vs. bad lowercase** — `<p>...</p>` not `<P>...</P>`; `href=` not `HREF=`. [S1]
- **Quoted value with spaces** — `class="table striped"` works; `class=table striped` does not. [S1]
- **No spaces around equals** — `href="styles.css"` not `href = "styles.css"`. [S1]
- **lang declaration** — `<html lang="en-us">`. [S1]
- **Early charset** — `<meta charset="UTF-8">` as early as possible. [S1]
- **Simple link/script syntax** — `type` attribute is not necessary. [S1]
## 📖 세부 내용 (Details)
**Always declare document type** [S1]
```html
<!DOCTYPE html>
```
**Use lowercase element names** — mixing uppercase and lowercase looks bad; lowercase is cleaner and easier to type. [S1]
```html
<!-- Good -->
<body>
<p>This is a paragraph.</p>
</body>
```
```html
<!-- Bad -->
<BODY>
<P>This is a paragraph.</P>
</BODY>
```
**Close all HTML elements** [S1]
```html
<!-- Good -->
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
```
```html
<!-- Bad -->
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
```
**Use lowercase attribute names** [S1]
```html
<!-- Good -->
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
```
```html
<!-- Bad -->
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
```
**Always quote attribute values** — quoted values are easier to read; you MUST use quotes if the value contains spaces. [S1]
```html
<!-- Good -->
<table class="striped">
<!-- Bad -->
<table class=striped>
<!-- Very bad (will not work, value contains spaces) -->
<table class=table striped>
```
**Always specify alt, width, and height for images** — `alt` is important if the image cannot be displayed; defining `width`/`height` reduces flickering because the browser can reserve space before loading. [S1]
```html
<!-- Good -->
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
<!-- Bad -->
<img src="html5.gif">
```
**Spaces and equal signs** — space-less is easier to read and groups entities better together. [S1]
```html
<!-- Good -->
<link rel="stylesheet" href="styles.css">
<!-- Bad -->
<link rel = "stylesheet" href = "styles.css">
```
**Avoid long code lines** — when using an HTML editor, avoid too-long code lines, since scrolling left-right is inconvenient. [S1]
**Blank lines and indentation** — do not add blank lines, spaces, or indentations without a reason; for readability, add blank lines to separate large or logical code blocks and add two spaces of indentation. Do not use the tab key. [S1]
```html
<!-- Good -->
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the
most populous metropolitan area in the world.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest
population centers in Europe.</p>
</body>
```
```html
<!-- Bad -->
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo
Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous
city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the
largest population centers in Europe.</p>
</body>
```
Table example using two-space indentation: [S1]
```html
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
```
List example: [S1]
```html
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
```
**Never skip the `<title>` element** — the title element is required in HTML and is very important for SEO; it defines a title in the browser toolbar, provides a title when the page is added to favorites, and displays a title in search-engine results. Make it as accurate and meaningful as possible. [S1]
```html
<title>HTML Style Guide and Coding Conventions</title>
```
**Omitting `<html>` and `<body>`?** — an HTML page will validate without the `html` and `body` tags, but it is strongly recommended to always add them. Omitting `body` can produce errors in older browsers, and omitting `html` and `body` can also crash DOM and XML software. [S1]
```html
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
```
**Omitting `<head>`?** — the head tag can also be omitted; browsers will add all elements before `body` to a default head element. However, using the head tag is recommended. [S1]
```html
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
**Close empty HTML elements?** — both forms are allowed; if you expect XML/XHTML software to access your page, keep the closing slash, because it is required in XML and XHTML. [S1]
```html
<meta charset="utf-8">
<meta charset="utf-8" />
```
**Add the lang attribute** — always include the `lang` attribute inside the `html` tag to declare the language of the page; this assists search engines and browsers. [S1]
```html
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
**Meta data** — to ensure proper interpretation and correct search engine indexing, both the language and the character encoding `<meta charset="...">` should be defined as early as possible. [S1]
```html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
```
**Setting the viewport** — the viewport is the user's visible area of a web page; include this meta element in all web pages. `width=device-width` sets the page width to the device screen-width; `initial-scale=1.0` sets the initial zoom level. [S1]
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
**HTML comments** — short comments on one line; long comments indented with two spaces. [S1]
```html
<!-- This is a comment -->
```
```html
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
```
**Using style sheets** — use simple syntax for linking style sheets (the `type` attribute is not necessary). [S1]
```html
<link rel="stylesheet" href="styles.css">
```
Short CSS rules can be on one line; long rules: opening bracket on the same line as the selector, one space before it, two-space indentation, a semicolon after each property-value pair (including the last), quotes only when a value contains spaces, and the closing bracket on a new line without leading spaces. [S1]
```css
p.intro {font-family:Verdana;font-size:16em;}
```
```css
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
```
**Loading JavaScript in HTML** — use simple syntax for loading external scripts (the `type` attribute is not necessary). [S1]
```html
<script src="myscript.js">
```
**Accessing HTML elements with JavaScript** — untidy HTML code can result in JavaScript errors; these two statements produce different results because IDs are case-sensitive. [S1]
```javascript
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
```
**Use lowercase file names** — some web servers (Apache, Unix) are case sensitive about file names; others (Microsoft IIS) are not. To avoid problems when moving between servers, always use lowercase file names. [S1]
**File extensions** — HTML files should have a `.html` extension (`.htm` is allowed); CSS files `.css`; JavaScript files `.js`. There is no difference between `.htm` and `.html` — both are treated as HTML by any browser and server. [S1]
**Default filenames** — when a URL does not specify a filename at the end (like `https://www.w3schools.com/`), the server adds a default filename such as `index.html`, `index.htm`, `default.html`, or `default.htm`. If the server is configured only with `index.html` as default, the file must be named `index.html`; servers can be configured with multiple default filenames. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The paired good/bad examples (lowercase, closing tags, quoting, image attributes, spacing, indentation) and the recommended document skeletons (doctype + lang + charset + title + viewport) are the canonical applied conventions to copy. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Recommended document head conforming to the guide:
```html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Meaningful Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
...
</body>
</html>
```
Well-formed image:
```html
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
```
Simple external script load:
```html
<script src="myscript.js"></script>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`.htm` vs `.html`** — no difference; both are treated as HTML by any browser/server. [S1]
- **Closing slash on empty elements** — optional in HTML, but keep it (`<meta ... />`) if XML/XHTML software will read the page. [S1]
- **Omitting `<html>`/`<body>`/`<head>`** — pages may validate without them, but always include them to avoid errors in older browsers and crashes in DOM/XML software. [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 Head]], [[HTML Responsive]], [[HTML File Paths]], [[HTML Semantics]]
- **참조 맥락:** Referenced whenever writing or reviewing HTML for consistency, readability, validity, and portability.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Style Guide — https://www.w3schools.com/html/html5_syntax.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Style Guide" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Styles.md
+141
View File
@@ -0,0 +1,141 @@
---
id: html-styles
title: "HTML Styles"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["style attribute", "inline style", "background-color", "color", "font-family", "font-size", "text-align"]
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", "styles", "css"]
raw_sources: ["https://www.w3schools.com/html/html_styles.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Styles]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `style` attribute adds inline styling to an element using the syntax `style="property:value;"`, controlling color, font, size, and alignment. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`style` attribute** — used to add styles to an element such as color, font, and size. [S1]
- **Syntax** — `<tagname style="property:value;">`, where the property is a CSS property and the value is a CSS value. [S1]
- **`background-color`** — sets the background color of an element (or the whole page when set on `<body>`). [S1]
- **`color`** — sets the text color. [S1]
- **`font-family`** — sets the font of the text. [S1]
- **`font-size`** — sets the size of the text. [S1]
- **`text-align`** — sets the horizontal alignment of the text. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **`property:value;` pairs** — each declaration is a CSS property/value pair ending with a semicolon. [S1]
- **Page-wide vs. per-element** — styling `<body>` affects the whole page; styling an individual element affects only it. [S1]
- **Relative sizing** — `font-size` can use percentages (e.g. `300%`, `160%`). [S1]
## 📖 세부 내용 (Details)
**The HTML Style Attribute**
Setting the style of an HTML element can be done with the `style` attribute. The HTML `style` attribute has the following syntax: [S1]
```html
<tagname style="property:value;">
```
The property is a CSS property, and the value is a CSS value. [S1]
**Background Color**
The CSS `background-color` property defines the background color for an HTML element. Set the background color for the whole page: [S1]
```html
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
```
Set background color for two different elements: [S1]
```html
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
```
**Text Color**
The CSS `color` property defines the text color for an HTML element: [S1]
```html
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
```
**Fonts**
The CSS `font-family` property defines the font to be used for an HTML element: [S1]
```html
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
```
**Text Size**
The CSS `font-size` property defines the text size for an HTML element: [S1]
```html
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
```
**Text Alignment**
The CSS `text-align` property defines the horizontal text alignment for an HTML element: [S1]
```html
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
```
**Chapter Summary**
- Use the `style` attribute for styling HTML elements. [S1]
- Use `background-color` for background color. [S1]
- Use `color` for text colors. [S1]
- Use `font-family` for text fonts. [S1]
- Use `font-size` for text sizes. [S1]
- Use `text-align` for text alignment. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The examples above demonstrate inline styling applied directly to `<body>`, `<h1>`, and `<p>` elements — the simplest way to color, size, and align content without a separate stylesheet. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Style attribute syntax (HTML):
```html
<tagname style="property:value;">
```
Color, font, size, and alignment on a paragraph:
```html
<p style="color:red; font-family:courier; font-size:160%; text-align:center;">Styled paragraph.</p>
```
Page-wide background color:
```html
<body style="background-color:powderblue;">
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. (The page teaches inline `style` as the introductory styling mechanism; CSS stylesheets are covered separately.) [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 Attributes]], [[HTML Formatting]], [[HTML Headings]], [[HTML Basic]]
- **참조 맥락:** Referenced whenever applying inline visual styling (color, font, size, alignment) to elements.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Styles — https://www.w3schools.com/html/html_styles.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Styles" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Symbols.md
+133
View File
@@ -0,0 +1,133 @@
---
id: html-symbols
title: "HTML Symbols"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML entities", "HTML symbol entities", "entity names", "entity numbers", "HTML special characters", "character references"]
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", "symbols", "entities", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_symbols.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Symbols]]
## 🎯 한 줄 통찰 (One-line insight)
Symbols that are not present on a keyboard can be inserted into HTML using **entity names** or **entity numbers** (decimal or hexadecimal references), letting any page display currency signs, arrows, mathematical operators, Greek letters, and more. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Why symbols need encoding** — many useful characters (€, ©, ←, ∑, Α) are not available on a standard keyboard, so HTML provides reference codes to insert them. [S1]
- **Three ways to reference a symbol** — an *entity name* (e.g. `&euro;`), a *decimal entity number* (e.g. `&#8364;`), or a *hexadecimal entity number* (e.g. `&#x20AC;`). All three render the same character. [S1]
- **Entity names vs numbers** — entity names are easier to remember; entity numbers are guaranteed to work even when a browser does not support a particular name. [S1]
- **Categories of symbols** — W3Schools groups symbols into symbol entities (currency, trademarks, arrows, card suits), mathematical entities, and Greek letter entities, plus many extended reference categories. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Entity name pattern** — `&name;` (e.g. `&copy;` → ©). [S1]
- **Decimal number pattern** — `&#NNNN;` (e.g. `&#8364;` → €). [S1]
- **Hexadecimal number pattern** — `&#xHHHH;` (e.g. `&#x20AC;` → €). [S1]
- **Interchangeability** — for the Euro sign, `&euro;`, `&#8364;`, and `&#x20AC;` all produce €. [S1]
## 📖 세부 내용 (Details)
**HTML Symbols**
Symbols that are not present on the keyboard can be added to HTML using entity names or entity numbers. A symbol can be referenced by its entity name, its decimal entity number, or its hexadecimal entity number. [S1]
The Euro sign demonstrates all three reference forms producing the same output: [S1]
```html
<p>I will display &euro;</p>
<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>
```
**HTML Symbol Entities** [S1]
| Character | Number | Entity | Description |
|---|---|---|---|
| © | `&#169;` | `&copy;` | COPYRIGHT |
| ® | `&#174;` | `&reg;` | REGISTERED TRADEMARK |
| € | `&#8364;` | `&euro;` | EURO SIGN |
| ™ | `&#8482;` | `&trade;` | TRADEMARK |
| ← | `&#8592;` | `&larr;` | LEFT ARROW |
| ↑ | `&#8593;` | `&uarr;` | UP ARROW |
| → | `&#8594;` | `&rarr;` | RIGHT ARROW |
| ↓ | `&#8595;` | `&darr;` | DOWN ARROW |
| ♠ | `&#9824;` | `&spades;` | SPADE |
| ♣ | `&#9827;` | `&clubs;` | CLUB |
| ♥ | `&#9829;` | `&hearts;` | HEART |
| ♦ | `&#9830;` | `&diams;` | DIAMOND |
**HTML Mathematical Entities** [S1]
| Character | Number | Entity | Description |
|---|---|---|---|
| ∀ | `&#8704;` | `&forall;` | For all |
| ∂ | `&#8706;` | `&part;` | Partial differential |
| ∃ | `&#8707;` | `&exist;` | There exists |
| ∅ | `&#8709;` | `&empty;` | Empty sets |
| ∇ | `&#8711;` | `&nabla;` | Nabla |
| ∈ | `&#8712;` | `&isin;` | Element of |
| ∉ | `&#8713;` | `&notin;` | Not an element of |
| ∋ | `&#8715;` | `&ni;` | Contains as member |
| ∏ | `&#8719;` | `&prod;` | N-ary product |
| ∑ | `&#8721;` | `&sum;` | N-ary summation |
**HTML Greek Letter Entities** [S1]
| Character | Number | Entity | Description |
|---|---|---|---|
| Α | `&#913;` | `&Alpha;` | GREEK ALPHA |
| Β | `&#914;` | `&Beta;` | GREEK BETA |
| Γ | `&#915;` | `&Gamma;` | GREEK GAMMA |
| Δ | `&#916;` | `&Delta;` | GREEK DELTA |
| Ε | `&#917;` | `&Epsilon;` | GREEK EPSILON |
| Ζ | `&#918;` | `&Zeta;` | GREEK ZETA |
**More Symbols**
The page links to many extended symbol reference categories, including: Currency Symbols, Letterlike Symbols, Number Forms, Enclosed Alphanumeric, Box Drawings, Block Elements, Geometric Shapes, Misc Symbols, Dingbats, Astrological Symbols, Math Operators, Math Symbols, Math Alphanumeric, Misc Technical, Colored Symbols, Arrows, Weather Symbols, Musical Symbols, Domino & Dices, Mahjong Tiles, Card Symbols, Chess Symbols, Yin Yang Symbols, Recycling Symbols, Life & Religion, and Places & Traffic. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The Euro-sign example above is the canonical applied case: displaying one symbol three equivalent ways (name, decimal, hex). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Display the Euro symbol three equivalent ways (HTML):
```html
<p>I will display &euro;</p>
<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>
```
Common symbol references (HTML):
```html
<p>Copyright: &copy;</p>
<p>Registered: &reg;</p>
<p>Trademark: &trade;</p>
<p>Heart: &hearts;</p>
```
## ⚖️ 모순 및 업데이트 (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 Emojis]], [[HTML Charsets]], [[HTML Entities]], [[HTML URL Encode]]
- **참조 맥락:** Referenced whenever a page must display a character that is not directly typeable on a keyboard.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Symbols — https://www.w3schools.com/html/html_symbols.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Symbols" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Tables.md
+169
View File
@@ -0,0 +1,169 @@
---
id: html-tables
title: "HTML Tables"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML table", "table element", "tr td th", "data table HTML", "tabular data"]
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", "tables"]
raw_sources: ["https://www.w3schools.com/html/html_tables.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Tables]]
## 🎯 한 줄 통찰 (One-line insight)
HTML tables let web developers arrange data into rows and columns using a `<table>` container whose rows (`<tr>`) hold header cells (`<th>`) and data cells (`<td>`). [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<table>` is the container** for the entire table. [S1]
- **Rows are `<tr>`** ("table row") — each row starts with `<tr>` and ends with `</tr>`. [S1]
- **Data cells are `<td>`** ("table data") — everything between `<td>` and `</td>` is the content of a table cell. [S1]
- **Header cells are `<th>`** ("table header") — used for headings; by default the text is **bold and centered**, but this can be changed with CSS. [S1]
- **Cells can hold anything** — a table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Row-then-cell pattern** — a table is built row by row; inside each `<tr>` you place one cell (`<td>` or `<th>`) per column. [S1]
- **Header row pattern** — the first `<tr>` typically uses `<th>` cells to label each column. [S1]
- **Grouping pattern** — `<thead>`, `<tbody>`, and `<tfoot>` group the header, body, and footer content; `<colgroup>`/`<col>` describe column-level formatting; `<caption>` titles the table. [S1]
## 📖 세부 내용 (Details)
**HTML Tables.** HTML tables allow web developers to arrange data into rows and columns. [S1]
A basic table with a header row and two data rows:
```html
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
```
**Table Cells.** Each table cell is defined by a `<td>` and a `</td>` tag. `td` stands for table data. Everything between `<td>` and `</td>` is the content of a table cell. [S1]
```html
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
```
A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc. [S1]
**Table Rows.** Each table row starts with a `<tr>` and ends with a `</tr>` tag. `tr` stands for table row. You can have as many rows as you like in a table; just make sure the number of cells is the same in each row. [S1]
```html
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
```
**Table Headers.** Sometimes you want your cells to be table header cells. In those cases use the `<th>` tag instead of the `<td>` tag. `th` stands for table header. By default, the text in `<th>` elements are bold and centered, but you can change that with CSS. [S1]
```html
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
```
**HTML Table Tags.** [S1]
| Tag | Description |
|---|---|
| `<table>` | Defines a table |
| `<th>` | Defines a header cell in a table |
| `<tr>` | Defines a row in a table |
| `<td>` | Defines a cell in a table |
| `<caption>` | Defines a table caption |
| `<colgroup>` | Specifies a group of one or more columns in a table for formatting |
| `<col>` | Specifies column properties for each column within a `<colgroup>` element |
| `<thead>` | Groups the header content in a table |
| `<tbody>` | Groups the body content in a table |
| `<tfoot>` | Groups the footer content in a table |
## 🛠️ 적용 사례 (Applied in summary)
The "Company / Contact / Country" example above is the canonical applied example of a complete data table with a header row. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Minimal table (HTML):
```html
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
```
Header cell vs. data cell:
```html
<th>Header text (bold, centered)</th>
<td>Data text</td>
```
## ⚖️ 모순 및 업데이트 (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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Lists]], [[HTML Block and Inline]], [[HTML Div]], [[HTML Elements]]
- **참조 맥락:** Referenced whenever tabular data must be presented in rows and columns on a web page.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Tables — https://www.w3schools.com/html/html_tables.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Tables" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_URL_Encode.md
+122
View File
@@ -0,0 +1,122 @@
---
id: html-url-encode
title: "HTML URL Encode"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["URL encoding", "percent encoding", "URL", "Uniform Resource Locator", "URL schemes", "ASCII URL encoding"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "url", "encoding", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_urlencode.asp"]
applied_in: []
github_commit: ""
---
# [[HTML URL Encode]]
## 🎯 한 줄 통찰 (One-line insight)
A URL (Uniform Resource Locator) is a web address that can only be sent over the Internet using the ASCII character set, so non-ASCII characters are **URL-encoded** — replaced by a `%` followed by hexadecimal digits (and spaces by `+` or `%20`). [S1]
## 🧠 핵심 개념 (Core concepts)
- **URL** — a Uniform Resource Locator is a web address used to request pages from web servers. [S1]
- **URL syntax** — a URL follows the structure `scheme://prefix.domain:port/path/filename`. [S1]
- **Schemes** — the type of Internet service (http, https, ftp, file). [S1]
- **Why encoding is needed** — URLs can only be sent over the Internet using the ASCII character set; characters outside ASCII must be encoded. [S1]
- **Encoding scheme** — non-ASCII characters become `%` + hexadecimal digits; spaces become `+` or `%20`. [S1]
- **Default charset** — the default character set in HTML5 is UTF-8. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **URL syntax pattern** — `scheme://prefix.domain:port/path/filename`. [S1]
- **Percent-encoding pattern** — `%HH` where `HH` is the hexadecimal value of the byte (e.g. `%20` for a space). [S1]
- **Space encoding** — `+` or `%20`. [S1]
- **Multi-byte UTF-8 encoding** — one character may expand to several `%HH` pairs (e.g. © → `%C2%A9` in UTF-8). [S1]
## 📖 세부 내용 (Details)
**URL — Uniform Resource Locator**
A URL is a web address used to request pages from web servers. The basic syntax is: [S1]
```
scheme://prefix.domain:port/path/filename
```
Syntax components: [S1]
| Component | Meaning |
|---|---|
| `scheme` | The type of Internet service (http or https are most common) |
| `prefix` | The domain prefix (default for http is `www`) |
| `domain` | The Internet domain name (e.g. `w3schools.com`) |
| `port` | The port number at the host (default for http is `80`) |
| `path` | The path at the server (root directory if omitted) |
| `filename` | The name of the document or resource |
**Common URL Schemes** [S1]
| Scheme | Short for | Used for |
|---|---|---|
| http | HyperText Transfer Protocol | Common web pages. Not encrypted |
| https | Secure HyperText Transfer Protocol | Secure web pages. Encrypted |
| ftp | File Transfer Protocol | Downloading or uploading files |
| file | — | A file on your computer |
**URL Encoding**
URLs can only be sent over the Internet using the ASCII character set. If a URL contains characters outside the ASCII set, it has to be converted. URL encoding replaces non-ASCII characters with a `%` followed by hexadecimal digits. URLs cannot contain spaces; a space is encoded with `+` or `%20`. The default character set in HTML5 is UTF-8. [S1]
**ASCII Encoding Examples** [S1]
| Character | From Windows-1252 | From UTF-8 |
|---|---|---|
| € | %80 | %E2%82%AC |
| £ | %A3 | %C2%A3 |
| © | %A9 | %C2%A9 |
| ® | %AE | %C2%AE |
| À | %C0 | %C3%80 |
| Á | %C1 | %C3%81 |
| Â | %C2 | %C3%82 |
| Ã | %C3 | %C3%83 |
| Ä | %C4 | %C3%84 |
| Å | %C5 | %C3%85 |
(Ten character mappings shown; the page references a complete URL encoding reference guide elsewhere.) [S1]
## 🛠️ 적용 사례 (Applied in summary)
The ASCII encoding examples above are the canonical applied case: converting characters such as © to `%C2%A9` (UTF-8) so they can travel safely inside a URL. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
URL structure (syntax template):
```
scheme://prefix.domain:port/path/filename
```
Percent-encoded values (examples):
```
space -> %20 (or +)
© -> %C2%A9 (UTF-8)
€ -> %E2%82%AC (UTF-8) / %80 (Windows-1252)
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note that the same character encodes differently depending on the source character set (e.g. € is `%80` from Windows-1252 but `%E2%82%AC` from UTF-8); HTML5's default UTF-8 governs modern encoding. [S1]
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Charsets]], [[HTML Symbols]], [[HTML Links]], [[HTML Forms]]
- **참조 맥락:** Referenced when constructing or transmitting web addresses, especially query strings and links containing special characters.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML URL Encode — https://www.w3schools.com/html/html_urlencode.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML URL Encode" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Video.md
+127
View File
@@ -0,0 +1,127 @@
---
id: html-video
title: "HTML Video"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["video element", "<video>", "HTML5 video", "embed video", "video controls"]
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", "media", "video", "html5", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html5_video.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Video]]
## 🎯 한 줄 통찰 (One-line insight)
The HTML `<video>` element embeds video natively in a page; multiple `<source>` children let the browser pick the first format it supports, with `controls`, `autoplay`, and `muted` attributes governing playback. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`<video>` shows video** — it embeds a video player directly, with `width` and `height` defining its size. [S1]
- **`controls` adds the UI** — the `controls` attribute adds video controls such as play, pause, and volume. [S1]
- **Multiple `<source>` for fallback** — list several `<source>` elements with different formats; the browser uses the first format it recognizes. Text between the tags is shown if none is supported. [S1]
- **`autoplay` starts on load**, but Chromium browsers do not allow autoplay in most cases. [S1]
- **`muted` enables autoplay** — adding `muted` after `autoplay` lets the video start automatically (muted autoplay is always allowed). [S1]
- **Three HTML-standard formats** — MP4, WebM, and Ogg. [S1]
- **Scriptable** — DOM methods, properties, and events let JavaScript load, play, and pause videos and set duration and volume. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Multi-source fallback pattern** — `<video controls>` wrapping ordered `<source>` elements + fallback text. [S1]
- **Sized player pattern** — always set `width`/`height` to reserve layout space. [S1]
- **Muted autoplay pattern** — `autoplay muted` to start playback within browser autoplay policies. [S1]
## 📖 세부 내용 (Details)
**The HTML `<video>` element** — used to show a video on a web page. To show a video, use the `<video>` element. The `controls` attribute adds video controls (play, pause, volume). It is good practice to include `width` and `height`; if not set, the page may flicker while the video loads. Multiple `<source>` elements link to different video files — the browser will use the first recognized format. The text between `<video>` and `</video>` is shown only in browsers that do not support the element. [S1]
```html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
```
**HTML `<video>` autoplay** — to start a video automatically, use the `autoplay` attribute. Note: Chromium browsers do not allow autoplay in most cases; however, muted autoplay is always allowed: [S1]
```html
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
```
Add `muted` after `autoplay` to let the video start playing automatically (but muted): [S1]
```html
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
```
**HTML video formats** — there are three supported video formats: MP4, WebM, and Ogg. The MIME (media) type for each: [S1]
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
MP4 has the broadest browser support. [S1]
**HTML video — methods, properties, and events** — HTML defines DOM methods, properties, and events for the `<video>` element. This allows you to load, play, and pause videos, as well as set duration and volume, and includes DOM events that can notify you when a video begins to play, is paused, etc. The source directs to the "HTML Audio/Video DOM Reference" for the full list. [S1]
**HTML video tags** — [S1]
| Tag | Description |
|---|---|
| `<video>` | Defines a video or movie |
| `<source>` | Defines multiple media resources for media elements, such as `<video>` and `<audio>` |
| `<track>` | Defines text tracks in media players |
## 🛠️ 적용 사례 (Applied in summary)
The examples above are the canonical applied uses: a controlled player offering MP4 with an Ogg fallback, an autoplay variant, and a muted-autoplay variant that complies with modern browser autoplay policies. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Standard video player with fallback (HTML):
```html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
```
Muted autoplay (HTML):
```html
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
</video>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. The notable real-world constraint is browser autoplay policy: `autoplay` alone is blocked by Chromium browsers in most cases, so `muted` is required for reliable autoplay. [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 Audio]], [[HTML Media]], [[HTML Plug-ins]], [[HTML5]]
- **참조 맥락:** Referenced when embedding playable video with cross-browser format fallbacks.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Video — https://www.w3schools.com/html/html5_video.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Video" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Web_APIs.md
+98
View File
@@ -0,0 +1,98 @@
---
id: html-web-apis
title: "HTML Web APIs"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Web API", "Application Programming Interface", "HTML5 APIs", "browser APIs", "third party APIs"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.88
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "api", "html5"]
raw_sources: ["https://www.w3schools.com/html/html5_api_whatis.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Web APIs]]
## 🎯 한 줄 통찰 (One-line insight)
A Web API is an application programming interface for the Web that extends browser functionality and provides easy syntax to otherwise complex code; modern browsers ship several built-in Web APIs. [S1]
## 🧠 핵심 개념 (Core concepts)
- **API = Application Programming Interface** — an interface that includes a set of functions and subroutines allowing programmers to access specific features or data of an application, operating system, or other service. [S1]
- **Web API** — an application programming interface for the Web. It can extend the functionality of the browser, greatly simplify complex functions, and provide easy syntax to complex code. [S1]
- **Built into the browser** — all browsers include a set of built-in Web APIs. [S1]
- **Third party APIs** — APIs that are not built into the browser; to use them you download the code from the Web. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Browser-native vs third-party** — distinguish built-in APIs (Geolocation, Drag and Drop, Web Storage, Web Workers, Server-Sent Events, Canvas) from third-party APIs you must import (YouTube, Twitter, Facebook). [S1]
- **API as an abstraction layer** — the API hides complex underlying code behind a simpler, accessible syntax. [S1]
## 📖 세부 내용 (Details)
**What is a Web API?**
API stands for **A**pplication **P**rogramming **I**nterface. An API is some kind of interface that includes a set of functions and subroutines that allow programmers to access specific features or data of an application, operating system, or other services. A Web API is an application programming interface for the Web. [S1]
**What Web APIs can do**
A Web API: [S1]
- Can extend the functionality of the browser
- Can greatly simplify complex functions
- Can provide easy syntax to complex code
**Browser APIs**
All browsers include a set of built-in Web APIs. The Web APIs covered in this tutorial are: [S1]
| API | Purpose |
|---|---|
| Geolocation API | Used to access the current location of a user (with latitude and longitude) |
| Drag and Drop API | Enables you to use drag-and-drop features in browsers |
| Web Storage API | Mechanisms to let browsers store key/value pairs (in a more intuitive way than cookies) |
| Web Workers API | Allows a JavaScript to run in the background, without affecting the performance of the page |
| Server-Sent Events API | Allows a web page to automatically get updates from a server |
| Canvas API | Lets you draw graphics, on the fly, via JavaScript |
**Third party APIs**
Third party APIs are not built into your browser. To use these APIs, you will have to download the code from the Web. Examples include: [S1]
- YouTube API
- Twitter API
- Facebook API
## 🛠️ 적용 사례 (Applied in summary)
This page is an index/overview; its "applied" value is orientation — it points to the concrete API topics (Geolocation, Drag and Drop, Web Storage, Web Workers, SSE, Canvas) that each carry their own examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Not found in source — this overview page presents no code examples; concrete usage lives in the individual API topic pages (e.g. [[HTML Geolocation]], [[HTML Web Storage]]).
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The page distinguishes two categories of Web APIs, which guides where the implementing code comes from: [S1]
| Category | Built into browser? | How to use |
|---|---|---|
| Browser (built-in) APIs | Yes | Available natively (Geolocation, Drag and Drop, Web Storage, Web Workers, SSE, Canvas) |
| Third party APIs | No | Download the code from the Web (e.g. YouTube, Twitter, Facebook) |
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Geolocation]], [[HTML Drag and Drop]], [[HTML Web Storage]], [[HTML Web Workers]], [[HTML SSE]]
- **참조 맥락:** The entry point that frames the entire HTML5 Web APIs section.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Web APIs — https://www.w3schools.com/html/html5_api_whatis.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Web APIs" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Web_Storage.md
+180
View File
@@ -0,0 +1,180 @@
---
id: html-web-storage
title: "HTML Web Storage"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Web Storage API", "localStorage", "sessionStorage", "HTML5 storage", "client-side storage"]
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", "web-storage", "localstorage", "sessionstorage", "html5"]
raw_sources: ["https://www.w3schools.com/html/html5_webstorage.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Web Storage]]
## 🎯 한 줄 통찰 (One-line insight)
HTML Web Storage lets applications store key/value data locally in the browser — `localStorage` with no expiration and `sessionStorage` for a single tab session — with a far larger limit than cookies (at least 5MB) and without ever sending the data to the server. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Web storage** — stores data locally within the user's browser; more secure than cookies and capable of holding large amounts of data without affecting website performance. [S1]
- **`window.localStorage`** — stores data with no expiration date; data is not lost when the browser tab is closed. [S1]
- **`window.sessionStorage`** — stores data for one session; data is lost when the browser tab is closed. [S1]
- **Per origin** — web storage is per origin (per domain and protocol); all pages from one origin can store and access the same data. [S1]
- **Never sent to server** — unlike cookies, the information is never transferred to the server, and the storage limit is far larger (at least 5MB). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Feature-detect with `typeof(Storage)`** — `if (typeof(Storage) !== "undefined") { ... }`. [S1]
- **`setItem` / `getItem` / `removeItem`** — create, read, and delete name/value pairs. [S1]
- **Values are strings** — name/value pairs are always stored as strings; convert to other formats as needed. [S1]
- **Counter idiom** — read a stored count, increment with `Number(...)+1`, and write it back. [S1]
## 📖 세부 내용 (Details)
**What is HTML Web Storage?**
With web storage, applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Web storage is per origin (per domain and protocol); all pages from one origin can store and access the same data. [S1]
**The two storage objects** [S1]
- `window.localStorage` — stores data with no expiration date (data is not lost when the browser tab is closed).
- `window.sessionStorage` — stores data for one session (data is lost when the browser tab is closed).
**Browser support**
| API | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| localStorage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
| sessionStorage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
**Feature detection**
```javascript
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
x.innerHTML = "Your browser supports Web storage!";
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
```
**The localStorage object**
```javascript
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
localStorage.setItem("bgcolor", "yellow");
// Retrieve
x.innerHTML = localStorage.getItem("lastname");
x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
```
Example explained: [S1]
- Use the `localStorage.setItem()` method to create name/value pairs.
- Use the `localStorage.getItem()` method to retrieve the values set.
- Retrieve the value of "lastname" and insert it into an element with `id="result"`.
- Retrieve the value of "bgcolor" and insert it into the style `backgroundColor` of the element with `id="result"`.
To remove an item:
```javascript
localStorage.removeItem("lastname");
```
**Note:** Name/value pairs are always stored as strings. Remember to convert them to another format when needed! [S1]
**Counting clicks with localStorage**
```javascript
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
x.innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)!";
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
}
```
Because this uses `localStorage`, the count persists even after the browser is closed and reopened. [S1]
**The sessionStorage object**
The `sessionStorage` object is equal to the `localStorage` object, **except** that it stores the data for only one session — the data is deleted when the user closes the specific browser tab. [S1]
```javascript
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
x.innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session!";
} else {
x.innerHTML = "Sorry, no Web storage support!";
}
}
```
## 🛠️ 적용 사례 (Applied in summary)
The applied cases are the persistent name/value store (lastname + bgcolor), the persistent click counter (`localStorage`), and the per-session click counter (`sessionStorage`). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Store and retrieve (JavaScript):
```javascript
localStorage.setItem("lastname", "Smith");
const name = localStorage.getItem("lastname");
```
Remove an item (JavaScript):
```javascript
localStorage.removeItem("lastname");
```
Per-session counter increment (JavaScript):
```javascript
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The page presents two storage objects with the same API but different lifetimes: [S1]
| Object | Expiration / lifetime | Use when |
|---|---|---|
| `localStorage` | No expiration; survives tab close | Data should persist across sessions |
| `sessionStorage` | One session; deleted when the tab is closed | Data should only live for the current tab session |
Both are per origin, store strings, and offer at least 5MB versus the much smaller, server-transmitted cookies. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Practical caveat: values are always strings, so numeric counters use `Number(...)` conversion. [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 Web APIs]], [[HTML Geolocation]], [[HTML Web Workers]], [[HTML SSE]]
- **참조 맥락:** Referenced whenever an app needs to persist user data client-side without cookies or a server round-trip.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Web Storage — https://www.w3schools.com/html/html5_webstorage.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Web Storage" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_Web_Workers.md
+174
View File
@@ -0,0 +1,174 @@
---
id: html-web-workers
title: "HTML Web Workers"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Web Workers API", "Worker", "background JavaScript", "postMessage", "HTML5 web worker"]
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", "web-workers", "concurrency", "html5"]
raw_sources: ["https://www.w3schools.com/html/html5_webworkers.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Web Workers]]
## 🎯 한 줄 통찰 (One-line insight)
A web worker is an external JavaScript file that runs in the background, independently of other scripts, so heavy computation can run without making the page unresponsive. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Why workers exist** — when executing scripts in an HTML page, the page becomes unresponsive until the script finishes; a worker moves that work off the main thread. [S1]
- **Web worker** — an external JavaScript file that runs in the background, independently of other scripts, without affecting the performance of the page. [S1]
- **Stays interactive** — you can keep clicking and selecting things while the web worker runs in the background. [S1]
- **`postMessage()` / `onmessage`** — the worker posts messages back to the page with `postMessage()`; the page receives them via the worker object's `onmessage` handler. [S1]
- **`terminate()`** — stops a running worker; setting the variable to `undefined` lets it be recreated/reused. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Feature-detect with `typeof(Worker)`** — `if (typeof(Worker) !== "undefined") { ... }`. [S1]
- **Create once** — guard creation with `if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); }` to avoid duplicate workers. [S1]
- **Message handler updates the DOM** — `w.onmessage = function(event){ ... = event.data; }`. [S1]
- **Stop then reset** — `w.terminate(); w = undefined;`. [S1]
## 📖 세부 내용 (Details)
**What is a web worker?**
When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is an external JavaScript file that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want — clicking, selecting things, etc. — while the web worker runs in the background. Web workers are useful for heavy code that can't be run on the main thread without causing long tasks that make the page unresponsive. [S1]
**Browser support**
| API | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
**Check web worker support**
```javascript
const x = document.getElementById("result");
if(typeof(Worker) !== "undefined") {
x.innerHTML = "Your browser support Web Workers!";
} else {
x.innerHTML = "Sorry, your browser does not support Web Workers.";
}
```
**Create a web worker file (`demo_workers.js`)**
The important part is the `postMessage()` method, which is used to post messages back to the HTML page. [S1]
```javascript
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
```
**Create the worker object and handle messages**
```javascript
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
```
**Terminate and reuse**
```javascript
w.terminate();
w = undefined;
```
**Full HTML example**
```html
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
const x = document.getElementById("result");
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
x.innerHTML = event.data;
};
} else {
x.innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
```
**Web workers and the DOM**
Since web workers are in external `.js` files, they do not have access to the following JavaScript objects: the `window` object, the `document` object, the `parent` object. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The applied case is the counting demo: a worker (`demo_workers.js`) that increments a counter every 500ms and posts each value back, while the page stays responsive and offers Start/Stop buttons. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Create a worker once and receive messages (JavaScript):
```javascript
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
```
Worker side — post a message back (JavaScript, in the worker file):
```javascript
postMessage(i);
```
Stop and reset (JavaScript):
```javascript
w.terminate();
w = undefined;
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Key constraint: workers run in separate files and cannot access `window`, `document`, or `parent` — they communicate only via messages. [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 Web APIs]], [[HTML SSE]], [[HTML Web Storage]], [[HTML Geolocation]]
- **참조 맥락:** Referenced whenever heavy client-side computation must run without freezing the UI.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Web Workers — https://www.w3schools.com/html/html5_webworkers.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Web Workers" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_YouTube.md
+118
View File
@@ -0,0 +1,118 @@
---
id: html-youtube
title: "HTML YouTube"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["YouTube embed", "HTML YouTube video", "embed YouTube iframe", "YouTube player parameters", "HTML video YouTube"]
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", "youtube", "video", "iframe"]
raw_sources: ["https://www.w3schools.com/html/html_youtube.asp"]
applied_in: []
github_commit: ""
---
# [[HTML YouTube]]
## 🎯 한 줄 통찰 (One-line insight)
The easiest way to play videos in HTML is to embed them from YouTube using an `<iframe>` whose `src` points to the YouTube embed URL, avoiding the need to convert videos to multiple formats yourself. [S1]
## 🧠 핵심 개념 (Core concepts)
- **YouTube as a video host** — instead of supporting many video formats in your own player, you can let YouTube serve and play the video. [S1]
- **Video ID** — every YouTube video has an id (e.g. `tgbNymZ7vqY`) that identifies which video to embed. [S1]
- **The `<iframe>` embed** — an `<iframe>` element with `width`, `height`, and a `src` pointing to `https://www.youtube.com/embed/<VIDEO_ID>` displays the player. [S1]
- **URL parameters control behavior** — autoplay, mute, loop, and controls are configured through query-string parameters appended to the embed URL. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Embed pattern** — `https://www.youtube.com/embed/<VIDEO_ID>` is the base; append `?param=value&param=value` for options. [S1]
- **Autoplay must be muted** — Chromium browsers block autoplay in most cases, but *muted* autoplay is always allowed, so pair `autoplay=1` with `mute=1`. [S1]
- **Loop needs a playlist** — to loop a single video, set `playlist=<VIDEO_ID>` together with `loop=1`. [S1]
- **Default-on controls** — `controls=1` (the default) shows player controls; `controls=0` hides them. [S1]
## 📖 세부 내용 (Details)
**Basic YouTube embed**
To embed a YouTube video you need the video id and an `<iframe>` with the embed `src` plus `width`/`height`: [S1]
```html
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
```
**Autoplay + Mute**
You can let your video start playing automatically when a user visits the page by adding `autoplay=1` to the YouTube URL. Chromium browsers do not allow autoplay in most cases; however, muted autoplay is always allowed. Add `mute=1` after `autoplay=1` to let your video start playing automatically (but muted). [S1]
```html
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
```
**Loop**
Use the loop parameter to repeat playback. To loop a single video you must also pass it as the playlist. [S1]
```html
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
```
| Parameter value | Meaning |
|---|---|
| `loop=0` (default) | The video will play only once |
| `loop=1` | The video will loop (forever) |
**Controls**
The `controls` parameter toggles the player controls. [S1]
```html
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
```
| Parameter value | Meaning |
|---|---|
| `controls=0` | Player controls does not display |
| `controls=1` (default) | Player controls is displayed |
## 🛠️ 적용 사례 (Applied in summary)
The embed snippets above are the canonical applied examples: a basic embedded player and three configured variants (muted autoplay, looping, hidden controls). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Generic embed (HTML):
```html
<iframe width="420" height="315"
src="https://www.youtube.com/embed/VIDEO_ID?PARAMETERS">
</iframe>
```
Muted autoplay (HTML):
```html
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note the browser-policy constraint that shapes usage: unmuted autoplay is blocked in most Chromium browsers, so reliable autoplay requires `mute=1`. [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 Video]], [[HTML Audio]], [[HTML Iframes]], [[HTML Media]]
- **참조 맥락:** Referenced whenever a page needs to display video without self-hosting media files.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML YouTube — https://www.w3schools.com/html/html_youtube.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML YouTube" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_HTML/HTML_vs_XHTML.md
+144
View File
@@ -0,0 +1,144 @@
---
id: html-vs-xhtml
title: "HTML vs XHTML"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["XHTML", "HTML versus XHTML", "Extensible HyperText Markup Language", "well-formed HTML", "XHTML rules", "XHTML vs HTML"]
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", "xhtml", "xml", "w3schools"]
raw_sources: ["https://www.w3schools.com/html/html_xhtml.asp"]
applied_in: []
github_commit: ""
---
# [[HTML vs XHTML]]
## 🎯 한 줄 통찰 (One-line insight)
XHTML (Extensible HyperText Markup Language) is a stricter, XML-based reformulation of HTML that enforces "well-formed" markup — every element properly nested, closed, lowercase, and quoted — where HTML browsers would normally tolerate errors. [S1]
## 🧠 핵심 개념 (Core concepts)
- **XHTML = Extensible HyperText Markup Language** — a stricter, more XML-based version of HTML; HTML defined as an XML application, supported by all major browsers. [S1]
- **Why XHTML** — XML requires documents to be properly marked up and "well-formed." XHTML enhances HTML's extensibility and compatibility with other XML data formats and enforces stricter error handling than HTML. [S1]
- **HTML is lenient, XHTML is strict** — browsers tolerate HTML errors and render anyway; XHTML enforces stricter standards. [S1]
- **Nine core differences** — mandatory DOCTYPE and `xmlns`, mandatory structural elements, proper nesting, mandatory closing, lowercase elements and attribute names, quoted attribute values, and no attribute minimization. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Mandatory document skeleton** — `<!DOCTYPE>` + `<html xmlns="...">` + `<head>` + `<title>` + `<body>`. [S1]
- **Self-closing empty elements** — `<br />`, `<hr />`, `<img ... />`. [S1]
- **Full attribute form** — `checked="checked"` rather than bare `checked`. [S1]
- **Quoted + lowercase** — all attribute values quoted; all element and attribute names lowercase. [S1]
## 📖 세부 내용 (Details)
**What is XHTML?**
XHTML stands for E**X**tensible **H**yper**T**ext **M**arkup **L**anguage. It is a stricter, more XML-based version of HTML — HTML defined as an XML application — and is supported by all major browsers. [S1]
**Why XHTML?**
XML is a markup language where all documents must be properly marked up and "well-formed." XHTML was developed to make HTML more extensible and compatible with other data formats such as XML. In addition, browsers tend to ignore HTML errors and try to display the website even if it has errors in the markup; XHTML enforces stricter error handling. [S1]
**The Most Important Differences from HTML**
Nine mandatory XHTML requirements: [S1]
- `<!DOCTYPE>` declaration is mandatory.
- The `xmlns` attribute in `<html>` is mandatory.
- `<html>`, `<head>`, `<title>`, and `<body>` are mandatory.
- Elements must be properly nested.
- Elements must always be closed.
- Elements must be in lowercase.
- Attribute names must be in lowercase.
- Attribute values must be quoted.
- Attribute minimization is forbidden.
**XHTML DOCTYPE Declaration**
A minimal, well-formed XHTML document: [S1]
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>
```
**Elements Must Be Properly Nested**
Correct: `<b><i>Some text</i></b>`. Wrong: `<b><i>Some text</b></i>`. [S1]
**Elements Must Always Be Closed**
Correct: `<p>This is a paragraph</p>`. [S1]
**Empty Elements Must Also Be Closed**
Self-closing tags must include a trailing slash: [S1]
```html
<br />
<hr />
<img src="happy.gif" alt="Happy face" />
```
**Elements Must Be in Lowercase**
Both element names and attribute names must be lowercase. [S1]
**Attribute Values Must Be Quoted**
```html
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
```
**Attribute Minimization Is Forbidden**
Use the full form: `checked="checked"` instead of bare `checked`. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The minimal XHTML DOCTYPE document above is the canonical applied case: a complete, well-formed XHTML 1.1 page with the mandatory `xmlns`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Well-formed XHTML skeleton:
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>
```
Self-closing empty element and full-form attribute:
```html
<br />
<input type="checkbox" checked="checked" />
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **HTML** — lenient; browsers ignore many markup errors and still render the page. Easier to write, less strict. [S1]
- **XHTML** — strict, XML-based; documents must be well-formed (proper nesting, all elements closed, lowercase names, quoted values, no attribute minimization), and the DOCTYPE plus `xmlns` are mandatory. Choose XHTML when XML compatibility, extensibility, and rigorous, predictable parsing matter; choose HTML for simpler, more forgiving authoring. [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 Introduction]], [[HTML Elements]], [[HTML Attributes]], [[HTML Entities]]
- **참조 맥락:** Referenced when choosing between forgiving HTML and strict, XML-compliant XHTML markup.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML vs XHTML — https://www.w3schools.com/html/html_xhtml.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML vs XHTML" page (Astra wiki-curation, P-Reinforce v3.1 format).