<a> 태그에 대해 알아보자

목차

1. <a> 태그란? : anchor

2. <a> 태그의 요소

3. rel 파보기

4. target 파보기

---

1. <a> 태그란? : anchor

<a> 태그는 다른 페이지 (혹은 같은 페이지)의 어느 위치, 파일, 이메일 주소 등등 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.

<a> 태그에 들어가는 children은 링크 목적지를 나타내야 한다.

<a href="https://ldd6cr-adness.tistory.com">방다의 티스토리</a>

 

---

2. <a> 태그의 속성

<a> 태그의 속성들을 알아보자.

 

속성	설명	속성값 및 설명
download	⋅ 링크 클릭 시 URL을 열지 않고 파일로 다운로드하도록 유도	⋅ download 속성망 지정 시, URL의 파일명이 자동 사용된다     (<a href='/file.pdf' download> ⋅ 값을 지정하면 파일명을 지정할 수 있다.     (<a href='/file.pdf' download='report.pdf'>
href	⋅ 이동할 대상 URL 주소 ⋅ HTTP 기반 URL이 아니어도 브라우저가 지원하는 모든 스킴을 사용할 수 있음	⋅ 예) <a href="mailto:example@email.com">
hreflang	⋅ 링크 URL의 언어 코드 힌트	⋅ 예) <a href="..." hreflang="en">
ping	⋅ 링크 클릭 시, 지정된 한 개 이상의 URL로 비동기 POST 요청을 보냄	⋅ 공백으로 구분된 여러 URL 지정 가능 ⋅ 예) <a href="..." ping="https://tracker.com/click">
referrerpolicy	⋅ 링크 요청 시 Referrer 헤더 전송 방식 제어	no-referrer, origin, origin-when-cross-origin, same-origin, strict-origin, unsafe-url 등
rel	⋅ 연결한 URL과의 관계를 표시	⋅ noopener: 새 탭(_blank) 보안 강화 (opener 차단) ⋅ noreferrer: 참조 URL(Referrer) 전송 방지 ⋅ nofollow: 검색엔진이 링크 따라가지 않음 ⋅ ugc: 사용자 생성 콘텐츠 ⋅ sponsored: 광고나 제휴 링크 ⋅ 복수 지정 가능 (공백으로 구분)
target	⋅ 링크한 URL을 표시할 위치	⋅ '_self' : 현재 창 (default) ⋅ '_blank' : 새로운 탭/창 ⋅ '_parent' : 최상위 프레임(부모가 없으면 _self와 동일) ⋅ '_top' : 최상단 브라우징에 표시 일반적으로 외부 링크는 _blank + rel="noopener noreferrer" 조합
type	⋅ 링크된 리소스의 MIME 타입 힌트 제공 ⋅ 브라우저가 리소스 타입을 미리 파악할 수 있도록 도우나, 실제 MIME 결정은 서버 응답에 따른다.

 

* Referrer : 링크 요청 시, 현재 페이지의 URL을 서버에 어떤 형식으로 보낼지 결정하는 정책

* MIME : Multipurpose Internet Mail Extensions) : 문서나 파일의 데이터 형식을 식별하는 표준 방식

 

---

3. rel 파보기

rel (relationship)은 현재 문서와 링크된 문서의 관계/의도를 명시하는 속성이다.

보안, SEO, 접근성 측면에서 중요한 의미를 가진다.

속성값	설명
noopener	새 탭(_blank)으로 열린 페이지가 window.opener를 통해 원본 페이지를 조작하지 못하게 막음 (🚧보안)
noreferrer	브라우저가 참조자(Referrer) 정보를 전송하지 않아, 사용자의 개인정보 노출을 방지함 (🚧보안)
nofollow	검색엔진에 "이 링크는 신뢰하지 말아라, 크롤링하지 말아라"라는 신호를 보냄 → 광고, 댓글 등에 사용 (🔎SEO)
ugc	User Generated Content로, 사용자 생성 콘텐츠 내의 링크임을 명시 (댓글, 포럼 등) (🔎SEO)
sponsored	광고나 제휴 마케팅 등 유료 링크임을 명시 (🔎SEO)

여러 값을 공백으로 구분하여 함께 사용할 수 있다.

 

✅ window.opener

브라우저에서 새 창을 열면, 새 창이 원래 페이지에 접근할 수 잇는 참조 객체가 자동으로 생성된다.

window.open('https://example.com');

그 참조 객체가 window.opener인데, 이 객체가 생성되면 새 탭은 window.opener를 통해 부모 창의 JS를 제어할 수 있게 된다.

window.opener.location = 'https:/phishing-site.com'

이런 식으로 악용하여 공격에 사용할 수 있다.

때문에 target="_blank"로 링크를 열 때 rel="noopener"를 함께 작성하여 window.opener 연결을 끊는 보안 처리를 해야한다.

 

✅ ugc, sponsored 사용하는 이유

ugc와 sponsored는 검색엔진이 링크의 의미를 판단하는 힌트로 쓰인다.

 

• ugc를 작성하여 사용자 생성 콘텐츠임을 표시하면, 검색엔진에서 해당 링크가 사용자 입력임을 알고 신뢰도를 조정한다.
• sponsored를 작성하여 상업적 링크임을 표시하면, 검색엔진에서 자연 검색 결과로 오인하지 않게 할 수 있다.
  • 광고 링크를 일반 컨텐츠인 것처럼 두면 검색엔진은 이를 링크 조작으로 간주하여 SEO 패널티를 받을 수도 있다.

 

---

4. target 파보기

target은 링크를 클릭했을 때 어디에 표시할지 지정하는 속서이다.

속성값	설명	브라우저 동작
_self	현재 탭에서 열기 (default)	동일한 탭 내에서 이동
_blank	새 탭(혹은 새 창)에서 열기	새로운 브라우저 탭 생성
_parent	현재 브라우징 컨텐스트의 부모 프레임에 표시	iframe 내부에서 상위 프레임에 표시
_top	최상위 브라우징 컨텍스트(모든 프레임에서 벗어남)에 표시	최상위 페이지에서 열기
custom name	지정한 이름의 창/탭에 열기 (없으면 새로 생성)	<a target="popup"> → 동일 이름 링크는 같은 창을 재사용

 

 

 

참고

https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/a

<a> - HTML: Hypertext Markup Language | MDN