HTML の <a> タグにおける href 属性のベースアドレス指定方法は、<base> タグを使用する方法と、絶対パスまたは相対パスで指定する方法の 2 つがあります。
1. <base> タグを使用する方法
<head> 要素内に <base> タグを記述することで、ページ内のすべての相対 URL のベースアドレスを指定できます。
HTML
<!DOCTYPE html>
<html>
<head>
<base href="https://example.com/page/">
</head>
<body>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</body>
</html>
上記の例では、href 属性が "about.html" や "contact.html" のように相対パスで記述されていますが、<base> タグによってベースアドレスが "
<base> タグのメリット
- ページ内の複数のリンクに対して、まとめてベースアドレスを指定できる
- 相対パスで記述できるため、HTML ファイルの可読性が向上する
<base> タグの注意点
- ページ内に
<base>タグは 1 つしか記述できない <base>タグは<head>要素内に記述する必要がある
2. 絶対パスまたは相対パスで指定する方法
<a> タグの href 属性に、絶対パスまたは相対パスを直接記述する方法です。
絶対パスの例
HTML
<a href="https://example.com/page/about.html">About</a>
相対パスの例
HTML
<a href="about.html">About</a>
絶対パスと相対パスの使い分け
- 絶対パス: 外部サイトへのリンクや、サイト内の別のディレクトリにあるページへのリンクなど、常に同じ URL を参照する場合に使用します。
- 相対パス: 同じディレクトリ内や、近いディレクトリにあるページへのリンクなど、ベースアドレスからの相対的な位置関係でリンク先を指定する場合に使用します。
どちらの方法を使うべきか
- ページ内の複数のリンクに対して、まとめてベースアドレスを指定したい場合は、
<base>タグを使用する方法が便利です。 - 個別のリンクに対して、異なるベースアドレスを指定したい場合や、外部サイトへのリンクを記述する場合は、絶対パスまたは相対パスを直接記述する方法を使用します。
補足
<base>タグとhref属性の両方でベースアドレスが指定されている場合、href属性の指定が優先されます。href属性に "#" で始まるアンカーリンクを指定した場合、<base>タグの影響を受けません。
0 件のコメント:
コメントを投稿