koriweb
9609c04755
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>
177 lines
6.9 KiB
Markdown
177 lines
6.9 KiB
Markdown
---
|
|
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).
|