HTMLの要素を使用したドキュメントベースURLの指定

Webサイトは、画像やスタイルシートなどのページやソースを指す一連のリンクで構築されています。 2つの方法があります これらのソースにリンクするURLを指定してください：絶対パスか相対パスを使う.

絶対パスは特定の宛先を表し、通常はHTTPのようにドメイン名から始まります。 www.domain.com/destination/source.jpg. 相対パスは反対です。リンク先はルートの場所、またはほとんどの場合はWebサイトのドメイン名によって異なります。.

典型的な相対パスは以下のようになります。

あなたのウェブサイトのドメインが, hongkiat.com 画像パスは以下のように解決されます。 hongkiat.comimages_2 /指定ドキュメントのベースURLとhtmlベースのelement.png. あなたがしばらくの間ウェブサイトを開発しているならば、あなたはこれを理解するべきです.

しかし、あなたのほとんどはおそらくについて聞いたことがないでしょう 素子。このHTMLタグはHTML4から出回っていますが、実際にはほとんど実装されていません。 W3Cはこの要素を次のように記述しています。

“基本要素は作者が指定することを可能にします ドキュメントベースURL 相対URLを解決する目的で、 デフォルトのブラウジングコンテキスト ハイパーリンクをたどる目的で.”

この elementは基本的にWebページ内の相対パスのベースURLを決定します。 Webサイトのルートの場所やドメインに頼るのではなく、リソースがCDN（Content Delivery Network）に存在するURLなど、他の場所を指すようにすることができます。それが実際にどのように機能するか見てみましょう.

基本要素を使用する

の 横に沿って定義されます そして 内のタグ . 次の例では、ベースURLをGoogleに設定します。.

この指定はドキュメント内のすべてのパスに影響します。 href 属性と src 画像の。そのため、次のように、ドキュメント内にスタイルシート、画像、およびリンクが相対パスで設定されているとします。

  アンカーリンク  

私たちのWebページは下にあるにもかかわらず demo.hongkiat.com 相対パスは参照します hongkiat.maxcdn.com, で指定されたベースパスに従う タグ。リンクの上にマウスを移動すると、パスが正確に向かっている場所がブラウザに表示されます。.

すべての相対パスは、最終的には次のようになります。

  アンカーリンク  

デフォルトリンクターゲットの設定

ベースURLを定義する以外に、 タグを使用してデフォルトのリンクターゲットを設定することもできます。 ターゲット 属性。文書内のすべてのリンクを開きたいとします。 ブラウザの新しいタブで, をセットする ターゲット と _ブランク, そのようです.

制限事項

の ただし、tagは状況によってはいくつか注意点があります。

まず、 ブラウザのサポートは素晴らしいです。 IE6で動作します。しかし、IE6では終了タグが必要だと考えています . 終了タグが指定されていない場合、これはドキュメント内で階層の問題を引き起こす可能性があります。この問題に対処するための簡単で簡単な方法は、追加することです。 コメント内で閉じる, .

あなたが使っているなら ＃ と組み合わせて ドキュメント内のセクションにリンクするには、Internet Explorer 9で問題が発生する可能性があります。参照されているセクションにジャンプする代わりに、Internet Explorer 9はページを再読み込みします。.

さらに、空白 href ページが存在する現在のディレクトリにリンクするのではなく、ベースURLになる（これはブラウザのデフォルトの動作です）。これは予期しない参照の問題を引き起こす可能性があります。.

要約

の Webドキュメント内のリンク参照を簡単にすることができる便利なHTML機能です。落とし穴を最小限に抑えるために、タグを慎重に使用してください。詳細については、以下の参考文献に従ってください。 タグ：

• 絶対URLと相対URL - MSDN
• HTML基本要素 - W3C