Logo

<a>

HTML <a> 요소(앵커 요소)는 href 특성을 통해 다른 페이지, 같은 페이지의 특정 위치, 파일, 이메일 주소 등 다양한 URL로 연결하는 하이퍼링크를 만듭니다. <a> 안의 콘텐츠는 링크가 가리키는 목적지를 명확히 설명해야 합니다.

HTML <a> 요소(앵커 요소)는 href 특성을 통해 다른 페이지, 같은 페이지의 특정 위치, 파일, 이메일 주소 등 다양한 URL로 연결하는 하이퍼링크를 만듭니다. <a> 안의 콘텐츠는 링크가 가리키는 목적지를 명확히 설명해야 합니다.

HTML
<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>
CSS
li {
  margin-bottom: 0.5rem;
}

특성

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

  • download
    • : 링크를 따라가는 대신 해당 URL을 파일로 저장할지 묻습니다. 값을 생략하거나 직접 지정할 수 있습니다.
      • 값 없음: 브라우저가 HTTP 헤더, URL 경로, 미디어 유형 등을 참고해 파일 이름을 자동으로 제안합니다.
      • 값 지정: 지정한 값을 저장 파일 이름으로 제안합니다. /와 \는 _로 변환됩니다.

      !NOTE

      • download는 동일 출처 URL과 blob:, data: 스킴에서만 동작합니다.
      • Content-Disposition 헤더의 filename이 download 특성과 다를 경우 헤더가 우선합니다.
  • href
    • : 링크가 가리키는 URL입니다. HTTP URL 외에도 브라우저가 지원하는 다양한 스킴을 사용할 수 있습니다.
      • #섹션ID — 같은 페이지의 특정 구획으로 이동
      • mailto: — 이메일 클라이언트 열기
      • tel: — 전화 걸기
      • blob:, data: — 파일 다운로드 등에 활용
  • hreflang
    • : 링크 URL의 언어를 나타내는 힌트입니다. 가능한 값은 전역 lang 특성과 동일합니다. 브라우저 동작에 직접적인 영향을 주지는 않습니다.
  • ping
    • : 공백으로 구분한 URL 목록입니다. 링크를 클릭하면 브라우저가 각 URL에 POST 요청을 전송합니다. 주로 클릭 추적 용도로 사용합니다.
  • referrerpolicy
    • : URL을 요청할 때 함께 전송할 리퍼러 정보를 지정합니다. 자세한 값과 효과는 Referrer-Policy 문서를 참고하세요.
  • rel
    • : 공백으로 구분한 링크 유형 목록으로, 현재 문서와 연결된 URL의 관계를 나타냅니다.
  • target
    • : 링크 URL을 표시할 위치(브라우징 컨텍스트)를 지정합니다. 탭·창·<iframe>의 이름이나 아래 키워드를 사용할 수 있습니다.
      값설명
      _self현재 탭/창에 표시 (기본값)
      _blank새 탭/창에 표시
      _parent부모 브라우징 컨텍스트에 표시. 없으면 _self와 동일
      _top최상위 브라우징 컨텍스트에 표시. 없으면 _self와 동일

      !NOTEtarget="_blank" 사용 시 rel="noreferrer noopener"를 함께 추가해 window.opener API 악용을 방지하세요. Firefox 79+, Chrome 88+ 이상의 최신 브라우저는 target="_blank" 지정 시 자동으로 noopener를 적용합니다.

  • type
    • : 링크 URL의 MIME 타입 힌트입니다. 브라우저 동작에 직접적인 영향을 주지는 않습니다.

요소 정보

항목내용
콘텐츠 카테고리플로우 콘텐츠, 구문 콘텐츠, 대화형 콘텐츠, 뚜렷한 콘텐츠
가능한 콘텐츠투명 (플로우 콘텐츠 또는 구문 콘텐츠, 단 대화형 콘텐츠 제외)
태그 생략불가 — 시작 태그와 종료 태그 모두 필수
가능한 부모 요소구문 콘텐츠 또는 플로우 콘텐츠를 허용하는 모든 요소 (단, 다른 <a> 요소 내부는 불가)
암시적 ARIA 역할href 있음: link / href 없음: 대응 역할 없음
가능한 ARIA 역할href 있음: button, checkbox, menuitem 등 / href 없음: 모두 허용
DOM 인터페이스HTMLAnchorElement

예제

절대 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>
CSS
a {
  display: block;
  margin-bottom: 0.5em;
}

같은 페이지의 요소로 연결

HTML
<!-- 아래 제목으로 바로 이동하는 링크 -->
<p><a href="#Section_further_down">아래 제목으로 건너뛰기</a></p>

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

!NOTEhref="#top"이나 빈 프래그먼트(href="#")를 사용하면 페이지 최상단으로 이동하는 링크를 만들 수 있습니다.

이메일 주소로 연결

mailto: 스킴을 사용하면 사용자의 이메일 클라이언트를 열어 새 메일 작성 화면으로 이동합니다.

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

전화번호로 연결

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

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

  • 휴대폰: 번호를 자동 입력해 전화 앱을 엽니다.
  • 데스크톱: Skype, FaceTime 등 연결된 통화 앱을 엽니다.
  • 그 외에 연락처 저장, 다른 기기로 전송 등의 동작도 가능합니다.

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

download 특성과 data: URL을 함께 사용하면 <canvas> 요소의 내용을 이미지 파일로 저장할 수 있습니다.

HTML

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

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

CSS

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

JavaScript

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 noopener" 없이 사용하면 Window.opener API를 이용한 공격에 취약해질 수 있습니다. 최신 브라우저(Firefox 79+, Chrome 88+)는 자동으로 보호를 적용하지만, 구형 브라우저 지원이 필요하다면 명시적으로 추가하세요.

접근성

명확한 링크 텍스트 사용하기

링크 텍스트는 맥락 없이 단독으로 읽어도 목적지를 알 수 있어야 합니다.

HTML
<!-- 나쁜 예: "여기"만으로는 링크 목적을 알 수 없음 -->
<p>저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요.</p>
HTML
<!-- 좋은 예: 링크 텍스트만으로 목적지가 명확함 -->
<p>저희의 <a href="/products">제품을 더 알아보세요</a>.</p>

스크린 리더는 페이지 내 모든 링크를 목록으로 탐색하는 기능을 제공합니다. 명확한 링크 텍스트는 보조 기술 사용자뿐 아니라 페이지를 빠르게 훑어보는 모든 사용자에게 도움이 됩니다.

onclick 이벤트 남용 주의

href="#" 또는 href="javascript:void(0)"을 사용해 <a>를 버튼처럼 쓰는 패턴은 피하세요. 이 방식은 링크 복사, 새 탭에서 열기, 즐겨찾기 추가, JavaScript 비활성화 환경 등에서 예측 불가한 동작을 유발하고, 스크린 리더에 잘못된 의미를 전달합니다.

버튼 동작이 필요하다면 <button> 요소를 사용하세요. <a>는 진짜 URL로의 이동에만 사용해야 합니다.

새 탭/창 열기 및 비 HTML 리소스 링크

target="_blank"로 새 탭을 여는 링크나 파일을 다운로드하는 링크는, 클릭 시 어떤 일이 일어나는지 사용자에게 미리 알려줘야 합니다.

HTML
<!-- 새 탭에서 열리는 링크 -->
<a target="_blank" href="https://ko.wikipedia.org">
  위키백과 (새 탭에서 열림)
</a>

<!-- 파일 다운로드 링크 -->
<a href="2017-annual-report.ppt">2017 연간 보고서 (PowerPoint)</a>

아이콘을 사용할 경우 반드시 대체 텍스트를 지정하세요.

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

관련 참고 자료:

건너뛰기 링크는 <body> 상단에 배치해 주요 콘텐츠 시작 지점으로 바로 이동할 수 있는 링크입니다. 보통 포커스를 받기 전까지는 화면에서 숨겨집니다.

HTML
<body>
  <a class="skip-link" href="#content">내용으로 건너뛰기</a>

  <header>…</header>

  <main id="content"><!-- 여기로 건너뜀 --></main>
</body>
CSS
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}

헤더 내비게이션처럼 반복되는 콘텐츠를 키보드나 보조 기술로 매번 탐색해야 하는 사용자에게 큰 도움이 됩니다.

크기와 간격

대화형 요소는 충분한 활성화 영역을 가져야 합니다. WCAG는 최소 44×44 CSS 픽셀을 권고합니다. 이는 운동 장애가 있거나 터치스크린을 사용하는 사람 모두에게 중요합니다.

여러 링크를 가까이 배치할 때는 margin 등으로 충분한 간격을 확보해, 의도하지 않은 클릭을 방지하세요.

명세

브라우저 호환성

같이 보기

  • <link> — <a>와 유사하지만 사용자에게 노출되지 않는 메타데이터 하이퍼링크용 요소
  • :link — 유효한 href를 가진 <a> 요소를 선택하는 CSS 의사 클래스
Previous Elements Next <abbr>