HTML에서 href 속성은 이동할 페이지의 URL 주소를 지정하는 데 사용됩니다. 만약 <a> 태그에 href 속성이 포함되어 있지 않다면, 해당 태그는 하이퍼링크로 인식되지 않으며 클릭해도 아무런 동작도 일어나지 않습니다.
즉, href 속성은 <a>(앵커) 태그에 반드시 포함되어야 하는 핵심 속성이며, 항상 <body>…</body> 태그 사이에서 사용해야 한다는 점을 기억하세요.
기본 문법
<a href="URL주소">링크 텍스트</a>
예제
아래 코드를 직접 실행해 보면 href 속성을 활용해 HTML 페이지 내부에 페이지 링크를 만드는 방법을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML href attribute</title> </head> <body> <h1>Learn about the company</h1> <a href="/about/index.htm">About</a> <a href="/about/about_team.htm">Team</a> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 'About'과 'Team' 두 개의 텍스트 링크가 화면에 표시됩니다. 각 링크를 클릭하면 href 속성에 지정된 경로의 페이지로 이동하게 됩니다.
알아두면 좋은 팁
- 상대 경로 vs 절대 경로: 위 예제처럼 '/about/index.htm'처럼 사이트 내부 기준의 상대 경로를 사용할 수도 있고, 'https://example.com/page'처럼 전체 URL인 절대 경로를 사용할 수도 있습니다.
- 새 창으로 열기: target="_blank" 속성을 함께 추가하면 링크를 새 탭에서 열 수 있습니다.
- href 속성의 다른 활용: href는 <a> 태그뿐만 아니라 외부 CSS 파일을 연결하는 <link> 태그에서도 사용됩니다.