HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのbase要素におけるhref属性の使い方｜ベースURLの設定方法を解説

base要素のhref属性とは

HTMLの<base>要素におけるhref属性は、ドキュメント内のすべての相対URLに対する基準URL（ベースURL）を設定するための属性です。<base>要素は通常、<head>セクション内に一度だけ記述します。

たとえば、ベースURLをhttps://example.com/tutorialsと設定した場合、/html、/java、/jqueryといった相対URLは、最終的に次のように解決されます。

https://example.com/tutorials/html
https://example.com/tutorials/java
https://example.com/tutorials/jquery

href属性の構文

href属性の基本的な構文は以下のとおりです。

<base href="absolute_URL">

ここで「absolute_URL」には、ベースURLとして使用する絶対URLを指定します。

実装例

それでは、<base>要素のhref属性を使った具体的な実装例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<base href="https://www.example.com/tutorials/">
</head>
<body>
    <h2>Tutorials List</h2>
    <p><a href="java.html">Java Tutorial</a></p>
    <p>（https://www.example.com/tutorials/java.html として扱われます）</p>
    <p><a href="jquery.html">jQuery Tutorial</a></p>
    <p>（https://www.example.com/tutorials/jquery.html として扱われます）</p>
    <p><a href="blockchain.html">Blockchain Tutorial</a></p>
    <p>（https://www.example.com/tutorials/blockchain.html として扱われます）</p>
    <p><a href="python.html">Python Tutorial</a></p>
    <p>（https://www.example.com/tutorials/python.html として扱われます）</p>
</body>
</html>

出力結果

HTMLのbase要素におけるhref属性の使い方｜ベースURLの設定方法を解説

コードの解説

上記の例では、まず次のようにベースURLを設定しています。

<base href="https://www.example.com/tutorials/">

その後、リンク先を「java.html」と指定すると、このリンクは最終的に次のURLとして解釈されます。

https://www.example.com/tutorials/java.html

このように、<base>要素のhref属性を活用することで、ページ内のすべての相対リンクに共通の基準パスを一括して適用でき、URLの記述を簡潔に保つことができます。サイト全体でディレクトリ構成が変わった場合も、<base>要素の1行を修正するだけで対応できるため、メンテナンス性の向上にもつながります。

  1. HTMLのstart属性とは？順序付きリストの開始番号を指定する方法

    HTMLのstart属性は、順序付きリスト（<ol>要素）において、最初のリスト項目に付与される番号（開始値）を指定するための属性です。通常、順序付きリストは「1」から自動的に採番されますが、start属性を使うことで、任意の番号からリストを開始させることができます。 構文 start属性の基本的な構文は以下のとおりです。 <ol start="number"></ol> start属性の値には正の整数を指定します。例えば「5」を指定すれば、リストは「5、6、7…」というように採番されます。 使用例 それでは、HTMLのstart属性を使

  2. HTMLのrowspan属性とは？テーブルセルの行結合の使い方を解説

    HTMLのrowspan属性は、表（テーブル）のセルが縦方向にまたぐ行数を指定するための属性です。この属性を使用することで、複数の行にまたがるセルを作成でき、より柔軟なテーブルレイアウトを実現できます。rowspan属性を適用できるのは、td要素またはth要素のみです。それ以外のHTML要素には使用できない点に注意しましょう。rowspan属性の構文rowspan属性の基本的な構文は以下のとおりです。<タグ名 rowspan=数値></タグ名>「数値」には、セルがまたぐ行数を整数で指定します。たとえば「rowspan=2」と指定すると、そのセルは2行分の高さを持つことに