プログラムを仕事でしている人と、そうでない人の違いは、非常に大きなものがあります。
- プログラムができる人は、「ITに詳しいハズ」
- プログラムができない人は、「ITに詳しくなくてもいい」
多くの人がこの先入観を持って、仕事の専門職として見ていると思いますが、
実際はプログラマーと言う職業は、いつも使っているプログラミング言語しか使えないと言うのが正解です。
言葉が話せるから、英語でも日本語でもスペイン語でも、どんな言語も話せるワケではないですよね。
なんなら、日本の学校での英語教師で、英語が流暢に話せない人がまあまあな割合でいると言うのも色々な調べでありますが、
ベネッセ社の調べでは、6割ぐらいいるそうです。
中高英語指導、教員6割が自身の英語力不足を実感…ベネッセ調査(2015年)
英語の教師を批判しているわけではなく、世の中「できない」よりも「できる」方がいいのは間違いありません。
そして、「知らない」よりも「知っている」方がいいとも言い換えられます。
そして、ITエンジニア(特にwebエンジニア）というジャンルいおいては、知らないと事故ってしまう知識というのも数多くあります。
そんな、知らないと事故るモノを、ブログに書き溜めていきたいと思います。
今回は、「HTMLのページ内リンクでのIDとName属性」について、最新の知識を理解しておくための話です。
HTMlのページ内リンクについて
ページの中での見出し欄に自動スクロールさせる「ページ内リンク」は、第2のURL(URI)として活用するWebサイトも多いでしょう。
そんなページ内リンクの仕様が、HTML5の登場で大きく変わっている事を知らない、シニアエンジニア（HTMLコーダー）の人は、最新のHTML仕様を知っておかないと事故ります。
ちなみに、ページ内リンクの事を、正式には、アンカー（アンケーリンク : anker link）と言うので、覚えておきましょう。
ページ内リンクの最新仕様(2025年時点)
w3c リンク
元々、以下のように、Aタグに対して、name属性をつけた座標位置に対して、スクロールするという機能でした。
<a name="contents-1"></a>
これが、HTML5の仕様変更で、ほぼ全てのタグのid属性を対象に変更されました。
<div id="contents-1"></a>
ちなみに、ブラウザによっては、いまだにname値でも動作するため（下位互換性重視のためだと思われる）、ちゃんと仕様把握していないと、想定外の挙動をしてしまう可能性があります。
注意点
name属性でもid属性でも、気をつけないといけない点としては、
"ページ内のユニーク値にする必要がある"という点です。
生まれてきた疑問
ページ内でユニークは、id属性の根本ルールですが、name値とid値で値がカブったときは、どういう動作になるのでしょう？
以下の内容でインターネットブラウザを複数実験して見ました。
（実験に使ったソースと、結果のみ表示します。）
実験1. idが2つ重複している場合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
scroll-behavior:smooth;
}
.content{
height:50vh;
margin-top:30vh;
border:1px solid red;
}
</style>
</head>
<body>
<a href="#content_1">content_1</a>
<div class="content" id="content_1">content-1</div>
<div class="content" id="content_1">content-2</div>
</body>
</html>
1番目の id="content_1"がヒット！
実験2. nameが2つ重複している場合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
scroll-behavior:smooth;
}
.content{
display:block;
height:50vh;
margin-top:30vh;
border:1px solid red;
}
</style>
</head>
<body>
<a href="#content_1">content_1</a>
<a class="content" name="content_1">content-1</a>
<a class="content" name="content_1">content-2</a>
</body>
</html>
1番目の name="content_1"がヒット！
実験3. id , nameの順で同じ値
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
scroll-behavior:smooth;
}
.content{
display:block;
height:50vh;
margin-top:30vh;
border:1px solid red;
}
</style>
</head>
<body>
<a href="#content_1">content_1</a>
<div class="content" id="content_1">content-1</div>
<a class="content" name="content_1">content-2</a>
</body>
</html>
id="content_1"がヒット！
実験4. id , nameの順で同じ値
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
scroll-behavior:smooth;
}
.content{
display:block;
height:50vh;
margin-top:30vh;
margin-bottom:50vh;
border:1px solid red;
}
</style>
</head>
<body>
<a href="#content_1">content_1</a>
<a class="content" name="content_1">content-2</a>
<div class="content" id="content_1">content-1</div>
</body>
</html>
id="content_1"がヒット！
結果
興味深い結果が出ましたね。
idとnameの値が重複した場合、name値よりも、id値の方が優先されるようです。
（アンカーリンクの場合）
調査したブラウザは、以下の通りです。
MacBook
- GoogleChrome142.0.7444.60（Official Build） （arm64）
- Safari ver18.6
- Firefox ver144.0
iPhone iOS 18.6.2
- Safari
Android ver16 (Google Pixcel9 Pro Fold)
- Chrome ver 142.0.7444.138
Javascript対応について
アンカー対応の要素は、以下のコードで、調査することができます。
document.querySelector("#content_1")
これで上記4つのページを調査して見たところ、またまた興味深い結果になりました。
- test1 : 1番目のid="content_1"を取得
- test2 : null
- test3 : id="content_1"を取得
- test4 : id="content_1"を取得
この結果から、現時点のJavascriptでは、アンカー対応は、idのみに限定しているようです。
あとがき
実際に、コードを書いて実験することは、非常に有意義ですね。
一昔前のIEがある状態だと、IEだけまるで違う挙動になることが多かったんですが、
最近のブラウザは、ほぼ同じ挙動をしてくれるのでありがたいです。
でも、たまにSafariだけ違うことがあるので、エンジニアはSafariチェックを欠かせないようにしたいです。
話を戻すと、アンカーリンクのidとnameについての挙動を、把握して、利便性の高いWebサイト（システム）を構築するように心がけましょう！
0 件のコメント:
コメントを投稿