<a> — 인터랙티브 태그 도감

올바른 사용

href 속성 필수

외부 링크는 target=_blank + rel=noopener

라우팅은 a, 동작은 button

텍스트가 의미 있게 — '여기 클릭' 금지

내부 링크

<a href="/services">서비스 안내</a>

의미 있는 텍스트. URL 경로로 이동.

외부 링크

<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  외부 사이트 (새 창)
</a>

target=_blank로 새 창, rel로 보안.

Next.js Link (라우팅)

<Link href="/about">소개</Link>

Next.js의 클라이언트 라우팅. 내부적으로 <a> 렌더.

자주 보는 안티패턴

href=# + onClick으로 button 흉내

외부 링크 rel=noopener 누락

텍스트가 '클릭', '여기' 등 무의미

버튼 동작에 a 사용

href=# + onClick

<a href="#" onClick={(e) => { e.preventDefault(); handleAction(); }}>
  실행
</a>

라우팅이 아닌데 a 사용. button이 정답.

무의미한 텍스트

<p>자세한 내용은 <a href="/details">여기</a>를 클릭하세요.</p>

여기가 링크 텍스트. 스크린리더 링크 목록에서 단어 의미가 사라짐.

해설

하이퍼링크. 웹의 연결성을 만드는 가장 기본 인터랙티브 요소. URL로 이동하면 a, 페이지 안 동작이면 button — 시리즈 #1의 핵심 결정 규칙.

SEO 관점에서 a는 SEO의 기둥. 내부 링크 구조가 PageRank 분배, 사이트 크롤링 경로, 앵커 텍스트 관련성을 모두 결정. 사이트의 모든 페이지가 최소 한 개의 a로 연결돼야 검색엔진이 발견. 고립된 페이지는 인덱싱 안 됨.

GEO 관점에서 AI가 사이트 구조를 이해하는 1순위 신호가 a. "이 사이트의 가격 페이지로 가줘"에 AI 에이전트가 "가격" 텍스트의 a를 찾는다. 텍스트가 "여기"나 "클릭"이면 — 에이전트가 어디로 가는 링크인지 모름. 자동화 실패의 자주 보는 원인.

AEO 관점에서 AI Overviews와 Perplexity가 답변에 출처 페이지 링크를 넣을 때 — 링크 텍스트가 답변 매칭에 활용. 잘 작성된 의미 있는 anchor text가 인용에 직접 도움.

A11y 관점에서 키보드 사용자의 주요 탐색 수단. 스크린리더 사용자는 링크 목록 단축키(NVDA: NVDA+F7, VoiceOver: rotor → Links)로 페이지의 모든 링크를 한눈에 본다. 그 목록이 "여기, 여기, 클릭, 더 보기, 클릭"이면 — 사용자가 어떤 링크가 무엇인지 모름.

자주 보는 안티패턴: href="#" + onClick으로 button 흉내(시리즈 #1의 핵심 — 라우팅 아닌데 a 사용 = 우클릭 새 탭 같은 a의 무료 기능을 활용 못 함), 외부 링크 rel="noopener" 누락(target="_blank"로 새 창 열 때 부모 창을 새 창이 조작 가능한 보안 취약점 — rel="noopener noreferrer"가 표준), 무의미한 텍스트(여기, 클릭, 더 보기, 자세히 — 스크린리더 링크 목록에서 사라짐), button 동작에 a 사용(시리즈 #1 반대 케이스).

target="_blank"와 rel — 새 창에서 열 때 보안과 개인정보 보호를 위해 rel="noopener noreferrer". modern 브라우저는 target="_blank"만 박아도 noopener를 자동 적용하지만 — 명시적이 더 안전.

download 속성 — 링크가 다운로드용일 때. <a href="/file.pdf" download>PDF 다운로드</a>. 시각·시맨틱·UX 모두에서 이 링크는 파일임이 명확.

aria-current="page" — 현재 페이지의 링크 표시. 내비게이션에서 현재 위치 신호. 시각적 활성 상태(굵게·다른 색)는 흔하지만 — 시맨틱 명시가 시각장애 사용자에게 결정적.

Next.js <Link> — 내부 라우팅용. 내부적으로 <a> 렌더하면서 클라이언트 사이드 라우팅과 prefetch 같은 최적화. 외부 링크는 일반 <a>, 내부는 <Link>가 표준.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설