HTML a 태그

작성자

익명

작성일

2026.07.26

조회수

버전

HTML `<a>` 태그 (Anchor Element)

1. 개요

<a> 태그(Anchor Element)는 하이퍼텍스트 마크업 언어(HTML)에서 다른 웹 페이지, 문서 내 특정 위치, 또는 외부 리소스로 연결되는 하이퍼링크(Hyperlink)를 생성하는 데 사용되는 인라인 요소이다.

이 태그의 핵심은 href(Hypertext Reference) 속성으로, 연결하고자 하는 대상의 URL(Uniform Resource Locator)이나 식별자를 지정하여 사용자가 클릭 시 해당 위치로 이동하게 하는 웹의 가장 기본적인 연결 메커니즘을 제공한다.

2. 하이퍼링크 생성 및 기본 사용법

2.1 경로 지정 방식

링크를 설정할 때는 대상 리소스의 위치에 따라 절대 경로와 상대 경로를 구분하여 사용한다.

절대 경로 (Absolute Path): 전체 URL(프로토콜 포함)을 모두 작성하는 방식이다. 주로 외부 사이트로 연결할 때 사용한다.
상대 경로 (Relative Path): 현재 문서의 위치를 기준으로 대상 파일의 경로를 작성하는 방식이다. 주로 동일한 웹사이트 내의 내부 페이지를 연결할 때 사용한다.

2.2 요소의 래핑(Wrapping)

<a> 태그는 텍스트뿐만 아니라 이미지(<img>), 버튼, <div> 등 다른 HTML 요소를 자식 요소로 포함하여 해당 영역 전체를 클릭 가능한 링크로 만들 수 있다.

2.3 코드 예제

<!-- 절대 경로: 외부 사이트로 이동 -->
<a href="https://www.wikipedia.org">위키백과 방문하기</a>

<!-- 상대 경로: 동일 서버 내 다른 페이지로 이동 -->
<a href="/about/company.html">회사 소개 페이지로 이동</a>

<!-- 이미지 링크: 이미지를 클릭하면 이동 -->
<a href="https://example.com">
  <img src="logo.png" alt="홈으로 이동">
</a>

3. 주요 속성 및 활용

3.1 주요 속성 상세

<a> 태그는 링크의 동작 방식과 보안, 관계를 정의하기 위해 다양한 속성을 제공한다.

속성명	주요 값	설명	비고
`href`	URL, #id, mailto: 등	연결할 대상의 주소를 지정	필수 속성 (누락 시 동작 제한)
`target`	`_blank`, `_self`, `_parent`, `_top`	링크를 열 창의 위치를 설정	`_blank`는 새 탭에서 열기
`download`	(값 없음) 또는 파일명	리소스를 브라우저에서 여는 대신 다운로드 유도	브라우저 설정에 따라 다를 수 있음
`rel`	`noopener`, `noreferrer`, `nofollow`	현재 문서와 연결된 문서 간의 관계 정의	보안 및 SEO 설정에 중요
`title`	텍스트 문자열	요소에 대한 추가 정보를 제공하는 툴팁 생성	마우스 호버 시 표시됨 (예: `<a href="/docs" title="가이드로 이동">가이드</a>`)

3.2 `rel` 속성과 보안

target="_blank"를 사용하여 새 탭에서 페이지를 열 때, 연결된 페이지에서 window.opener 객체를 통해 원본 페이지를 제어할 수 있는 보안 취약점이 존재한다. 이를 방지하기 위해 다음과 같은 속성을 함께 사용한다.

<a href="/doc/%EA%B8%B0%EC%88%A0/%EB%B3%B4%EC%95%88/%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EB%B3%B4%ED%98%B8/noopener" class="wiki-link wiki-link-missing">noopener</a>: 새 탭의 window.opener를 null로 설정하여 원본 페이지에 대한 접근을 차단한다.
<a href="/doc/%EA%B8%B0%EC%88%A0/%EB%B3%B4%EC%95%88/%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EB%B3%B4%ED%98%B8/noreferrer" class="wiki-link wiki-link-missing">noreferrer</a>: noopener 기능을 포함하며, HTTP 리퍼러(Referrer) 헤더를 전송하지 않아 유입 경로를 숨긴다.

참고: 최신 브라우저(Chrome 88+ 등)에서는 target="_blank" 사용 시 자동으로 rel="noopener"가 적용되지만, 구형 브라우저와의 호환성을 위해 명시적으로 작성하는 것이 권장된다.

보안 적용 예제:

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">외부 사이트 안전하게 열기</a>

4. 특수 링크 및 앵커(Anchor) 활용

4.1 페이지 내 이동 (Internal Link)

HTML의 id 속성을 활용하면 동일한 페이지 내의 특정 섹션으로 즉시 이동하는 앵커 링크를 만들 수 있다. href 값에 # 뒤에 대상 요소의 id를 입력한다.

주의사항: 실무에서 임시 링크로 사용하는 href="#" 방식은 클릭 시 페이지 최상단으로 스크롤이 이동하는 부작용이 있다. 이를 방지하기 위해서는 JavaScript의 event.preventDefault()를 사용하거나, href="javascript:void(0)"를 대안으로 사용한다.

4.2 외부 애플리케이션 호출 프로토콜

웹 브라우저 외에 시스템에 설치된 특정 애플리케이션을 실행하기 위해 특수 프로토콜을 사용한다. * mailto:: 기본 이메일 클라이언트를 실행하여 메일 작성 창을 띄운다. * tel:: 모바일 기기에서 전화 걸기 화면으로 연결한다. * sms:: 문자 메시지 전송 화면으로 연결한다.

4.3 코드 예제

<!-- 페이지 내 이동 -->
<a href="#section-footer">페이지 하단으로 이동</a>
...
<div id="section-footer">여기는 하단 영역입니다.</div>

<!-- 외부 앱 호출 -->
<a href="mailto:support@example.com">이메일 문의하기</a>
<a href="tel:+82-10-1234-5678">전화 상담 연결</a>

5. 웹 접근성 및 SEO 최적화

5.1 웹 접근성 (Accessibility)

시각 장애인이 사용하는 스크린 리더는 링크 텍스트를 통해 목적지를 파악한다. "여기 클릭", "더 보기"와 같은 모호한 텍스트보다는 "2024년 연간 보고서 다운로드"와 같이 구체적인 텍스트를 작성해야 한다. 텍스트 수정이 어려운 경우 <a href="/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/HTML/aria-label" class="wiki-link wiki-link-missing">aria-label</a> 속성을 사용하여 보조 설명을 추가한다.

<a href="/download/pdf" aria-label="2024년 연간 보고서 PDF 다운로드">다운로드</a>

5.2 검색 엔진 최적화 (SEO)

검색 엔진의 크롤러는 링크 구조를 통해 페이지의 중요도를 판단한다. * 의미 있는 앵커 텍스트: 키워드가 포함된 명확한 텍스트를 사용하여 페이지의 주제를 알린다. * rel="<a href="/doc/%EA%B8%B0%EC%88%A0/%EB%8D%B0%EC%9D%B4%ED%84%B0%EA%B3%BC%ED%95%99/%EB%B6%84%EC%84%9D/nofollow" class="wiki-link wiki-link-missing">nofollow</a>": 링크된 페이지에 대해 보증하지 않거나, 유료 광고 링크인 경우 검색 엔진이 해당 링크를 따라가 점수를 부여하지 않도록 설정한다.

6. 추가 기술 사항

6.1 `href` 속성 누락 시의 동작

<a> 태그에서 href 속성을 생략하면, 해당 요소는 하이퍼링크로서의 기능을 상실하며 플레이스홀더(Placeholder) 링크로 동작한다. * 시각적 차이: 브라우저 기본 스타일에서 파란색 글씨와 밑줄이 사라지고 일반 텍스트와 동일하게 표시된다. * 기능적 차이: 클릭 이벤트가 발생하지 않으며, 키보드 탭(Tab) 키를 통한 포커스 이동 대상에서 제외된다. * 용도: 주로 JavaScript를 통해 동적으로 URL을 할당하기 전이나, 현재 페이지의 상태를 나타내는 메뉴 항목에서 사용된다.

6.2 브라우저 기본 스타일 제거 (CSS)

브라우저는 <a> 태그에 기본적으로 파란색 텍스트와 밑줄 스타일을 적용한다. 디자인 일관성을 위해 이를 제거하는 방법은 다음과 같다.

/* 모든 링크의 기본 스타일 제거 */
a {
    text-decoration: none; /* 밑줄 제거 */
    color: inherit;        /* 부모 요소의 글자색 상속 */
    cursor: pointer;       /* 마우스 커서를 손가락 모양으로 유지 */
}

/* 방문한 링크 및 호버 상태 스타일 정의 */
a:visited {
    color: #666;
}

a:hover {
    text-decoration: underline; /* 마우스 올렸을 때만 밑줄 표시 */
    color: #007bff;
}

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# HTML `<a>` 태그 (Anchor Element)

## 1. 개요
`<a>` 태그(Anchor Element)는 하이퍼텍스트 마크업 언어(HTML)에서 다른 웹 페이지, 문서 내 특정 위치, 또는 외부 리소스로 연결되는 **하이퍼링크(Hyperlink)**를 생성하는 데 사용되는 인라인 요소이다.

이 태그의 핵심은 `href`(Hypertext Reference) 속성으로, 연결하고자 하는 대상의 URL(Uniform Resource Locator)이나 식별자를 지정하여 사용자가 클릭 시 해당 위치로 이동하게 하는 웹의 가장 기본적인 연결 메커니즘을 제공한다.

---

## 2. 하이퍼링크 생성 및 기본 사용법

### 2.1 경로 지정 방식
링크를 설정할 때는 대상 리소스의 위치에 따라 절대 경로와 상대 경로를 구분하여 사용한다.

*   **절대 경로 (Absolute Path):** 전체 URL(프로토콜 포함)을 모두 작성하는 방식이다. 주로 외부 사이트로 연결할 때 사용한다.
*   **상대 경로 (Relative Path):** 현재 문서의 위치를 기준으로 대상 파일의 경로를 작성하는 방식이다. 주로 동일한 웹사이트 내의 내부 페이지를 연결할 때 사용한다.

### 2.2 요소의 래핑(Wrapping)
`<a>` 태그는 텍스트뿐만 아니라 이미지(`<img>`), 버튼, `<div>` 등 다른 HTML 요소를 자식 요소로 포함하여 해당 영역 전체를 클릭 가능한 링크로 만들 수 있다.

### 2.3 코드 예제
```html
<!-- 절대 경로: 외부 사이트로 이동 -->
<a href="https://www.wikipedia.org">위키백과 방문하기</a>

<!-- 상대 경로: 동일 서버 내 다른 페이지로 이동 -->
<a href="/about/company.html">회사 소개 페이지로 이동</a>

<!-- 이미지 링크: 이미지를 클릭하면 이동 -->
<a href="https://example.com">
  <img src="logo.png" alt="홈으로 이동">
</a>
```

---

## 3. 주요 속성 및 활용

### 3.1 주요 속성 상세
`<a>` 태그는 링크의 동작 방식과 보안, 관계를 정의하기 위해 다양한 속성을 제공한다.

| 속성명 | 주요 값 | 설명 | 비고 |
| :--- | :--- | :--- | :--- |
| `href` | URL, #id, mailto: 등 | 연결할 대상의 주소를 지정 | 필수 속성 (누락 시 동작 제한) |
| `target` | `_blank`, `_self`, `_parent`, `_top` | 링크를 열 창의 위치를 설정 | `_blank`는 새 탭에서 열기 |
| `download` | (값 없음) 또는 파일명 | 리소스를 브라우저에서 여는 대신 다운로드 유도 | 브라우저 설정에 따라 다를 수 있음 |
| `rel` | `noopener`, `noreferrer`, `nofollow` | 현재 문서와 연결된 문서 간의 관계 정의 | 보안 및 SEO 설정에 중요 |
| `title` | 텍스트 문자열 | 요소에 대한 추가 정보를 제공하는 툴팁 생성 | 마우스 호버 시 표시됨 (예: `<a href="/docs" title="가이드로 이동">가이드</a>`) |

### 3.2 `rel` 속성과 보안
`target="_blank"`를 사용하여 새 탭에서 페이지를 열 때, 연결된 페이지에서 `window.opener` 객체를 통해 원본 페이지를 제어할 수 있는 보안 취약점이 존재한다. 이를 방지하기 위해 다음과 같은 속성을 함께 사용한다.

*   **`noopener`**: 새 탭의 `window.opener`를 null로 설정하여 원본 페이지에 대한 접근을 차단한다.
*   **`noreferrer`**: `noopener` 기능을 포함하며, HTTP 리퍼러(Referrer) 헤더를 전송하지 않아 유입 경로를 숨긴다.

**참고:** 최신 브라우저(Chrome 88+ 등)에서는 `target="_blank"` 사용 시 자동으로 `rel="noopener"`가 적용되지만, 구형 브라우저와의 호환성을 위해 명시적으로 작성하는 것이 권장된다.

**보안 적용 예제:**
```html
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">외부 사이트 안전하게 열기</a>
```

---

## 4. 특수 링크 및 앵커(Anchor) 활용

### 4.1 페이지 내 이동 (Internal Link)
HTML의 `id` 속성을 활용하면 동일한 페이지 내의 특정 섹션으로 즉시 이동하는 앵커 링크를 만들 수 있다. `href` 값에 `#` 뒤에 대상 요소의 `id`를 입력한다.

**주의사항:** 실무에서 임시 링크로 사용하는 `href="#"` 방식은 클릭 시 페이지 최상단으로 스크롤이 이동하는 부작용이 있다. 이를 방지하기 위해서는 JavaScript의 `event.preventDefault()`를 사용하거나, `href="javascript:void(0)"`를 대안으로 사용한다.

### 4.2 외부 애플리케이션 호출 프로토콜
웹 브라우저 외에 시스템에 설치된 특정 애플리케이션을 실행하기 위해 특수 프로토콜을 사용한다.
*   `mailto:`: 기본 이메일 클라이언트를 실행하여 메일 작성 창을 띄운다.
*   `tel:`: 모바일 기기에서 전화 걸기 화면으로 연결한다.
*   `sms:`: 문자 메시지 전송 화면으로 연결한다.

### 4.3 코드 예제
```html
<!-- 페이지 내 이동 -->
<a href="#section-footer">페이지 하단으로 이동</a>
...
<div id="section-footer">여기는 하단 영역입니다.</div>

<!-- 외부 앱 호출 -->
<a href="mailto:support@example.com">이메일 문의하기</a>
<a href="tel:+82-10-1234-5678">전화 상담 연결</a>
```

---

## 5. 웹 접근성 및 SEO 최적화

### 5.1 웹 접근성 (Accessibility)
시각 장애인이 사용하는 스크린 리더는 링크 텍스트를 통해 목적지를 파악한다. "여기 클릭", "더 보기"와 같은 모호한 텍스트보다는 "2024년 연간 보고서 다운로드"와 같이 구체적인 텍스트를 작성해야 한다. 텍스트 수정이 어려운 경우 `aria-label` 속성을 사용하여 보조 설명을 추가한다.
```html
<a href="/download/pdf" aria-label="2024년 연간 보고서 PDF 다운로드">다운로드</a>
```

### 5.2 검색 엔진 최적화 (SEO)
검색 엔진의 크롤러는 링크 구조를 통해 페이지의 중요도를 판단한다.
*   **의미 있는 앵커 텍스트**: 키워드가 포함된 명확한 텍스트를 사용하여 페이지의 주제를 알린다.
*   **`rel="nofollow"`**: 링크된 페이지에 대해 보증하지 않거나, 유료 광고 링크인 경우 검색 엔진이 해당 링크를 따라가 점수를 부여하지 않도록 설정한다.

---

## 6. 추가 기술 사항

### 6.1 `href` 속성 누락 시의 동작
`<a>` 태그에서 `href` 속성을 생략하면, 해당 요소는 하이퍼링크로서의 기능을 상실하며 **플레이스홀더(Placeholder)** 링크로 동작한다.
*   **시각적 차이**: 브라우저 기본 스타일에서 파란색 글씨와 밑줄이 사라지고 일반 텍스트와 동일하게 표시된다.
*   **기능적 차이**: 클릭 이벤트가 발생하지 않으며, 키보드 탭(Tab) 키를 통한 포커스 이동 대상에서 제외된다.
*   **용도**: 주로 JavaScript를 통해 동적으로 URL을 할당하기 전이나, 현재 페이지의 상태를 나타내는 메뉴 항목에서 사용된다.

### 6.2 브라우저 기본 스타일 제거 (CSS)
브라우저는 `<a>` 태그에 기본적으로 파란색 텍스트와 밑줄 스타일을 적용한다. 디자인 일관성을 위해 이를 제거하는 방법은 다음과 같다.

```css
/* 모든 링크의 기본 스타일 제거 */
a {
    text-decoration: none; /* 밑줄 제거 */
    color: inherit;        /* 부모 요소의 글자색 상속 */
    cursor: pointer;       /* 마우스 커서를 손가락 모양으로 유지 */
}

/* 방문한 링크 및 호버 상태 스타일 정의 */
a:visited {
    color: #666;
}

a:hover {
    text-decoration: underline; /* 마우스 올렸을 때만 밑줄 표시 */
    color: #007bff;
}
```

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나

HTML a 태그

HTML `<a>` 태그 (Anchor Element)

1. 개요

2. 하이퍼링크 생성 및 기본 사용법

2.1 경로 지정 방식

2.2 요소의 래핑(Wrapping)

2.3 코드 예제

3. 주요 속성 및 활용

3.1 주요 속성 상세

3.2 `rel` 속성과 보안

4. 특수 링크 및 앵커(Anchor) 활용

4.1 페이지 내 이동 (Internal Link)

4.2 외부 애플리케이션 호출 프로토콜

4.3 코드 예제

5. 웹 접근성 및 SEO 최적화

5.1 웹 접근성 (Accessibility)

5.2 검색 엔진 최적화 (SEO)

6. 추가 기술 사항

6.1 `href` 속성 누락 시의 동작

6.2 브라우저 기본 스타일 제거 (CSS)

📝 마크다운 원본

🤔 AI의 사고 과정

이 AI 생성 콘텐츠가 도움이 되었나요?

HTML <a> 태그 (Anchor Element)

1. 개요

2. 하이퍼링크 생성 및 기본 사용법

2.1 경로 지정 방식

2.2 요소의 래핑(Wrapping)

2.3 코드 예제

3. 주요 속성 및 활용

3.1 주요 속성 상세

3.2 rel 속성과 보안

4. 특수 링크 및 앵커(Anchor) 활용

4.1 페이지 내 이동 (Internal Link)

4.2 외부 애플리케이션 호출 프로토콜

4.3 코드 예제

5. 웹 접근성 및 SEO 최적화

5.1 웹 접근성 (Accessibility)

5.2 검색 엔진 최적화 (SEO)

6. 추가 기술 사항

6.1 href 속성 누락 시의 동작

6.2 브라우저 기본 스타일 제거 (CSS)

📝 마크다운 원본

🤔 AI의 사고 과정

이 AI 생성 콘텐츠가 도움이 되었나요?

HTML `<a>` 태그 (Anchor Element)

3.2 `rel` 속성과 보안

6.1 `href` 속성 누락 시의 동작