2nd/10_Wiki/Topic_HTML/HTML_Links.md

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-links	HTML Links	Frontend	draft	conceptual		HTML hyperlinks a tag href attribute target attribute mailto link HTML anchor		B	0.89	2026-06-23	2026-06-23			html web frontend w3schools links hyperlinks	https://www.w3schools.com/html/html_links.asp

HTML Links

🎯 한 줄 통찰 (One-line insight)

The HTML <a> tag defines a hyperlink, using the href attribute for the destination and the target attribute to control where the linked document opens. [S1]

🧠 핵심 개념 (Core concepts)

• The <a> tag — defines a hyperlink; syntax is <a href="url">link text</a>, where href indicates the destination. [S1]
• The target attribute — controls where the link opens; values are _self (default, same window), _blank (new tab/window), _parent (parent frame), and _top (full window). [S1]
• Absolute vs relative URLs — absolute URLs are full web addresses; a relative URL links to a page within the same website. [S1]
• Image as a link — put an <img> tag inside the <a> tag. [S1]
• Email link — use mailto: inside href to open the user's email program. [S1]
• Button as a link — requires JavaScript (an onclick handler that sets document.location). [S1]
• The title attribute — specifies extra information, most often shown as a tooltip on hover. [S1]
• Link color states — an unvisited link is underlined and blue, a visited link is underlined and purple, an active link is underlined and red. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Basic link pattern — <a href="url">link text</a>. [S1]
• New-tab pattern — <a href="url" target="_blank">…</a>. [S1]
• Image-link pattern — nest <img> inside <a>. [S1]
• Email pattern — <a href="mailto:address">…</a>. [S1]
• Button-link pattern — <button onclick="document.location='url'">…</button>. [S1]
• Tooltip pattern — add a title attribute to the <a> tag. [S1]

📖 세부 내용 (Details)

Link syntax — the HTML <a> tag defines a hyperlink; it has the following syntax: [S1]

<a href="url">link text</a>

Basic link — a link to W3Schools.com: [S1]

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

The target attribute — use target="_blank" to open the linked document in a new browser window or tab. Target values are _self (default), _blank, _parent, and _top. [S1]

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Absolute vs relative URLs — a local link (a link to a page within the same website) is specified with a relative URL: [S1]

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

Image as a link — to use an image as a link, just put the <img> tag inside the <a> tag: [S1]

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Email link — use mailto: inside the href attribute to create a link that opens the user's email program: [S1]

<a href="mailto:someone@example.com">Send email</a>

Button as a link — to use an HTML button as a link, you have to add some JavaScript code: [S1]

<button onclick="document.location='default.asp'">HTML Tutorial</button>

Link title attribute — the title attribute specifies extra information about an element; the information is most often shown as a tooltip text: [S1]

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

Link color states — by default: an unvisited link is underlined and blue; a visited link is underlined and purple; an active link is underlined and red. [S1]

🛠️ 적용 사례 (Applied in summary)

The W3Schools basic link, the new-tab link, the image link, the mailto link, and the button link above are the canonical applied examples from the source. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Basic hyperlink (HTML):

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

Open in a new tab:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Image as a link:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Email link:

<a href="mailto:someone@example.com">Send email</a>

Button as a link:

<button onclick="document.location='default.asp'">HTML Tutorial</button>

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

The source distinguishes the four target values and absolute vs relative URLs: [S1]

Choice	Meaning
target="_self"	Open in the same window (default)
target="_blank"	Open in a new window or tab
target="_parent"	Open in the parent frame
target="_top"	Open in the full body of the window
Absolute URL	Full web address (e.g. https://www.w3.org/)
Relative URL	Page within the same website (e.g. html_images.asp)

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.89
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: HTML Tutorial
• 관련 개념: HTML Images, HTML Attributes, HTML Page Title, HTML Introduction
• 참조 맥락: Referenced whenever creating navigation, hyperlinks, email links, image links, or button-based navigation.

📚 출처 (Sources)

• [S1] W3Schools — HTML Links — https://www.w3schools.com/html/html_links.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "HTML Links" page (Astra wiki-curation, P-Reinforce v3.1 format).