HTML에서 페이지를 서로 연결하려면 <a> 태그에 href 속성을 함께 사용합니다. 이때 상대 URL(Relative URL)은 같은 웹사이트 내부의 다른 페이지로 연결할 때 활용되며, /contact, /about_team처럼 도메인 주소를 생략하고 경로만 작성하는 방식입니다.
<a>...</a> 태그 사이에 들어가는 모든 내용은 클릭할 수 있는 하이퍼링크로 변환됩니다. 상대 URL을 다룰 때 자주 사용되는 <a> 태그의 주요 속성은 아래와 같습니다.
| 번호 | 속성 및 설명 |
|---|---|
| 1 | Href 링크로 연결할 페이지의 URL을 지정합니다. |
| 2 | Rel 현재 문서와 연결된 문서 사이의 관계를 나타냅니다. nofollow, external, author, bookmark 등의 값을 사용할 수 있습니다. |
| 3 | Target 링크가 열릴 위치를 지정합니다. _self(현재 창), _blank(새 창), _parent(부모 프레임), _top(최상위 프레임) 등의 값이 있습니다. |
예제
아래 코드를 실행하면 상대 URL을 이용해 페이지를 연결하는 결과를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML 상대 URL</title> </head> <body> <p> 저희 <a href="/about/about_team.htm">팀</a>은 프로그래머, 작가, 애널리스트로 구성되어 있습니다. </p> </body> </html>
위 예제에서 href="/about/about_team.htm"은 현재 사이트의 루트 디렉터리를 기준으로 한 상대 경로입니다. 브라우저는 이 경로 앞에 현재 도메인을 자동으로 붙여 최종 URL을 완성하기 때문에, 사이트 주소가 바뀌더라도 링크를 수정하지 않고 그대로 유지할 수 있다는 장점이 있습니다.