HTML의 <a> 태그에서 href 속성은 하이퍼링크, 즉 이동할 페이지의 URL을 지정하는 데 사용됩니다. 웹 문서에서 링크를 만들 때 가장 핵심적인 속성이며, 이 속성이 없으면 <a> 태그는 클릭 가능한 링크로 동작하지 않습니다.
문법(Syntax)
href 속성의 기본 문법은 다음과 같습니다.
<a href="URL">
여기서 URL은 이동하고자 하는 주소를 의미하며, 상대 경로(relative link), 절대 경로(absolute link), 스크립트, 프로토콜 등 다양한 형태의 값을 지정할 수 있습니다.
예제 1: 기본 링크 만들기
다음은 <a> 요소의 href 속성을 활용해 외부 페이지와 사이트 내부 페이지로 연결되는 링크를 만드는 예제입니다.
<!DOCTYPE html> <html> <body> <h2>Learning is Fun</h2> <p> Learn the concepts of <a href="https://tutorialspoint.com/java">Java!</a> Also try JavaScript from our website: <a href="/javascript">JavaScript!</a> </p> </body> </html>
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.
첫 번째 링크는 절대 경로(전체 URL)를 사용해 외부 사이트로 이동하고, 두 번째 링크는 상대 경로를 사용해 현재 사이트 내의 /javascript 페이지로 이동합니다.
예제 2: 이메일 링크(mailto) 만들기
href 속성은 웹 페이지뿐만 아니라 mailto: 프로토콜을 사용해 이메일 주소로도 연결할 수 있습니다. 아래 예제에서는 수신자, 참조(cc), 제목까지 지정한 이메일 링크를 만들어 보겠습니다.
<!DOCTYPE html> <html> <body> <h2>Learning is Fun</h2> <p> Learn the concepts of <a href="https://tutorialspoint.com/java">Java!</a> Also try JavaScript from our website: <a href="/javascript">JavaScript!</a> </p> <p>For more tutorials, kindly <a href="mailto:abcd@demo.com?cc=pqr@demo.com&subject=DEMO EMAIL">EMAIL</a></p> </body> </html>
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 얻을 수 있습니다.
여기서 EMAIL 링크를 클릭하면 시스템에 기본으로 설정된 이메일 프로그램이 자동으로 실행됩니다. 아래 예시에서는 기본 메일 애플리케이션이 OUTLOOK으로 설정되어 있는 경우의 화면입니다.
정리
href 속성은 다음과 같은 다양한 용도로 활용할 수 있습니다.
• 절대 경로: https://로 시작하는 전체 URL로 외부 사이트 연결
• 상대 경로: 현재 사이트 기준의 내부 페이지 연결
• mailto:: 클릭 시 기본 이메일 프로그램을 실행하는 이메일 링크 생성
• 기타 프로토콜: tel:, javascript: 등 다양한 프로토콜 지정
이처럼 <a> 태그의 href 속성 하나만 제대로 이해해도 웹 문서에서 링크를 자유롭게 구성할 수 있습니다.