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

My Header

``` > **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

My Cities

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

``` **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

Chapter 4

``` Add a link to the bookmark from within the same page: ```html Jump to Chapter 4 ``` Or add a link to the bookmark from another page: ```html Jump to Chapter 4 ``` **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 ``` **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

My Header

``` Same-page bookmark (HTML): ```html

Chapter 4

Jump to Chapter 4 ``` 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).