HTML 페이지 링크 만드는 방법 – a 태그로 하이퍼링크 추가하기

HTML을 활용하면 웹 페이지 어디든 손쉽게 링크를 추가할 수 있습니다. '회사 소개', '홈', '문의하기' 같은 내부 페이지는 물론, 외부 웹사이트로 연결되는 링크도 간단한 태그 하나로 만들 수 있습니다.

HTML에서 링크를 정의할 때 사용하는 것이 바로 <a> 태그입니다. <a> 태그는 링크가 시작되는 지점을, </a> 태그는 링크가 끝나는 지점을 나타냅니다. 이 두 태그 사이에 넣은 텍스트는 모두 클릭 가능한 링크로 동작합니다.

링크의 목적지 주소(URL)는 href 속성에 지정합니다. 즉, <a href="URL"> 형태로 작성하며, <a>...</a> 태그는 반드시 <body>...</body> 태그 안에 배치해야 한다는 점만 기억하면 됩니다.

기본 문법

<a href="링크 URL">링크 텍스트</a>

예제 코드

다음 코드를 직접 실행해 보면서 HTML 페이지에 링크를 만드는 방법을 확인해 보세요:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Links</title>
   </head>

   <body>
      <h1>Reach us here</h1>
      <a href="https://www.tutorialspoint.com/about/contact_us.htm">Contact</a>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 "Contact"라는 텍스트가 화면에 표시되고, 클릭 시 href 속성에 지정한 URL(https://www.tutorialspoint.com/about/contact_us.htm)로 이동합니다.

알아두면 좋은 팁

target="_blank" : 링크를 새 탭에서 열고 싶다면 <a href="URL" target="_blank">처럼 target 속성을 추가하세요.
절대 경로 vs 상대 경로 : 외부 사이트는 전체 URL(절대 경로)을, 같은 사이트 내 페이지는 about.html처럼 상대 경로를 사용하는 것이 일반적입니다.
title 속성 : title 속성을 넣으면 마우스를 올렸을 때 링크에 대한 설명이 표시되어 접근성과 사용성이 향상됩니다.