<base> 태그의 정의 및 사용법

<base> 태그는 다음의 두 가지 정보를 나타냅니다.

  • 문서의 모든 상대 URL에 사용할 기준(또는 기본, base)이 되는 URL을 지정하는 것과,
  • 문서 내 하이퍼링크를 따라 탐색할 수 있는 태그 내 target 속성의 기본값을 지정하는 것입니다.

사용 방법

그렇다면, <base> 태그의 두 가지 정보(상대 URL 기준 설정과 target 속성 지정)을 나타내는 방법과 그 정보를 사용하려면 어떻게 해야 할까요?
<base> 태그는 이러한 두 가지 정보를 지정하기 위한 속성이 있습니다.

  • href 속성: 문서의 모든 상대 URL에 사용할 기준(또는 기본, base)이 되는 URL을 지정합니다.
  • target 속성: 문서 내 하이퍼링크를 따라 탐색할 수 있는 태그 내 target 속성의 기본값을 지정합니다.

하나의 정보만을 나타내려면 관련된 하나의 속성만 사용하고, 두 정보를 모두 나타내려면 두 개의 속성을 모두 사용하면 됩니다.

HTML 
<!-- 하나의 정보만을 나타내려면 -->
<base href="https://example.com"> <!-- href 속성만 사용할 경우 -->
<base target="_blank"> <!-- target 속성만 사용할 경우 -->

<!-- 두 정보를 모두 나타내려면  -->
<base href="https://example.com" target="_blank"> <!-- 먼저 작성해야 하는 속성의 우선순위는 없음 -->

이렇게 하면, <base> 태그로 지정한 정보를 다른 태그(예: <a>나 <img>, <form> 등 상대 URL 설정이나 target 속성을 지정할 수 있는 태그)에서 사용됩니다.

이때, <base> 태그는 이 태그 정보를 사용하는 다른 태그보다 앞에 와야 합니다.

마크업 규칙

  • <base> 태그는 문서 내에서 한 번만 사용해야 합니다.
  • 허용되는 부모는 <head> 태그입니다. 즉, <base> 태그는 <head> 태그의 자식에 위치해야 합니다.
  • <base> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</base>)가 없다는 의미입니다.

데모

데모 예제로 <base> 태그의 사용 방법을 확인해 보세요.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>base 태그</title>
        <base href="https://codingeverybody.kr/category/html/" target="_blank">
    </head>
    <body>
        <a href="html-tag/">HTML 태그 소개</a>
        <!-- href="https://codingeverybody.kr/category/html/html-tag/"와 동일합니다.
             '복잡한 디렉토리 경로를 일일이 쓰지 않고도'
             문서 안에서 상대 경로를 '깔끔하고 간단'하게 사용할 수 있게 됩니다. -->
    </body>
</html>
실제 적용된 모습

<base> 태그로 상대 URL 기준을 설정하면 문서 내에서 사용하는 모든 상대 URL이 지정된 base URL을 기준으로 해석됩니다. 예를 들어, 이미지, 링크, CSS, 자바스크립트 등에서 상대 경로를 사용하는 경우 <base> 태그에서 설정한 URL을 기준으로 계산됩니다.

왜 사용할까요?

<base> 태그를 사용하면,
복잡한 디렉토리 경로를 일일이 쓰지 않고도 문서 안에서 상대 경로를 깔끔하고 간단하게 사용할 수 있게 됩니다.

예를 들어, 웹사이트의 디렉토리 구조가 다음과 같이 복잡한 경우에 유용합니다.

복잡한 웹사이트의 디렉토리 구조의 예

만약 <base href="https://example.com/projects/2025/docs/html/">를 설정했다면, 해당 문서에서 상대 경로를 아래와 같이 간단하게 사용할 수 있는 장점이 있습니다.

HTML 
<head>
    <base href="https://example.com/projects/2025/docs/html/">
</head>
<body>
    <a href="guide.html">Guide</a>
    <img src="images/logo.png" alt="Logo">
</body>

이 경우 브라우저는 다음과 같이 해석합니다.

  • guide.html은 실제로 https://example.com/projects/2025/docs/html/guide.html로 해석되고,
  • images/logo.png는 https://example.com/projects/2025/docs/html/images/logo.png로 해석됩니다.

속성

<base> 태그는 모든 전역 속성을 사용할 수 있습니다.
또한, 다음의 속성을 사용할 수 있습니다.

href 속성

문서 전체에서 상대 URL에 사용할 기본 URL을 지정합니다.
이 URL은 상대 URL의 기본으로 사용할 수 있는 유효한 값이어야 합니다. 즉, 절대 및 상대 URL을 사용할 수 있습니다.

data: 및 javascript: 프로토콜(스키마)로 시작한 URL은 유효하지 않습니다.

target 속성

target 속성 지정할 수 있는 태그들 중에서 target 속성을 명시적으로 지정하지 않은 태그(예: <a>나 <img>, <form>)의 target 속성의 기본값을 지정합니다.

부연설명
target 속성은 사용자가 하이퍼링크를 클릭했을 때 URL을 어떤 창이나 탭에서 링크 대상 페이지를 열지 지정합니다.

값
target 속성의 값
_self target 속성이 지정되지 않을 때 기본값임.
URL이 현재 창이나 프레임에 표시됨
_blank URL이 새 창이나 새 탭에 표시됨
_parent URL이 부모 프레임에 표시됨. 프레임 구조가 없는 경우 _self와 동일하게 동작함
_top URL이 전체 창의 최상위 프레임에 표시됨. 프레임 구조가 없는 경우 _self와 동일하게 동작함

주의할 점

<base> 태그 사용 시 주의할 점을 확인해 보세요.

하나의 문서에 여러 개의 <base> 태그 사용 금지

<base> 태그는 문서에서 한 번만 사용해야 합니다.
또한 <head> 태그의 자식에 위치해야 합니다.

다음은 잘못된 예입니다.

HTML 
<head>
    <base href="https://example.com">
    <base target="_blank">
</head>
HTML 
<head>
    <base href="https://example-1.com">
</head>
<body>
    ...
    <base href="https://example-2.com">
    ...
</body>
HTML 
<head>
    <base href="https://example-1.com">
</head>
<body>
    ...
    <base target="_blank">
    ...
</body>

만약에 한 문서 내에서 여러 개의 <base> 태그가 존재하면 첫 번째 href와 첫 번째 target만 사용하며 나머지는 모두 무시합니다.

같은 페이지 내에서의 이동하는 URL

<a href="https://www.example.com#section-1">처럼 URL 뒤에 #이 포함된 주소는 페이지 내에서의 이동을 할 수 있습니다.

이때, 동일한 페이지(문서) 내에서 페이지 내 이동을 하기 위해 <a href="#section-1">라는 URL이 있다고 가정해 보겠습니다.
<base> 태그를 사용하지 않으면 상관없지만, <base> 태그를 사용해서 상대 URL에 사용할 기준이 되는 URL을 지정했다면 <a href="#section-1">에도 영향을 받게 됩니다.

HTML 
<head>
    <base href="https://example.com/dir/">
</head>
<body>
    <a href="#section-1">페이지 내에서의 이동</a> <!-- href="https://example.com/dir/#section-1"과 동일합니다. -->
    <section id="section-1">
        ...
    </section>
</body>

오픈 그래프 프로토콜(Open Graph protocol)

오픈 그래프 프로토콜(Open Graph protocol)에서 사용되는 태그들은 <base> 태그의 영향을 받지 않습니다. 이 태그들에서 사용되는 URL은 항상 완전한 표준 URL(절대 경로)이어야 합니다.

따라서, 온전한 절대 경로를 지정해야 합니다.

HTML 
<head>
    <base href="https://example.com/dir/">
    <meta property="og:url" content="https://www.example.com/dir/example.html">
</head>

기술적인 문법 요약

base 태그의 구문 형식
태그 생략 시작 태그가 있어야 하며, 닫는 태그(</base>)가 있어서는 안 됩니다.
허용되는 부모 요소 다른 <base> 태그를 포함하지 않는 <head>
허용되는 콘텐츠 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다.
암시적인 role 속성 값 없음
허용된 role 속성 값 없음

브라우저 호환성

base 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<base> 1 12 1 3

명세서

base 태그의 명세서 사양
명세서 사양
<base> HTML
#the-base-element

참고문헌

같이 보기