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

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

``` **Using the class attribute on `
` elements.** [S1] ```html

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

``` **The class attribute on inline (``) elements.** [S1] ```html

My Important Heading

This is some important text.

``` **Multiple Classes.** HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. `
`. The element will be styled according to all the classes specified. [S1] ```html

London

Paris

Tokyo

``` **Different Elements Can Share Same Class.** Different HTML elements can point to the same class name. [S1] ```html

Paris

Paris is the capital of France

``` **Using the class Attribute in JavaScript.** JavaScript can access elements with a specific class name by using the `getElementsByClassName()` method. [S1] ```javascript ``` > **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

London

``` Multiple classes (HTML): ```html
...
``` 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).