HTML - <a> anchor 태그와 href를 알아보자

HTML(Hyper Text Markup Language)를 배울 때 가장 먼저 배우는 태그 중 하나가 바로 <a> 태그입니다. <a> 태그는 anchor를 의미하는 태그로 한글로는 닻을 말합니다. 웹에서 <a> 태그 쉽게 쓰고 사용되지만, 가진 의미는 결코 가볍지 않은데요. 이번 글에서는 <a> 태그가 가지는 역할과 기능에 대해서 알아보도록 하겠습니다.

<a> 태그와 href 그리고 닻(anchor)

<a> 태그를 의미하는 닻

HTML에서 <a> 태그가 가진 역할을 설명하기 위해 배와 닻(Anchor)의 그림을 만들어 보았습니다. 사람들은 본인의 상황에 따라 필요하거나 도움이 되는 정보를 찾기 위해 WWW(World Wide Web)라는 무수히 많은 서버가 연결된 네트워크를 돌아다닙니다. 이때 바다 위(네트워크)를 떠다니는 배(사용자)가 정박할 수 있도록 좌표(주소 혹은 URL)를 가리키는 역할을 하는 것이 바로 <a> 태그 anchor입니다.

 

 어떻게 보면 생뚱맞아 보일 수 있는 설명이지만 나름 낭만을 섞어서 말한 이야기니 좋게 생각해주시면 좋을 것 같습니다. <a> 태그는 URL을 기준으로 Link를 만드는 태그이기 때문에 실제 역할과 완전히 동떨어진 이야기가 아니기도 합니다.

 

 <a> 태그는 Link Page, 즉 일반적으로 페이지 연결을 위해 사용되며 연결 대상이 되는 페이지는 <a> 태그의 href 속성을 통해 정의합니다. 예시를 들어 설명하면 다음과 같습니다.

<a href="https://7942yongdae.tistory.com">anchor 태그를 알아보자.</a>

 

 

<a> 태그의 속성과 다양한 활용 방법

앞에서는 <a> 태그가 HTML에서 맡은 역할에 대해 이야기했다면, 이제는 <a> 태그가 가진 속성과 활용하는 방법을 알아보겠습니다. <a> 태그를 사용하면 필수적으로 사용하는 속성이 바로 href인데요. <a> 태그는 href 외에도 여러 가지 속성을 가지고 있습니다.

속성

href:

<a> 태그가 가리키는 URL을 정의합니다. URL의 값은 HTTP 기반의 자원을 포함해 브라우저가 지원하는 모든 URL Scheme을 사용할 수 있습니다. 예를 들어 tel: mailto: 을 말합니다.

 

target:

<a> 태그가 연결된 URL을 표시할 위치를 정의합니다. 기본값은 _self입니다.

 

 _self: 현재 브라우저에 연결된 URL을 보여줍니다.

 _blank: 현재 브라우저의 새로운 탭에 연결된 URL을 보여줍니다.

_parent: 현재 브라우저의 부모 창에 연결된 URL을 보여주며, 부모 창이 없는 경우 _self와 같은 동작을 합니다.

_top: 최상단 브라우저에 표시합니다. 부모 창이 없는 경우 _self와 같은 동작을 합니다.

 

* target을 정의할 때는 window.opener API의 악의적인 사용을 막기 위해 rel="noreferrer"를 설정해주세요.

 

 

rel: <a> 태그가 연결된 URL과의 관계를 정의합니다. 관계 유형은 많은 값이 정의되어 있으며 기본 값은 빈 값입니다. 정의된 유형은 링크를 통해 확인해주세요.

활용 예제

<a>의 href를 사용해 책갈피 기능 사용하기 - # (북마크)

<p>
  <a href="#Sub_title">부제목으로 이동하기</a>
</p>
<h2 id="Sub_title">부제목</h2>

href의 #을 이용하면 같은 페이지 내에서 특정 위치로 이동이 가능합니다. Javascript를 사용하지 않고 페이지 내에서 이동을 하는 경우 유용하게 사용할 수 있는 기능입니다.

 

<a>의 href를 사용해 메일 보내기 - mailto

<a href="mailto:me@gmail.com">나에게 메일 보내기</a>

mailto:는 단순히 메일을 받는 대상을 정할 뿐만 아니라 메일의 제목과 본문 등 구체적인 부분까지 정의할 수 있습니다. 보다 자세한 내용은 링크를 통해 참고해주세요.

 

<a>의 href를 사용해 전화하기 - tel

<a href="tel:01012345678">나에게 전화 걸기</a>

tel:은 기기에 따라 동작하는 기능이 다르며, 핸드폰에서 이벤트가 발생한 경우 전화번호를 자동으로 입력합니다.