HTML <a>: 앵커 요소

HTML <a> 요소는 href 특성을 통해 웹 페이지, 파일, 이메일, 같은 페이지의 특정 위치처럼 URL이 가리킬 수 있는 곳으로 연결하는 하이퍼링크를 만듭니다. <a>의 콘텐츠는 반드시 링크가 가리키는 목적지의 설명이어야 합니다. href가 존재하는 <a> 요소에 포커스 중이면 키보드 엔터 키로도 활성화할 수 있습니다.

<p>연락처:</p>
<ul>
  <li><a href="https://sorto.me">웹사이트</a></li>
  <li><a href="mailto:sorto@sorto.me">이메일</a></li>
  <li><a href="tel:+123456789">전화번호</a></li>
</ul>

특성

전역 특성을 포함합니다.

download

사용자를 연결된 URL로 바로 보내는 대신, 지정한 링크의 리소스를 다운로드할지 여부를 물어보게 됩니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다.

• 값을 지정하지 않으면 브라우저가 여러가지 정보를 사용해 파일 이름과 확장자를 제안합니다.

  • HTTP Content-Disposition 헤더
  • 파일 경로의 마지막 부분
  • 미디어 유형 (HTTP Content-Type 헤더, data: URL 의 시작 부분, blob: URL의 Blob.type에서 가져옴)

• 값을 지정하면 해당 값을 파일 이름으로 제안합니다. 문자 중 \와 /는 _로 변환합니다. 파일 시스템에서 다른 문자도 제한하는 경우 브라우저가 추가로 조정할 수 있씁니다.

• download는 동일 출처 URL, blob:, data:에만 동작합니다. - Content-Disposition 헤더의 값이 특성의 값과 다를 경우의 동작은 브라우저마다 다릅니다.
• 헤더가 filename 값을 가지고 있으면 특성의 값보다 우선합니다. - 헤더에 inline을 지정한 경우 Chrome과 Firefox 82 이상은 특성 값을 우선하여 다운로드 링크로 취급합니다. Firefox 81까지는 헤더를 우선해서, 내용을 인라인으로 보여줍니다.

href

하이퍼링크가 가리킬 URL입니다. 링크는 HTTP 기반 URL이 아니어도 되며, 브라우저가 지원하는 URL 스킴 무엇이든 사용할 수 있습니다.

• 페이지 구획을 가리키는 프래그먼트 URL
• 미디어의 일부를 가리키는 미디어 프래그먼트
• tel:을 사용한 전화번호
• mailto:를 사용한 이메일 주소
• 브라우저에서 기본으로 지원하지 않는 기타 스킴에 대해서, 웹사이트가 navigator.registerProtocolHandler()를 사용해 자신을 스킴에 연결할 수 있습니다.

hreflang

href로 연결한 링크의 인간 언어를 지정합니다. 별도의 기능은 없습니다. 전역 lang 특성과 같은 값을 사용합니다.

ping

공백으로 구분하는 URL 리스트입니다. 사용자가 링크를 따라가면 본문을 PING으로 하는 POST 요청을 주어진 모든 URL로 전송합니다. 보통 행동 추적 용도로 사용합니다.

referrerpolicy

링크를 따라갈 때 전송할 보낼 리퍼러를 지정합니다. 다음 값을 사용해야 합니다.

• no-referrer: Referer 헤더를 전송하지 않습니다.
• no-referrer-when-downgrade: TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 Referer 헤더를 전송하지 않습니다.
• origin: Referer 헤더가 요청의 출처, 즉 스킴, 호스트, 포트를 포함합니다.
• origin-when-cross-origin: 다른 출처로 요청할 땐 리퍼러 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로도 포함합니다.
• same-origin: 동일 출처 요청에는 리퍼러를 전송하고, 교차 출처 요청에는 전송하지 않습니다.
• strict-origin: 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.
• strict-origin-when-cross-origin (기본 값): 동일 출처 요청에는 전체 URL을 전송합니다. 교차 출처 요청에 대해서는 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.
• unsafe-url: 리퍼러가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. 안전하지 않은 값입니다. TLS로 보호받는 리소스에서 보호 없는 출처로 정보가 누출될 수 있습니다.

rel

연결한 URL과 현재 문서 사이의 관계를 명시합니다. 링크 유형을 공백으로 구분한 리스트여야 합니다.

target

연결한 URL을 표시할 위치입니다. 가능한 값은 브라우징 맥락(탭, 창, <iframe>)의 이름입니다.

다음의 키워드는 특별한 뜻을 가지고 있습니다.

• _self (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.

• _blank: 결과를 새롭게 생성한 이름 없는 브라우징 맥락에 보여줍니다.

• _parent: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 _self와 동일합니다.

• _top: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 _self와 동일합니다.

target="_blank"는 rel="noopener"를 암시합니다. 따라서 window.opener를 설정하지 않습니다. 브라우저 호환성에서 이 동작의 지원 범위를 확인하세요.

type

연결한 URL의 MIME 유형을 지정합니다. 별다른 기능은 없습니다.

예제

절대 주소로 연결

<a href="https://sorto.me/">sorto.me</a>

상대 주소로 연결

a {
  display: block;
}
a + a {
  margin-top: 0.5em;
}

<a href="//sorto.me/posts">상대 스킴 주소</a>
<a href="/docs/Web/HTML/Element">상대 출처 주소</a>
<a href="./base">상대 디렉토리 주소</a>

같은 페이지의 ID로 연결

<a href="#예제" target="_parent">예제로</a>

이메일 주소로 연결

사용자의 이메일 프로그램을 바로 열고 싶으면 mailto: 스킴을 사용하세요.

<a href="mailto:helloworld@example.com">이메일 보내기</a>

제목, 참조, 본문 사전 지정 등 mailto:에 관한 추가 정보는 이메일 링크 만들기와 RFC 6068을 참고하세요.

전화번호로 연결

<a href="tel:+821733338888">+82 17 3333 8888</a> <a href="tel:021231234">02-123-1234</a>

tel:링크의 동작은 기기의 지원 범위에 따라 달라집니다.

• 휴대전화에서는 전화번호를 입력합니다.
• Skype나 FaceTimec처럼 전화 프로그램이 설치돼있으면 실행합니다.
• Navigator.registerProtocolHandler()를 사용하면 웹사이트도 전화를 걸 수 있습니다.
• 다른 동작에는 연락처에 번호 저장, 다른 장치로 번호 전송 등이 있습니다.

구문, 추가 기능, 기타 다른 자세한 정보는 RFC 3966을 참고하세요.

download 특성을 사용해서 캔버스 그림을 저장하기

download 특성을 지정해서 <canvas>에 그린 이미지를 my_painting.png라는 이름으로 저장하는 예제입니다.

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

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

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'hotpink'

let isDrawing = false

function draw(x, y) {
  console.log(isDrawing, x, y)
  if (isDrawing) {
    ctx.beginPath()
    ctx.arc(x, y, 10, 0, Math.PI * 2)
    ctx.closePath()
    ctx.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()))

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

보안과 개인정보

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

target="_blank"를 rel="noreferrer"와 rel="noopener" 없이 사용하면 웹사이트가 window.opener API 악용 공격에 취약해집니다. (취약점 설명) 다만 최신 브라우저에서는 target="_blank"를 지정하면 rel="noopener"와 같은 보호기능을 적용합니다. 브라우저 호환성에서 지원 브라우저를 살펴보세요.

접근성

뚜렷한 링크 텍스트

링크 내의 텍스트는 주변 맥락에서 분리하더라도 목적지를 뚜렷하게 나타내야 합니다.

접근성이 떨어지는 링크

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

접근성이 뛰어난 링크

다행히 쉽게 수정할 수 있습니다. 게다가 길이도 더 짧아요.

<p>우리 <a href="/products">제품을 더 알아보세요</a>.</p>

보조 기술은 페이지의 모든 링크를 나열하는 단축키가 있습니다. 그리고 “모든 링크 나열” 기능은 시각적 사용자가 페이지를 빠르게 훑는 것을 본딴 기술이므로, 보조 기술 사용자에게만 도움이 되는 것은 아닙니다.

클릭 이벤트

종종 <a> 요소의 href에 #이나 javascript:void(0)를 지정해서 페이지 변경을 막은 후, 클릭 이벤트 수신기를 추가해서 가짜 버튼으로 남용하는 경우가 있습니다.

이런 가짜 href 값은 링크를 복사/드래그할 때, 링크를 새 탭/창에서 열 때, 즐겨찾기에 저장할 때, JavaScript가 아직 로딩 중이거나 오류에 빠졌거나 비활성화됐을 때, 예기치 못한 결과를 불러올 수 있습니다. 또한 스크린 리더와 같은 보조 기술에도 잘못된 의미를 전달합니다.

버튼에는 <button> 요소를 사용하세요. 일반적으로 하이퍼링크는 실제 URL로의 탐색에만 사용해야 합니다.

외부 링크 및 비HTML 요소

target="blank"를 이용해 새 탭/창으로 열리는 링크와, 파일 다운로드를 가리키는 링크는 사용했을 때 어떤 일이 일어날지 표시해야 합니다.

저시력 사용자, 스크린 리더 사용자, 인지력이 저하된 사용의 경우 새 탭, 창, 애플리케이션이 갑자기 뜨면 혼란스러울 수도 있으며, 특히 구형 스크린 리더 소프트웨어의 경우 어떤 일이 일어났는지 아예 표현하지 않을 수도 있습니다.

새 창 링크

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

비HTML 링크

<a href="/files/annual-report.pdf">연간 보고서 (PDF)</a>

아이콘을 사용해서 나타내려고 할 땐 대체 텍스트를 꼭 지정하세요.

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

<a href="/files/annual-report.pdf">
  2017 연간 보고서
  <img alt="(PDF)" src="pdf.svg" />
</a>

• WebAIM: Links and Hypertext - Hypertext Links
• G200: Opening new windows and tabs from a link only when necessary
• G201: Giving users advanced warning when opening a new window

스킵 링크

스킵 링크는 <body> 요소에서 가능한 한 제일 위에 등장해서, 페이지의 주요 콘텐츠 시작점을 가리키는 링크입니다. 스킵 링크는 보통 포커스 전까지는 CSS를 사용해 숨겨놓습니다.

<body>
  <a class="skip-link" href="#content">콘텐츠로 건너뛰기</a>
  <header>
    <!-- 헤더 -->
  </header>
  <main id="content"><!-- 스킵링크가 여기로 통함 --></main>
</body>

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

스킵 링크는 키보드 사용자가 여러 페이지에 걸쳐 반복적인 탐색할 필요 없이 곧바로 콘텐츠로 이동할 수 있는 방법을 제공합니다.

특히, 반복 탐색 과정이 매우 힘든 스위치, 음성, 입/머리로 조작하는 사용자에게 아주 유용합니다.

• WebAIM: “Skip Navigation” Links

크기와 간격

크기

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

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

간격

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

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

명세

HTML Living Standard

브라우저 호환성