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>
This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
---
|
||||
id: html-attributes
|
||||
title: "HTML Attributes"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["HTML attribute", "href", "src", "alt", "style attribute", "lang attribute", "title attribute", "name/value pair"]
|
||||
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", "attributes"]
|
||||
raw_sources: ["https://www.w3schools.com/html/html_attributes.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[HTML Attributes]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Attributes provide additional information about HTML elements; they are always specified in the start tag as name/value pairs like `name="value"`. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **All elements can have attributes** — they give additional information about an element. [S1]
|
||||
- **Always in the start tag** — attributes are written inside the opening tag. [S1]
|
||||
- **Name/value pairs** — usually written as `name="value"`. [S1]
|
||||
- **`href`** — on `<a>`, specifies the URL the link goes to. [S1]
|
||||
- **`src`** — on `<img>`, specifies the path to the image; can be an absolute URL (external) or a relative URL (internal). [S1]
|
||||
- **`width` / `height`** — on `<img>`, provide size information in pixels. [S1]
|
||||
- **`alt`** — on `<img>`, provides alternate text shown if the image cannot be displayed, and used by screen readers. [S1]
|
||||
- **`style`** — adds styling such as color, font, size to an element. [S1]
|
||||
- **`lang`** — on `<html>`, declares the language of the page (aids search engines and browsers). [S1]
|
||||
- **`title`** — defines extra info about an element, shown as a tooltip on mouseover. [S1]
|
||||
|
||||
## 🧩 추출된 패턴 (Extracted patterns)
|
||||
- **Lowercase attribute names** — W3C recommends lowercase; W3Schools demands it. [S1]
|
||||
- **Quote the values** — W3C recommends quoting; required when the value contains spaces. [S1]
|
||||
- **Single vs. double quotes** — when a value itself contains double quotes, wrap it in single quotes (and vice-versa). [S1]
|
||||
- **Relative over absolute `src`** — relative URLs are preferable because they won't break if the domain changes. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
HTML attributes provide additional information about HTML elements. All HTML elements can have attributes; attributes are always specified in the start tag and usually come in name/value pairs like `name="value"`. [S1]
|
||||
|
||||
**The href Attribute**
|
||||
The `<a>` tag defines a hyperlink. The `href` attribute specifies the URL of the page the link goes to: [S1]
|
||||
```html
|
||||
<a href="https://www.w3schools.com">Visit W3Schools</a>
|
||||
```
|
||||
|
||||
**The src Attribute**
|
||||
The `<img>` tag is used to embed an image. The `src` attribute specifies the path to the image to be displayed: [S1]
|
||||
```html
|
||||
<img src="img_girl.jpg">
|
||||
```
|
||||
There are two ways to specify the URL in the `src` attribute. An **absolute URL** links to an external image hosted on another website. An **relative URL** links to an image hosted within the website; here the URL does not include the domain name. It is almost always best to use relative URLs — they will not break if you change domain. [S1]
|
||||
|
||||
**The width and height Attributes**
|
||||
The `<img>` tag should also contain the `width` and `height` attributes, which specify the width and height of the image (in pixels): [S1]
|
||||
```html
|
||||
<img src="img_girl.jpg" width="500" height="600">
|
||||
```
|
||||
|
||||
**The alt Attribute**
|
||||
The required `alt` attribute for `<img>` specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, an error in the `src` attribute, or if the user uses a screen reader: [S1]
|
||||
```html
|
||||
<img src="img_girl.jpg" alt="Girl with a jacket">
|
||||
```
|
||||
If a browser cannot find an image, it will display the value of the `alt` attribute: [S1]
|
||||
```html
|
||||
<img src="img_typo.jpg" alt="Girl with a jacket">
|
||||
```
|
||||
|
||||
**The style Attribute**
|
||||
The `style` attribute is used to add styles to an element, such as color, font, size, and more: [S1]
|
||||
```html
|
||||
<p style="color:red;">This is a red paragraph.</p>
|
||||
```
|
||||
|
||||
**The lang Attribute**
|
||||
You should always include the `lang` attribute inside the `<html>` tag, to declare the language of the Web page. This is meant to assist search engines and browsers: [S1]
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<body>
|
||||
...
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
Country codes can also be added to the language code in the `lang` attribute. The first two characters define the language; the last two define the country. For example "en-US" means English in the United States: [S1]
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<body>
|
||||
...
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**The title Attribute**
|
||||
The `title` attribute defines some extra information about an element. The value of the `title` attribute will be displayed as a tooltip when you mouse over the element: [S1]
|
||||
```html
|
||||
<p title="I'm a tooltip">This is a paragraph.</p>
|
||||
```
|
||||
|
||||
**Single or Double Quotes?**
|
||||
Double quotes around attribute values are the most common, but single quotes can also be used. In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes: [S1]
|
||||
```html
|
||||
<p title='John "ShotGun" Nelson'>
|
||||
```
|
||||
Or the opposite: [S1]
|
||||
```html
|
||||
<p title="John 'ShotGun' Nelson">
|
||||
```
|
||||
|
||||
**Chapter Summary**
|
||||
- All HTML elements can have **attributes**. [S1]
|
||||
- The `href` attribute of `<a>` specifies the URL of the page the link goes to. [S1]
|
||||
- The `src` attribute of `<img>` specifies the path to the image to be displayed. [S1]
|
||||
- The `width` and `height` attributes of `<img>` provide size information for images. [S1]
|
||||
- The `alt` attribute of `<img>` provides an alternate text for an image. [S1]
|
||||
- The `style` attribute is used to add styles to an element, such as color, font, size, and more. [S1]
|
||||
- The `lang` attribute of the `<html>` tag declares the language of the Web page. [S1]
|
||||
- The `title` attribute defines some extra information about an element. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
The `href`, `src`, `alt`, `width`, `height`, `style`, `lang`, and `title` examples above are the everyday attributes applied to links, images, and text on real pages. No external project/commit applications found in the source.
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Link with href (HTML):
|
||||
```html
|
||||
<a href="https://www.w3schools.com">Visit W3Schools</a>
|
||||
```
|
||||
Image with src, alt, width, height:
|
||||
```html
|
||||
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
|
||||
```
|
||||
Declaring page language:
|
||||
```html
|
||||
<html lang="en-US">
|
||||
```
|
||||
Inline style and tooltip:
|
||||
```html
|
||||
<p style="color:red;" title="I'm a tooltip">This is a red paragraph.</p>
|
||||
```
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
HTML does not strictly require lowercase attribute names or quoted values, but the W3C recommends both (and quoting is mandatory when a value contains spaces). The source advises preferring relative `src` URLs over absolute ones for resilience to domain changes. [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 Elements]], [[HTML Basic]], [[HTML Styles]], [[HTML Introduction]]
|
||||
- **참조 맥락:** Referenced whenever configuring an element's behavior, source, language, accessibility text, or inline styling.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — HTML Attributes — https://www.w3schools.com/html/html_attributes.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Attributes" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user