HTML에서 <a> 태그는 웹의 기본 기능인 하이퍼링크 생성을 담당하는 중요한 요소입니다.
문서 간 이동뿐만 아니라, 문서 내 특정 위치로 점프하거나 파일 다운로드까지 다양한 용도로 사용됩니다.
포스팅 참고 링크: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a
기본 사용법
<a href="https://example.com">Example</a>- 위 코드에서 사용자는 Example이라는 텍스트를 클릭하면 해당 URL로 이동하게 됩니다.
href
- 이동할 링크 주소(URL) 를 지정하는 속성입니다.
- 이 속성이 없으면 링크로 작동하지 않으며, 기본 스타일만 적용됩니다.
<a href="https://naver.com">네이버</a>
페이지 내 점프 (앵커 링크)
<a href="#section1">섹션 1로 이동</a>
<!-- 아래에 이동할 대상 -->
<h2 id="section1">섹션 1</h2>- href 값에 #id를 지정하면 해당 ID를 가진 요소로 스크롤이 이동합니다.
- 과거에는 name 속성을 사용했지만, 지금은 id를 사용하는 것이 표준입니다.
자주 사용하는 속성
| 속성 | 설명 | 예 |
| target | 링크가 열릴 위치를 지정합니다. | _blank → 새 탭에서 열기 |
| rel | 현재 문서와 링크의 관계를 명시합니다. | noopener, noreferrer |
| download | 클릭 시 해당 파일을 다운로드하게 합니다. | <a href="file.pdf" download>파일 저장</a> |
| hreflang | 링크 대상의 언어를 나타냅니다. | ko, en 등 |
| title | 마우스를 올렸을 때 보이는 툴팁입니다. | <a title="홈으로 이동">홈</a> |
| aria-label | 보조기기를 위한 접근성 설명을 제공합니다. | <a aria-label="홈으로 이동">🏠</a> |
주의
- 외부 링크에 target="_blank"를 사용할 경우, 반드시 rel="noopener noreferrer"를 함께 작성해야 보안상 안전합니다.
- href="#"는 페이지 최상단으로 이동하거나 새로고침 동작이 발생할 수 있으니, 실제 목적이 없으면 사용하지 않는 것이 좋습니다.
- 링크 텍스트는 명확하게 작성해야 하며, "여기 클릭"보다는 "이력서 양식 다운로드"처럼 구체적인 설명이 좋습니다.
접근성 팁
- 시각장애인 사용자도 링크의 목적을 파악할 수 있도록 aria-label이나 명확한 텍스트를 활용해 주세요.
- 단순한 아이콘(예: 🔍)만 사용한 링크는 접근성 문제가 발생할 수 있으므로 반드시 대체 텍스트를 함께 작성해야 합니다.
정리
| 태그 이름 | <a> |
| 필수 속성 | href |
| 주요 기능 | 외부/내부 링크, 문서 내 점프, 파일 다운로드 |
| 자주 쓰이는 속성 | target, rel, download, hreflang, title, aria-label |
| 보안 팁 | target="_blank" 사용 시 rel="noopener noreferrer" 병행 |
| 접근성 팁 | 명확한 링크 텍스트, aria-label 활용 |
| 비추천 사용 | type 속성, href="#" 단독 사용 |