웹에서 인터랙티브한 링크를 정의할 때 사용하는 HTML <a> 하이퍼링크 요소의 기본 개념과 실전 활용법을 알아봅니다.
HTML에서는 <a> 태그를 사용해 링크(하이퍼링크) 요소를 정의합니다:
<a>링크 요소</a>링크 요소는 앵커(anchor) 요소라고도 불립니다.
링크(Link)와 하이퍼링크(Hyperlink)의 차이
- 링크(link): 인터넷상의 특정 위치를 가리키는 주소입니다.
- 하이퍼링크(hyperlink): 클릭하면 특정 동작을 실행하거나 웹사이트 같은 목적지로 이동할 수 있는 링크의 한 종류입니다.
일상적인 대화에서는 대부분 "하이퍼링크"와 "링크"를 같은 의미로 혼용해 사용합니다.
'a' 요소 사용 방법
<a> 요소는 여러 가지 속성을 가질 수 있으며, 그중 가장 중요한 것은 href 속성입니다. 이 속성은 사용자가 링크를 클릭했을 때 이동할 목적지(URL)를 지정하는 역할을 합니다.
다음은 클릭 시 TechStacker 메인 페이지로 이동하는 링크 예시입니다:
<a href="https://techstacker.com">TechStacker 메인 페이지로 이동</a>위 링크를 구성하는 요소들은 다음과 같습니다:
- 여는 태그:
<a> - 속성 이름:
href - 속성 값:
"https://techstacker.com"(링크 URL/목적지) - 링크 텍스트:
TechStacker 메인 페이지로 이동(사용자에게 보이는 부분) - 닫는 태그:
</a>
절대 URL vs 상대 URL
href 속성 값(링크 목적지)은 절대 URL 또는 상대 URL 경로로 작성할 수 있습니다. 앞서 살펴본 예시가 바로 절대 URL입니다:
<a href="https://techstacker.com">TechStacker 메인 페이지로 이동</a>반면 아래는 이 사이트 내의 아티클로 연결되는 상대 URL입니다:
<a href="/html-tags-vs-html-elements-difference">HTML 태그 vs HTML 요소</a>같은 아티클을 절대 URL로 표현하면 다음과 같습니다:
<a href="https://techstacker.com/html-tags-vs-html-elements-difference">HTML 태그 vs HTML 요소</a>절대 URL이 상대 URL보다 훨씬 많은 정보를 담고 있다는 점에 주목하세요:
- 프로토콜(
https) 포함 - 도메인 이름(
techstacker.com) 포함 - 슬러그(
/html-tags-vs-html-elements-difference) 포함
상대 URL에는 슬러그만 들어 있습니다.
그렇다면 언제 어떤 것을 사용해야 할까요?
- 상대 URL: 자신의 웹사이트 내부 콘텐츠로 연결할 때 사용합니다.
- 절대 URL: 다른 웹사이트의 콘텐츠로 연결할 때 사용합니다.
상대 URL은 자신의 웹사이트가 위치한 동일한 서버에 저장된 콘텐츠만 참조할 수 있습니다. 그 외의 경우에는 반드시 절대 URL을 사용해야 합니다.
HTML 태그와 HTML 요소의 차이가 헷갈린다면, 관련 아티클인 "HTML 태그 vs HTML 요소" 글을 함께 읽어보는 것도 좋습니다.
마지막으로 SEO와 밀접한 관련이 있어 꼭 알아두어야 할 또 하나의 중요한 속성이 있습니다.
target 속성
또 하나 유용하게 쓰이는 링크 요소의 속성은 target입니다. 이 속성은 사용자가 링크를 클릭했을 때 해당 링크를 어디에서 열지 지정합니다.
아래 링크를 클릭하면:
<a href="https://techstacker.com/">메인 페이지 링크</a>현재 열려 있는 브라우저 탭(창)에서 TechStacker 메인 페이지로 이동하게 됩니다. 즉, 다른 웹사이트로 연결되는 링크라면 사용자는 여러분의 사이트를 떠나 링크된 사이트로 이동하게 됩니다(원하는 동작일 수도, 아닐 수도 있습니다).
이런 일이 발생하는 이유는 <a> 요소에 기본적으로 target="_self" 값이 적용되어 있기 때문입니다. 즉, 링크가 사용자가 머무는 같은 창에서 열리는 것이죠.
따라서 아래 링크 요소는:
<a href="https://techstacker.com/"></a>브라우저가 실제로는 이렇게 해석합니다:
<a href="https://techstacker.com/" target="_self"></a>코드상으로는 드러나지 않기 때문에 헷갈릴 수 있지만, 이제 그 원리를 알게 되셨습니다.
만약 링크를 새 브라우저 탭에서 열고 싶다면, 기본값인 _self 대신 _blank 값을 사용하면 됩니다:
<a href="https://youtube.com" target="_blank" rel="noopener">이 링크를 클릭하면 유튜브 사이트가 새 탭에서 열립니다</a>언제 어떤 값을 사용해야 할까?
간단히 답하자면, SEO 등의 이유로 사용자가 내 웹사이트를 떠나기를 원하지 않는다면 target="_blank"를 사용하세요.
그렇지 않다면 별도로 설정하지 않아도 되며, 링크는 기본값(_self)에 따라 같은 브라우저 창에서 열립니다.
제목(Heading)을 링크로 만들기
HTML의 많은 요소는 링크로 활용할 수 있으며, 제목(h1~h6) 요소도 예외가 아닙니다. 실제로 매우 흔하게 사용되는 방식입니다. 링크로 만들고 싶은 요소를 <a></a> 태그로 감싸기만 하면 됩니다:
<a href="/html-for-beginners">
<h3>HTML 입문</h3>
</a>이미지를 링크로 만들기
링크 요소는 이미지도 링크로 만들 수 있습니다. 예를 들어 게시글 썸네일이나 상품 페이지 이미지에 널리 활용되죠. 방법은 간단합니다. 이미지 요소 <img>를 링크 요소 <a></a> 안에 감싸주면 됩니다:
<a href="/tags/html">
<img src="../../thumbnails/html.png" />
</a>위 예시에서는 사용자가 이미지를 클릭하면 해당 HTML 아티클 섹션으로 이동합니다.