name属性とid属性の違いは？HTMLアンカーを使い分けるポイント
2024-04-02
HTMLアンカーをname属性とid属性のどちらで作成すべきか？
結論から言うと、
- ページ内ジャンプのみ使用する場合は、name属性を使用するのが一般的です。
- JavaScriptやCSSで要素を操作したい場合は、id属性を使用する必要があります。
それぞれの属性の詳細と使い分けについて、以下で解説します。
name属性
- ページ内の特定の場所へジャンプするためのアンカーを作成するために使用します。
- 同じページ内に複数のアンカーが存在する場合、それぞれのアンカーを識別するために使用されます。
- JavaScriptではあまり使用されません。
- 以下の例のように記述します。
<a href="#anchor1">アンカー1へジャンプ</a>
<h1 id="anchor1">アンカー1</h1>
id属性
- HTML要素を識別するために使用します。
- ページ内の一意なIDを指定する必要があります。
- JavaScriptやCSSで要素を操作するために使用できます。
<a href="#section-top">ページトップへ戻る</a>
<div id="section-top">
<h1>ページトップ</h1>
</div>
使い分け
| 用途 | 属性 |
|---|---|
| ページ内ジャンプのみ | name |
| JavaScriptやCSSで要素を操作 | id |
| 両方の用途で使用 | どちらでも可（ただし、id属性の方が一般的） |
その他
name属性とid属性は同時に使用できます。id属性は、HTML要素だけでなく、JavaScriptやCSSで使用されるあらゆる要素に指定できます。
まとめ
HTMLアンカーを作成する際は、用途に合わせてname属性とid属性を使い分けましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
</head>
<body>
<h1>目次</h1>
<ul>
<li><a href="#section1">セクション1へジャンプ</a></li>
<li><a href="#section2">セクション2へジャンプ</a></li>
</ul>
<h2 id="section1">セクション1</h2>
<p>セクション1の内容</p>
<h2 id="section2">セクション2</h2>
<p>セクション2の内容</p>
</body>
</html>
JavaScriptで要素を操作
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
</head>
<body>
<button id="button">ボタン</button>
<script>
const button = document.getElementById("button");
button.addEventListener("click", () => {
// ボタンクリック時に、要素を操作する処理
});
</script>
</body>
</html>
両方の用途で使用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
</head>
<body>
<h1>目次</h1>
<ul>
<li><a href="#section1">セクション1へジャンプ</a></li>
<li><a href="#section2">セクション2へジャンプ</a></li>
</ul>
<h2 id="section1">セクション1</h2>
<p>セクション1の内容</p>
<h2 id="section2">セクション2</h2>
<p>セクション2の内容</p>
<script>
const section1 = document.getElementById("section1");
// セクション1を操作する処理
</script>
</body>
</html>
上記はあくまでサンプルコードです。実際の使用例に合わせてコードを修正してください。
HTMLアンカーを作成するその他の方法
URLフラグメントは、URLのハッシュ記号 (#) 以降に続く文字列です。アンカーの名前をURLフラグメントとして指定することで、ページ内ジャンプを実現できます。
<a href="#section1">セクション1へジャンプ</a>
<h2 id="section1">セクション1</h2>
上記の場合、#section1というURLフラグメントが指定されているため、ブラウザは自動的にid="section1"を持つ要素へスクロールします。
JavaScriptを使用して、プログラム的にアンカーを作成することもできます。
<div id="target"></div>
<script>
const anchor = document.createElement("a");
anchor.href = "#target";
anchor.textContent = "アンカー";
document.body.appendChild(anchor);
</script>
上記の場合、#targetというIDを持つ要素へジャンプするアンカーがプログラム的に作成されます。
CSSの::target疑似クラスを使用して、アンカーをクリックした際に特定のスタイルを適用することができます。
<a href="#section1">セクション1へジャンプ</a>
<h2 id="section1">セクション1</h2>
<style>
h2::target {
color: red;
}
</style>
上記の場合、#section1というアンカーをクリックすると、h2要素の色が赤色に変わります。
上記以外にも、さまざまな方法でHTMLアンカーを作成することができます。詳細は以下の参考資料を参照してください。
html hyperlink fragment-identifier
