[HTML / 시맨틱 마크업] 링크 (Anchor)

 

📌 <a href="주소"></a>

 

• a 태그에는 href attribute를 반드시 명시해야 한다!
• href = hypertext(HTML 문서, 웹 페이지) reference (주소값, 참조)

👉🏼 어디로 이동할지에 대한 상세 속성을 정의한다.

 

 

 

href 주소값 표기 방법

1. 웹 URL

웹 페이지 주소 또는 상대경로

 

 

2. 페이지 내 이동

[참고] 현재 페이지의 최상단으로 이동하는 링크
📌 href="#top" 또는 href="#"

 

 

3. 메일 쓰기

📌 <a href="mailto:메일주소"></a>

 

 

4. 전화 걸기 (모바일)

📌 <a href="tel:전화번호"></a>

 

 

[참고] <address>

• 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다.
• address 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있다.
• 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름이다.
• 다양한 맥락에서 사용할 수 있으며, 사업체의 연락 방법을 페이지 헤더에 배치할 때도 쓸 수 있고, <article> 내부에 비치해서 글의 작성자를 나타낼 수도 있다.
• 연락처 외의 정보(출판일 등)를 담아서는 안된다.

<p>Contact the author of this page:</p>

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

 

 

 

---

a 태그 링크 이동 시 새 탭으로 열기

📌 <a href="주소" target="_blank"></a>

 

target="_blank"의 보안 이슈와 해결법

문제점

1. 보안상 취약점이 생긴다.

 

• Tabnabbing이란 HTML 문서 내에 링크 (target이 _blank인 Anchor 태그) 를 클릭 시 새롭게 열린 탭 또는 페이지에서 기존의 문서 location을 피싱 사이트로 변경해 정보를 탈취하는 공격 기술을 뜻한다.
• 탭으로 열린 새 페이지에서 js의 window.opener로 부모 윈도우의 오브젝트에 접근해서 'window.opener.location = 새로운(피싱)URL'로 부모 윈도우의 URL을 바꿔 칠 수 있다.
• 따라서 개인정보 유출, 또는 악의적인 페이지로의 리디렉션 등 보안 상 심각한 문제가 발생할 수 있다.

 

 

2. 퍼포먼스가 떨어질 수 있다.

• target="_blank"가 사용된 링크에 의해 열린 페이지는 링크를 건 페이지와 같은 프로세스를 통해 실행된다.
• 따라서 링크된 페이지에서 높은 부하를 유발하는 JS가 실행되고 있으면 링크를 건 페이지에도 그 영향이 미쳐 의도하지 않게 퍼포먼스가 떨어지는 문제가 발생할 수 있다.

 

 

 

해결법

1. noopener 지정

• noopener(노오프너) 지정 시, 링크된 페이지에서 window.opener를 사용해 링크를 건 페이지를 참조(reference)할 수 없게 된다.
• 더불어 링크된 페이지와 링크를 건 페이지는 별개의 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어지는 문제도 발생하지 않는다.

 

 

2. noreferrer 지정

• noreferrer(노리퍼러) 지정 시, 다른 페이지로 이동할 때 링크를 건 페이지의 주소 등의 정보를 브라우저가 HTTP 헤더로 리퍼러로서 송신하지 않는다.

 

 

👉🏼 따라서 아래와 같이 작성한다. 이때, rel 속성은 링크된 페이지 (href="연결할 페이지의 URL")과의 관계(relationship)를 나타낸다.

 

📌 <a href="연결할 페이지의 URL" target="_blank" rel="noopener noreferrer">새 탭에서 보기</a>

 

 

 

추가 참고 태그

• <area>, <base>, <form> 태그 역시 target 속성이 _blank로 되어있으면 새 창(새 탭)으로 열리고, window.opener에 참조가 걸린다. 따라서 해당 태그에도 rel="noopener noreferrer"를 추가해야 한다.
• email 서비스에는 자동으로 target="_blank"가 걸려 있으므로 별도의 target="_blank"가 적혀있지 않더라도 rel="noopener noreferrer"를 추가하는 게 안전하다.

 

 

 

새 탭으로 열지 않고 현재 탭에서 보기

📌 <a href="주소" target="_self"></a>

 

👉🏼 기본 설정이므로 target 속성을 생략하더라도 같은 동작을 한다.

 

 

 

---

접근성 고려 사항

강한 링크 텍스트

 

링크 안의 콘텐츠는, 맥락에서 벗어나더라도 링크가 향하는 곳을 설명해야 한다.

 

 

 

onClick 이벤트

• 앵커 요소 href를 # 이나 javascript:void(0)으로 지정해 페이지 새로고침을 막고, click 이벤트처럼 가짜버튼을 만드는 방식으로 남용하면 안 된다.
• 이러한 가짜 href 값은 링크를 복사하거나 드래그할 때, 링크를 새 탭이나 새 창에서 열 때, 즐겨찾기에 추가할 때, JS를 불러오고 있거나 스크립트 오류가 발생했을 때 또는 비활성화했을 때 예상치 못한 동작을 유발한다.
• 또한 스크린 리더 등 보조 기술에도 잘못된 의미를 전달한다.
• 따라서 <button> 을 사용해 버튼을 만들어야 하며, 하이퍼링크는 진짜 URL 탐색 용도로만 사용해야 한다.

 

 

 

외부 링크와 비 HTML 리소스 링크

• target="_blank"로 인해 새 탭/창을 여는 링크와, 파일을 다운로드하는 링크는 링크 클릭 시 무슨 일이 발생할 건지 명시해야 한다.
• 시력이 나쁘거나 스크린 리더로 탐색하는 사용자, 혹은 지각 능력이 낮은 사용자는 예상치 못한 상황에서 새 탭, 새 창, 다른 앱이 켜지는 순간 혼란스러울 수 있다. 또한 오래된 스크린 리더는 이런 상황을 알려주지 못할 수 있다.

 

 

 

---

[참고 자료]

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

<a> - HTML: Hypertext Markup Language | MDN

https://yozm.wishket.com/magazine/detail/1586/

하이퍼링크를 신뢰할 수 없다면? noopener, noreferrer, nofollow | 요즘IT

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

구름HOME