カスタム検索

<base>タグ

<base>タグの機能と属性
機能 リンクのベースとなるパスを定義
属性 HTML-4.01 href  
XHTML-1.0 href  id  
備考 空要素
XHTML2では廃止になっている

<base>タグは、文書中に存在するリンクに対して、ベース(基準)となるパスを定義します。これにより、文書を他のディレクトリに移動した場合でも、文書内のリンク(<a>タグのhref属性)を書き換えずに済みます。

<base>タグには、href属性が必須で、このhref属性で指定したパスを最上位ディレクトリと見なして<a>タグのhref属性を記述します。その結果、<a>タグでのリンク先の指定は、<base>と<a>のhref属性の値を連結したものになります。

href属性

href属性の値には、ベースとなるパスを記述します。パスは絶対パスでも相対パスでも構いません。

使用例

例えば、http://w-d-l.net/で以下のようなディレクトリとファイルの構成であったとします(http://w-d-l.net/は最上位ディレクトリとなります。)

  • http://w-d-l.net/
    • fish
      • fish.html
      • category
        • same
          • chozame.html
          • ei
            • akaei.html
        • tai
          • kurodai.html

上図の構成で、akaei.htmlの<base>タグのhref属性にhttp://w-d-l.net/を記述し、他のページへリンクする際には、次のようになります。

base.html
<html>
    <head>
        <base href="http://w-d-l.net/" />
        <title>&lt;base&gt;タグの使用例</title>
    </head>
    <body>
        <p><a href="fish/fish.html">fish.htmlへリンク</a>
        </p>
        <p><a href="fish/category/same/chozame.html">chzama.htmlへリンク</a>
        </p>
    </body>
</html>

上の例の場合、<base>のalt属性値と<a>の属性値を連結した形となり、リンク先の指定として結果的に絶対パスを指定していることになります。

<base>を指定した際のリンク先となるパス
<base>のhref属性の値 連結 <a>のhref属性の値
http://w-d-l.net/ + fish/fish.html
http://w-d-l.net/ + fish/category/same/chzame.html

<base>タグのhref属性には相対パスも記述することができます。akaei.htmlの<base>タグのhref属性に../../(categoryディレクトリとなる)を記述し、他のページへリンクする際には、次のようになります。

base2.html
<html>
    <head>
        <base href="../../" />
        <title>&lt;base&gt;タグの使用例</title>
    </head>
    <body>
        <p><a href="same/chozame.html">chozame.htmlへリンク</a>
        </p>
        <p><a href="tai/kurodai.html">kurodai.htmlへリンク</a>
        </p>
    </body>
</html>

この場合、リンク先の指定は、結果的に次のようになります。

<base>を指定した際のリンク先となるパス
<base>のhref属性の値 連結 <a>のhref属性の値
../../(category/) + same/chozame.html
../../(category/) + tai/kurodai.html

id属性

共通して使用される属性のid属性を参照してください。

CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡