Files

T

koriweb 9609c04755 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>

2026-06-23 19:21:18 +09:00

7.8 KiB

Raw Blame History

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

title

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

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

7.8 KiB Raw Blame History