Files

T

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

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>

2026-06-23 19:21:18 +09:00

6.9 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

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]

<!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]

<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:

<h2 id="C4">Chapter 4</h2>

Add a link to the bookmark from within the same page:

<a href="#C4">Jump to Chapter 4</a>

Or add a link to the bookmark from another page:

<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]

<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):

<style>
#myHeader { background-color: lightblue; }
</style>
<h1 id="myHeader">My Header</h1>

Same-page bookmark (HTML):

<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>

Select by id in 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).

6.9 KiB Raw Blame History