HTML의 <base> 태그는 HTML 문서 전체에서 사용할 기준 URL(Base URL)을 지정하는 역할을 합니다. 예를 들어, 기준 URL을 https://example.com/tutorials로 설정하면 문서 내에 작성된 /html, /java, /jquery와 같은 모든 상대 경로는 최종적으로 아래와 같은 절대 URL로 해석됩니다.
https://example.com/tutorials/html https://example.com/tutorials/java https://example.com/tutorials/jquery
<base> 태그의 특징
참고: <base> 태그는 종료 태그가 없는 빈(empty) 요소입니다. 즉, </base>처럼 닫아줄 필요가 없으며, 반드시 <head> 영역 안에 하나만 작성해야 합니다.
주요 속성
- href: 페이지 내 모든 상대 URL에 적용될 기준 URL을 설정합니다.
- target: 모든 하이퍼링크와 폼(form)의 기본 열기 방식을 지정합니다. 사용 가능한 값은
_blank(새 창),_parent,_self(현재 창),_top, 그리고 프레임 이름입니다.
<base> 태그 사용 예제
이제 <base> 요소를 실제로 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.example.com/tutorials/">
</head>
<body>
<h2>튜토리얼 목록</h2>
<p><a href="java.html">Java 튜토리얼</a></p>
<p>(https://www.example.com/tutorials/java.html 로 연결됨)</p>
<p><a href="jquery.html">jQuery 튜토리얼</a></p>
<p>(https://www.example.com/tutorials/jquery.html 로 연결됨)</p>
<p><a href="blockchain.html">블록체인 튜토리얼</a></p>
<p>(https://www.example.com/tutorials/blockchain.html 로 연결됨)</p>
<p><a href="python.html">Python 튜토리얼</a></p>
<p>(https://www.example.com/tutorials/python.html 로 연결됨)</p>
</body>
</html>실행 결과
위 예제를 실행하면 각 링크는 파일명 앞에 <base> 태그에서 지정한 기준 URL이 자동으로 붙어 이동하게 됩니다. 덕분에 링크마다 전체 주소를 일일이 입력할 필요 없이 짧은 상대 경로만으로도 일관된 URL 구조를 유지할 수 있습니다.
활용 팁
<base> 태그는 사이트 도메인 변경 시 링크를 일괄 수정해야 하는 번거로움을 줄여주고, 여러 환경(개발·운영 서버 등)에서 상대 경로를 손쉽게 관리할 수 있게 해줍니다. 다만 모든 앵커와 폼에 영향을 주므로, 특정 링크에 다른 동작이 필요하다면 해당 링크에 절대 URL을 직접 지정하는 것이 좋습니다.