http://example.com/hoge と http://example.com/hoge/を区別せずに扱おうとすると、相対パスの問題が起きます。これを回避するために絶対パスを使いたいですが、一々フルで書くのはめんどくさいので<base>タグを使って楽をしようと思います。
絶対パスで省略できる部分
実は自分のサイトに対する絶対パスには、省略できる部分があります。それは、プロトコルからドメイン名までの部分です。つまりhttp://example.com/hogeは/hogeにまで省略できます。
ここでポイントなのは、/hogeは省略しただけで、絶対パスのままであるということです。そのため、<base>タグでも使用できます。
省略してみる
<!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <title></title> <a href="http://example.com/hoge/fuga.html">fuga</a> <a href="/hoge/fuga.html">fuga</a> <!-- 上と同じ --> <img src="/hoge/image.png">
これがこうなります。
<!DOCTYPE html> <html lang="ja"> <!-- 追加--> <base href="/hoge/"> <meta charset="UTF-8"> <title></title> <!-- URLが相対パスになる --> <a href="fuga.html">fuga</a> <img src="image.png">
<base>タグを使うことで通常の相対パスのような指定が可能となりました！素晴らしいですね。
