<a>

시도해 보기

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}

특성

이 요소는 전역 특성을 포함합니다.

download

링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다.

• 값이 없으면 파일 이름과 확장자는 브라우저가 다양한 인자로부터 생성해 제안합니다.

  • Content-Disposition HTTP 헤더
  • URL 경로의 마지막 조각
  • 미디어 유형 (Content-Type 헤더, data: URL의 시작 부분, blob: URL의 Blob.type에서 알아냄)

• 값을 지정하면 저장할 때의 파일 이름으로서 제안합니다. /와 \ 문자는_로 변환합니다. 파일시스템에서 다른 문자도 제한할 수 있으므로, 필요한 경우 브라우저가 추가로 이름을 조정할 수 있습니다.

참고 :

• download는 동일 출처 URLê³¼ blob:, data: 스킴에서만 작동합니다.
• Content-Disposition의 filename이 download와 다를 땐 헤더가 우선권을 가집니다. (Content-Disposition: inline일 때, Firefox는 헤더를 우선하고 Chrome은 download를 우선합니다.)

href

하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다.

• 페이지 구획을 가리키는 프래그먼트 URL
• 미디어 파일 일부를 가리키는 미디어 프래그먼트
• tel: URL을 사용하는 전화번호
• mailto: URL을 사용하는 이메일 주소
• 웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 Navigator.registerProtocolHandler()를 통해 지원할 수 있습니다.

hreflang

링크 URL의 인간 언어에 대한 힌트. 특별한 내장 기능은 없습니다. 가능한 값은 전역 lang 특성과 동일합니다.

ping

하나의 스페이스로 구분하는 URL 목록. 링크를 클릭해 따라갈 경우, 브라우저가 URL 각각에 POST 요청을 전송합니다. 대개 추적 용도로 사용합니다.

referrerpolicy

URL을 가져올 때 사용할 리퍼러. Referrer-Policy 문서에서 가능한 값과 효과를 확인하세요.

rel

하나의 스페이스로 구분하는, 연결한 URL과의 관계를 나타내는 링크 유형 목록.

target

링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, ì°½, <iframe>의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.

• _self: URL을 현재 브라우징 맥락에 표시합니다. 기본값.
• _blank: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
• _parent: URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
• _top: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.

참고 : target을 사용할 때, rel="noreferrer"를 추가해 window.opener API의 악의적인 사용을 방지하는걸 고려하세요.

참고 : 최근의 브라우저(Firefox 79+ 등)에서는 target="_blank"를 지정하면 rel="noopener"를 적용한 것과 같은 동작을 합니다.

type

링크 URL의 MIME type에 대한 힌트. 특별한 내장 기능은 없습니다.

속성

예제

절대 URL로 연결

HTML

<a href="https://www.mozilla.com">Mozilla</a>

ê²°ê³¼

상대 URL로 연결

HTML

<a href="//example.com">Scheme-relative URL</a>
<a href="/ko/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>

a {
  display: block;
  margin-bottom: 0.5em;
}

ê²°ê³¼

같은 페이지의 요소로 연결

<!-- <a> 요소로 아래의 구획에 연결 -->
<p><a href="#Section_further_down">아래 제목으로 건너뛰기</a></p>

<!-- 링크가 향할 제목 -->
<h2 id="Section_further_down">아래의 제목</h2>

이메일 주소로 연결

사용자의 이메일 프로그램을 통해 새로운 메일을 보낼 수 있는 링크를 생성하려면 mailto: 스킴을 사용하세요.

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

제목과 본문 포함 등, mailto: URL에 관한 자세한 내용은 이메일 링크와 RFC 6068을 참고하세요.

전화번호로 연결

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>

tel: 링크는 장치의 능력에 따라 행동이 바뀝니다.

• 휴대전화에서는 번호를 자동으로 입력합니다.
• 대부분의 운영체제에는 Skype, FaceTime처럼 전화를 걸 수 있는 프로그램이 있습니다.
• 웹사이트는 Navigator.registerProtocolHandler()를 사용해 전화를 걸 수 있습니다. web.skype.com을 참고하세요.
• 다른 행동으로는 연락처에 저장하기와 다른 장치로 전송 등이 있습니다.

tel: URL의 구문, 추가 기능, ê·¸ 외 더 자세한 정보는 RFC 3966을 참고하세요.

download 특성으로 <canvas>를 PNG로 저장하기

download 특성과 data: URL을 사용해 <canvas> 요소의 콘텐츠를 이미지로 저장할 수 있습니다.

저장 링크를 가진 그림판 예제

HTML

<p>
  마우스 드래그로 그림을 그려보세요.
  <a href="" download="my_painting.png">다운로드</a>
</p>

<canvas width="300" height="300"></canvas>

CSS

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

JavaScript

var canvas = document.querySelector("canvas"),
  c = canvas.getContext("2d");
c.fillStyle = "hotpink";

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );

ê²°ê³¼

보안과 개인정보

<a> 요소는 사용자의 보안과 개인정보에 중요한 영향을 줄 수 있습니다. Referer 헤더: 개인정보와 보안 고려사항 문서에서 자세한 내용을 알아보세요.

target="_blank"를 rel="noreferrer"와 rel="noopener" 없이 사용하면 웹사이트가 window.opener API 악용 공격에 취약해집니다. (취약점 설명) 다만, 최근 브라우저(Firefox 79+ 등)는 target="_blank"를 지정하면 임의로 rel="noopener" 설정과 동일한 보호 수준을 적용합니다.

접근성

강한 링크 텍스트

링크 안의 콘텐츠는, 맥락에서 벗어나더라도 링크가 향하는 곳을 설명해야 합니다.

접근성 떨어지는 약한 링크 텍스트

심각하게 흔한 실수는 "여기를 클릭"이나 "여기"라는 단어에 링크를 한다는 것입니다.

<p>저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요.</p>

강한 링크 텍스트

다행히도 쉽게 수정할 수 있는 데다가, 접근성이 떨어지는 버전보다 더 짧습니다!

<p>저희의 <a href="/products">제품을 더 알아보세요</a>.</p>

접근성 보조 기술은 페이지 안의 모든 링크를 나열하는 단축키가 있습니다. 그러나 강한 링크 텍스트가 보조 기술 사용자에게만 도움을 주는 것은 아닙니다. 모든 링크 나열 단축키는 시각적 사용자가 페이지를 빠르게 훑는 것을 흉내 내는 것이기 때문입니다.

onclick 이벤트

앵커 요소의 href를 #이나 javascript:void(0)으로 지정해 페이지 새로고침을 막고, click 이벤트 처리기를 등록해서 가짜 버튼을 만드는 방식으로 남용하는 경우가 많습니다.

이런 가짜 href 값은 링크를 복사하거나 드래그할 때, 링크를 새 탭이나 새 창에서 열 때, 즐겨찾기에 추가할 때와 JavaScript를 불러오고 있거나 스크립트 오류가 발생했을 때, 아니면 비활성화했을 때 예측하지 못한 동작을 유발합니다. 또한 스크린 리더 등 ë³´ì¡° 기술에도 잘못된 의미를 전달합니다.

대신 <button>을 사용하세요. 하이퍼링크는 진짜 URL로의 탐색 용도로만 사용해야 합니다.

외부 링크와 비 HTML 리소스 링크

target="_blank"로 인해 새 탭/창을 여는 링크와, 파일을 다운로드하는 링크는, 링크를 클릭했을 때 무슨 일이 발생할건지 명시해야 합니다.

시력이 나쁘거나 스크린 리더로 탐색하는 사용자, 혹은 지각 능력이 낮은 사용자는 예상하지 못한 상황에서 새 탭, 새 창, 다른 앱이 켜지는 순간 혼란스러울 수 있습니다. 오래된 스크린 리더는 이런 상황을 아예 알려주지 못할 수도 있습니다.

새로운 탭/창을 여는 링크

<a target="_blank" href="https://ko.wikipedia.org">
  위키백과 (새 탭에서 열림)
</a>

비 HTML 리소스 링크

<a href="2017-annual-report.ppt">2017 연간 보고서 (PowerPoint)</a>

아이콘을 사용해 링크의 행동을 강조할 땐 대체 텍스트를 꼭 지정하세요.

<a target="_blank" href="https://ko.wikipedia.org">
  위키백과
  <img alt="(새 탭에서 열림)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 연간 보고서
  <img alt="(PowerPoint 파일)" src="ppt-icon.svg" />
</a>

• WebAIM: Links and Hypertext - Hypertext Links
• MDN / Understanding WCAG, Guideline 3.2
• G200: Opening new windows and tabs from a link only when necessary
• G201: Giving users advanced warning when opening a new window

건너뛰기 링크

건너뛰기 링크(skip link)는 <body> 콘텐츠에서 가능한 앞쪽에 배치하는 링크로, 페이지의 주요 콘텐츠 시작점을 가리킵니다. 건너뛰기 링크는 보통 포커스 전까지 숨겨집니다.

<body>
  <a href="#content">내용으로 건너뛰기</a>

  <header>…</header>

  <main id="content"><!-- 여기로 건너뜀 --></main>
</body>

.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}

건너뛰기 링크는 헤더 내비게이션과 같이 여러 페이지에서 반복되는 콘텐츠를 키보드 사용자가 쉽게 생략할 수 있도록 도와줍니다.

건너뛰기 링크는 스위치 조작, 음성 명령, 마우스 스틱/헤드 완드처럼 반복 콘텐츠를 건너뛰기 힘든 보조 기술 사용자에게 큰 도움이 됩니다.

• WebAIM: "Skip Navigation" Links
• How-to: Use Skip Navigation links
• MDN / Understanding WCAG, Guideline 2.4 explanations
• Understanding Success Criterion 2.4.1

크기와 간격

크기

링크와 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 CSS 픽셀 크기를 권고합니다.

산문 내의 텍스트로만 이루어진 링크는 위 규칙에서 제외할 수 있지만, 그래도 활성화하기 쉬운 크기를 확보하는 것이 좋습니다.

• Understanding Success Criterion 2.5.5: Target Size
• Target Size and 2.5.5
• Quick test: Large touch targets

간격

링크와 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.

간격은 marginê³¼ 같은 CSS 속성으로 설정할 수 있습니다.

• Hand tremors and the giant-button-problem

명세

브라우저 호환성

같이 보기

• <link>는 <a>와 유사하지만, 사용자에게 노출하지 않는 메타데이터 하이퍼링크를 위한 요소입니다.
• :link는 유효한 href 특성을 가진 <a> 요소를 선택하는 CSS 의사 클래스입니다.