HTML <base> 요소는 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 하나의 <base> 요소만 존재할 수 있습니다.

스크립트에서 문서의 기준 URL을 알아내야 할 땐 Node.baseURI을 사용하세요. 문서에 <base> 요소가 존재하지 않을 때의 baseURI 속성의 값은 location.href와 같습니다.

<head>
  <base href="https://sorto.me/docs/Web" target="_top" />
</head>

특성

전역 특성을 포함합니다.

아래 특성 중 하나라도 지정할 경우, 상대 URL을 사용한 다른 모든 요소보다 <base> 요소를 HTML 문서의 위에 배치해야 합니다.

href

문서 내의 상대 URL이 사용할 기준 URL입니다. 절대 및 상대 URL을 사용할 수 있습니다.

target

target 특성을 명시하지 않은 <a>, <area>, <form> 요소가 탐색을 유발했을 때, 그 결과를 보여줄 기본 브라우징 맥락을 지정합니다. 키워드나 사용자 정의 이름을 사용할 수 있습니다.

다음 키워드는 특별한 의미를 갖습니다.

  • _self (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.
  • _blank: 결과를 새롭게 생성한 이름 없는 브라우징 맥락에 보여줍니다.
  • _parent: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 _self와 동일합니다.
  • _top: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 _self와 동일합니다.

사용 일람

다수의 <base> 요소

<base> 요소가 여럿 존재하는 경우, 제일 처음으로 지정한 target 특성과 제일 처음으로 지정한 href 특성을 제외한 나머지는 모두 무시합니다.

<base href="https://sorto.me/docs/Web"> <!-- 제일 처음으로 지정한 href 특성 -->
<base target="_blank"> <!-- 제일 처음으로 지정한 target 특성 -->
<base href="https://example.org" target="_self"> <!-- 무시함 -->

페이지 내부 앵커

<a href="#some-id">처럼 문서 프래그먼트를 가리키는 링크의 href<base>의 기준 URL을 사용합니다. 따라서 기준 URL 뒤에 프래그먼트를 붙인 주소로 HTTP 요청을 전송합니다. 예를 들어,

  1. <base href="https://example.com">이고,
  2. <a href="#anchor">앵커</a>일 때,
  3. 2번의 링크는 #anchor가 아니라 https://example.com/#anchor를 가리킵니다.

Open Graph

Open Graph 태그는 <base>를 인식하지 못하므로 항상 완전한 형태의 절대 URL을 지정해야 합니다.

<base href="https://example.com/" /> <meta property="og:image" content="/thumbnail.jpg" />
<meta property="og:image" content="https://example.com/thumbnail.jpg" />

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefox
지원*12지원지원1
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원4지원
href
IEEdgeChromeSafariFirefox
지원12지원지원1
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원4지원
Relative URIs.
IEEdgeChromeSafariFirefox
지원12지원지원4
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원4지원
target
IEEdgeChromeSafariFirefox
지원12지원지원지원
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원지원지원
MDN BCD에서 가져오는 데이터입니다.

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)