Antigravity Agent
1cfd3bbb56
Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
6.9 KiB
id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
| id | title | category | status | verification_status | canonical_id | aliases | duplicate_of | source_trust_level | confidence_score | created_at | updated_at | review_reason | merge_history | tags | raw_sources | applied_in | github_commit | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| html-id | HTML Id | Frontend | draft | conceptual |
|
B | 0.90 | 2026-06-23 | 2026-06-23 |
|
|
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
idattribute 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
idattribute 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
#idin CSS orgetElementByIdin 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
idattribute is used to specify a unique id for an HTML element. - The value of the
idattribute must be unique within the HTML document. - The
idattribute is used by CSS and JavaScript to style/select a specific element. - The value of the
idattribute is case sensitive. - The
idattribute 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
idfor a single, unique element on the page (targeted with#id); must be unique. [S1] - Use
classwhen 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).