catnose
catnose
<base>タグを使うことで、HTML文書内に含まれるすべての相対パスの基準URLを変えることができます。
baseタグの使い方
基準URLを変える（href）
例えばhttp://hoge.comというWebページ上で<a href="/about">About</a>という相対パスのリンクを貼るとします。このリンクをクリックすると通常はhttp://hoge.com/aboutへ飛びます。
<base>を使うことで、このリンク先のURLを別のURL/aboutに変えることができます。
👩💻https://hoge.com上のページ
<!-- 基準URLをgithub.comに -->
<base href="https://github.com/">
<!-- リンク先はhttps://github.com/about -->
<a href="/about">About</a>
👆hoge.com上のページですが、<base>のhref属性にgithub.comにしています。これにより<a href="/about">は実質<a href="https://github.com/about">と同じ意味になります。
️<base>のhref属性が影響を与えるのは相対パスに対してのみです。絶対パス（例：<a href="https://hoge.com">リンク</a>）には影響を与えません。
リンクのtarget属性を変える
<base target="_blank">
<!-- 👇リンク先は新しいタブで開かれる（baseのtargetが反映） -->
<a href="/about">About</a>
<!-- 👇同じタブで開かれる（baseのtargetは無視） -->
<a href="/about" target="_self">About</a>
👆<base>にtarget属性を指定すると、その内容がページ内のリンクに反映されるようになります。ただし、アンカータグにtarget属性が記載されている場合はそちらが優先されます。
😺「ページ内のリンクをどれも新しいタブで開くようにしたい」という場合に便利ですが、ユーザビリティとセキュリティの観点から推奨できません。
<base href="https://example.com" target="_blank">
👆もちろんhrefとtargetを同時に指定することもできます。
HTMLのheadタグ内で使う
<head>
<meta charset="utf-8">
<base href="http://hoge.com">
</head>
<base>はメタデータ要素であるため、headタグ内に配置します。ブラウザ上に内容が表示されるものではありません。
baseは他のリンクより先に配置する
<base>要素にhref属性を指定する場合は、相対URLが指定されている他の要素より前に配置する必要があります。
🙅OGPタグなどでは使えない
<meta property="og:url" content="https://example.com/post1" />
<meta property='og:image' content='https://example.com/image.png' />
👆ブラウザは<base>を処理してくれますが、外部サービスが<base>の内容を理解して相対パスを処理してくれるとは限りません。OGPタグには完全なURL（絶対パス）を指定するようにしましょう。
複数のbaseタグを置くことはできない
<base>タグは1つのHTMLページに1つだけ配置できます。もし複数あった場合は、その中の先頭の<base>の内容が反映されます。
baseタグのブラウザ対応
主要なモダンブラウザ全てで使用できます（ブラウザーの対応）。