koriweb
9609c04755
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>
7.8 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-attributes | HTML Attributes | Frontend | draft | conceptual |
|
B | 0.90 | 2026-06-23 | 2026-06-23 |
|
|
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]
<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]
<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]
<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]
<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]
<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]
<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]
<!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]
<!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]
<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]
<p title='John "ShotGun" Nelson'>
Or the opposite: [S1]
<p title="John 'ShotGun' Nelson">
Chapter Summary
- All HTML elements can have attributes. [S1]
- The
hrefattribute of<a>specifies the URL of the page the link goes to. [S1] - The
srcattribute of<img>specifies the path to the image to be displayed. [S1] - The
widthandheightattributes of<img>provide size information for images. [S1] - The
altattribute of<img>provides an alternate text for an image. [S1] - The
styleattribute is used to add styles to an element, such as color, font, size, and more. [S1] - The
langattribute of the<html>tag declares the language of the Web page. [S1] - The
titleattribute 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):
<a href="https://www.w3schools.com">Visit W3Schools</a>
Image with src, alt, width, height:
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
Declaring page language:
<html lang="en-US">
Inline style and tooltip:
<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).