실행 가능한 HTML 문서: 링크 (a href)

Q: HTML에서 링크는 어떻게 만드나요?

앵커 요소를 쓰세요. Example 처럼요. href는 목적지이고, 태그 사이의 텍스트가 독자가 클릭하는 부분이에요.

Q: 페이지의 특정 위치로 링크하려면 어떻게 하나요?

대상 요소에 id를 주고, 해시로 링크하세요. FAQ 와 FAQ 처럼요. 다른 페이지에서는 URL 뒤에 해시를 붙이세요. 처럼요.

Q: www로 시작하는 주소를 쓰면 왜 엉뚱한 페이지로 가나요?

https://가 없으면 브라우저는 www.example.com을 내 사이트의 상대 경로로 취급해서, 링크가 yoursite.com/www.example.com 같은 곳으로 가요. 외부 링크에는 항상 스킴을 쓰세요. href="https://www.example.com"처럼요.

Q: a 태그 안에 div를 넣어도 되나요?

네. HTML5에서는 가 , 제목, 문단 같은 블록 콘텐츠를 감쌀 수 있고, 카드 전체를 링크로 만들 때 이렇게 해요. 다만 다른 링크, 버튼, 그 밖의 인터랙티브 요소는 담을 수 없어요.

HTML에서 링크 만드는 법

링크는 href 속성이 있는 앵커 요소 <a>예요. href는 링크가 가는 곳이고, 태그 사이의 내용이 독자가 클릭하는 부분이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

브라우저는 링크를 파란색 밑줄로 보여 주고 커서를 손 모양으로 바꿔요. 마지막 줄은 href가 왜 중요한지 보여 줘요. href가 없으면 <a>는 일반 텍스트예요. 포커스도 안 되고, 클릭도 안 되고, 링크 스타일도 없어요.

절대 URL과 상대 URL

href 값이 링크가 갈 곳을 정해요. 주요 형태는 이래요.

`href`	가는 곳
`https://example.com/page`	절대 URL: 정확히 그 주소
`/about`	현재 사이트 루트의 `about`
`about.html`	현재 페이지와 같은 폴더의 `about.html`
`../index.html`	한 단계 위 폴더의 `index.html`
`#pricing`	이 페이지에서 `id="pricing"`인 요소
`/help#faq`	이 사이트의 다른 페이지에 있는 `faq` 섹션
`mailto:hi@example.com`	독자의 메일 앱에서 새 이메일
`tel:+15551234567`	전화를 걸 수 있는 기기에서 전화 걸기

다른 사이트에는 절대 URL을, 내 사이트 안에서는 루트 기준 경로(/about)를 쓰세요. 링크가 들어 있는 페이지가 다른 폴더로 옮겨져도 계속 동작해요.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

마지막 줄이 가장 흔한 링크 버그예요. https://가 없으면 브라우저는 www.wikipedia.org를 현재 폴더의 파일 이름으로 읽어요.

이메일과 전화 링크는 따로 페이지가 있어요. HTML 이메일 링크를 보세요.

페이지의 특정 위치로 링크하기

id가 있는 요소는 모두 대상이 될 수 있어요. # 뒤에 id를 붙여 링크하면 브라우저가 그 위치로 스크롤해요. 미리보기에서 링크를 클릭해 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

세부 사항 몇 가지예요.

id는 대소문자까지 정확히 일치해야 해요. href="#FAQ"는 id="faq"를 찾지 못해요.
href="#top"과 href="#"는 id가 top인 요소가 없어도 페이지 맨 위로 스크롤해요.
:target 선택자는 URL이 현재 가리키는 섹션에 스타일을 입혀요. 실제 페이지에서는 하이라이트되지만, 미리보기는 주소를 바꾸지 않고 스크롤하기 때문에 여기서는 하이라이트가 보이지 않아요.
다른 페이지의 섹션으로 링크하려면 그 페이지 URL 뒤에 해시를 붙이세요. <a href="/docs/html/table#caption">처럼요.

고정 헤더 아래의 앵커 링크

sticky나 fixed 헤더는 이동한 섹션의 윗부분을 가려요. 대상에 scroll-margin-top을 주면 헤더만큼 자리를 남기고, scroll-behavior: smooth는 이동을 부드럽게 해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

scroll-margin-top 줄을 지우고 Two를 다시 클릭해 보세요. 제목이 어두운 헤더 뒤로 숨어 버려요.

다운로드 링크

download 속성은 브라우저에게 파일을 열지 말고 저장하라고 요청해요. 값을 주면 그게 추천 파일 이름이 돼요.

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download는 페이지와 같은 출처(같은 스킴, 호스트, 포트)의 파일과 data:, blob: URL에서만 동작해요. 다른 출처의 파일이라면 서브도메인이어도 브라우저가 무시하고 일반 링크처럼 파일로 이동해요. 서버는 Content-Disposition: attachment 헤더로 어떤 파일이든 강제로 다운로드시킬 수 있어요.

의미가 통하는 링크 텍스트

스크린 리더 사용자는 링크에서 링크로 이동하며 링크 텍스트만 듣는 경우가 많아요. "여기를 클릭"이나 "더 보기"는 아무것도 알려 주지 않아요.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

title 속성은 마우스를 올리면 툴팁을 보여 주지만, 터치스크린이나 대부분의 키보드 사용자에게는 보이지 않으니 중요한 내용은 넣지 마세요.

카드 전체를 링크로 만들기

<a>는 블록 콘텐츠를 감쌀 수 있어서 제목, 이미지, 문단을 모두 하나의 링크로 만들 수 있어요. 클릭할 수 있는 카드는 이렇게 만들어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block을 주면 텍스트뿐 아니라 상자 전체를 클릭할 수 있어요. 스크린 리더가 카드 내용 전체를 링크 이름으로 읽기 때문에 내용은 짧게 유지하세요. 그리고 안에 다른 링크나 버튼을 절대 넣지 마세요. 인터랙티브 요소는 <a> 안에 중첩할 수 없어요.

a 태그의 다른 속성

속성	하는 일
`href`	목적지. 없으면 `<a>`는 링크가 아님
`target`	어디에서 열지. `target="_blank"`는 새 탭에서 열어요. 새 탭에서 링크 열기 참고
`rel`	대상과의 관계: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	파일을 열지 않고 저장
`hreflang`	링크된 페이지의 언어(힌트)
`referrerpolicy`	현재 URL 중 얼마만큼을 리퍼러로 보낼지

자주 하는 실수

외부 URL에 스킴이 없음. href="www.site.com"은 상대 경로예요. https://를 쓰세요.
JavaScript 동작에 <a href="#">를 씀. 맨 위로 스크롤하고 URL에 #가 붙어요. 클릭해도 어디로 가지 않는다면 <button>을 쓰세요.
링크 안의 링크, 또는 링크 안의 버튼. 둘 다 올바르지 않은 HTML이에요. 두 번째 <a>가 나오면 파서가 첫 번째를 일찍 닫고, 링크 안의 버튼을 클릭하면 대상이 분명하지 않아요.
파일 이름에 공백이 있음. href="my file.html"은 브라우저가 공백을 인코딩해서 대개 동작하지만, my-file.html로 쓰면 고민할 필요가 없어요.
링크 텍스트로 "여기를 클릭"을 씀. 대신 목적지를 설명하세요.
id의 대소문자가 다름. #Pricing과 id="pricing"은 서로 달라요.

자주 묻는 질문

HTML에서 링크는 어떻게 만드나요?

앵커 요소를 쓰세요. <a href="https://example.com">Example</a>처럼요. href는 목적지이고, 태그 사이의 텍스트가 독자가 클릭하는 부분이에요.

href는 무엇의 약자인가요?

Hypertext reference(하이퍼텍스트 참조)예요. 링크가 가리키는 URL을 담아요. 전체 주소, /about 같은 같은 사이트의 경로, #pricing 같은 페이지의 특정 섹션, mailto: 같은 스킴이 들어가요.

페이지의 특정 위치로 링크하려면 어떻게 하나요?

대상 요소에 id를 주고, 해시로 링크하세요. <h2 id="faq">FAQ</h2>와 <a href="#faq">FAQ</a>처럼요. 다른 페이지에서는 URL 뒤에 해시를 붙이세요. <a href="/help#faq">처럼요.

www로 시작하는 주소를 쓰면 왜 엉뚱한 페이지로 가나요?

https://가 없으면 브라우저는 www.example.com을 내 사이트의 상대 경로로 취급해서, 링크가 yoursite.com/www.example.com 같은 곳으로 가요. 외부 링크에는 항상 스킴을 쓰세요. href="https://www.example.com"처럼요.

a 태그 안에 div를 넣어도 되나요?

네. HTML5에서는 <a>가 <div>, 제목, 문단 같은 블록 콘텐츠를 감쌀 수 있고, 카드 전체를 링크로 만들 때 이렇게 해요. 다만 다른 링크, 버튼, 그 밖의 인터랙티브 요소는 담을 수 없어요.