リンクAの意味論、書き方、ベストプラクティス

リンク A のセマンティクス、ライティングスタイル、およびベストプラクティス。
私は JavaEye でこのトピックを見ましたが、議論が非常に興味深いものだったので、参加せずにはいられませんでした。セマンティック思考まず、リンクやボタンにはセマンティクスがあり、使い勝手の都合上、置き換えることはできません。 a はアンカーの略語で、ナビゲーションや位置決めに使用されるアンカーポイントです。典型的な使用法は次のとおりです。
<a href="http://www.w3c.org/">W3C Web サイト</a> <a name="anchor-one">これはアンカー 1 の場所です。</a> <a href="#anchor-one">アンカー 1 へのリンク</a>
name属性とhref属性を同時に指定することもできます。これは基本的な知識です。ご不明な点がある場合は、HTML 4.01仕様を参照してください。
ボタン（button と <input type="button/submit" /> を含む）について説明します。意味的には、ボタンはフォームの一部であり、ボタンがトリガーするアクションはフォームに関連しています。フォームアクションがまったくない場合は、ボタンを使用しないでください。以下にいくつか例を挙げます。

上の図にはいくつかのリンクが表示されています。ボタンのように見えますが、意味的には a です。

上図の表示ボタンと並び替えボタンが操作フォームです。意味的に言えば、ボタンまたは入力の方が適切です。（注：Taobaoの検索結果ページでは現在、を使用しています。これは、後述のプログレッシブエンハンスメントの考慮のためです）
つまり、リンクとボタンには独自の意味と使用シナリオがあり、自由に交換することはできません。文章分析の世界は決してそれほど単純ではありません。JavaScript が全盛の今日の Web の世界では、リンク a は js イベントをトリガーするためによく使用されます。
<a href="" onclick="something()">テスト 1</a> <a href="#" onclick="something();return false">>テスト 2</a> <a href="javascript: void(0)" onclick="something()">>テスト 3</a> <a href="javascript: void something()">>テスト 4</a>
まず、最初の書き方は IE では href を自動的に補完してしまうため問題があります。
2 番目の書き方は、onclick イベント内のデフォルトイベントを直接ブロックするため、href="#" 内の # は実際には任意の値にすることができます。 # は、js がない場合にクリック後に現在のページに留まるように考慮するために使用されます (注: a が 1 画面より下にある場合、この記述方法ではページが先頭までスクロールされます)。
3 番目の書き方は、href 値が JavaScript 疑似プロトコルであり、void が JavaScript の単項演算子 (!、typeof など) であるというものです。 void 演算子の機能は、値を返さずに次の式のみを実行することです。 void(0) はデフォルトイベントを阻止するようです。実際、次の式はすべて正しいです。
<a href="javascript: void(1)" onclick="something()">>テスト 3</a> <a href="javascript:;" onclick="something()">>テスト 3</a> <a href="javascript:" onclick="something()">>テスト 3</a> <a href="javascript: return true" onclick="something()">>テスト 3</a>
のデフォルトの操作は JavaScript 疑似プロトコルの内容であるため、void を追加しても他のイベントはトリガーされません。 (注: Opera では、擬似プロトコルで戻り値がある場合、href が変更されるため、通常は void(0) または空のステートメントを記述します)
3 番目の書き方を理解すれば、4 番目の書き方も明らかになります: href="javascript: void something()"。この書き方の「利点」の 1 つは、マウスをホバーすると、ステータスバーを通じて実行される関数をユーザーが確認できることです。これは開発者にとってはメリットかもしれませんが、一般ユーザーの信頼を本当に高めることになるのでしょうか?それとも恐怖感でしょうか?データがなければ結論を導き出すことはできません。
上記の記述方法に加えて、クラスまたは ID を介してフックを追加し、js でフックを介してイベントを追加するという記述方法も推奨されます。反省: 上記の書き方のどれが最良であるかを議論するつもりはありません。問題の原因について考えてみましょう。なぜ js イベントをトリガーするためにを使用するのでしょうか?私が考えられる理由は次のとおりです。

これは自動的にマウスホバースタイルになります。誰もがこのように書く理由が思い当たりません。これは非常に自然なことではないでしょうか? IE6 は CSS スタイル a:hover のみをサポートし、href は空にできないためです。
浮遊スタイル以外には実質的な理由はないことがわかります。スタイルの問題をしばらく脇に置いて、例を見てみましょう。

上記は Google Reader の操作バーです。興味があれば、Firebug を使って確認してみてください。使用されているマークアップは次のとおりです。

マウスのホバースタイルはまったく問題ではありません。

CSS に cursor: pointing to point を追加するだけです。
上記の例から、次のような結論を導き出すことができます。ナビゲーションや位置決めのセマンティクスなしで js アクションをトリガーするだけであれば、span またはその他の適切なタグを使用できます。を誤って使用する必要はありません (を使用すると問題が発生します。まず、デフォルトのイベントが削除され、次に、ステータスバーの情報が一般ユーザーを混乱させたり、怖がらせたりする可能性があります)。
もちろん、それがリンク自体であり、ナビゲーションの前に js ロジックを追加したり、フォームの並べ替えに適用したりするだけの場合は、プログレッシブエンハンスメントの観点から、js をサポートしていないブラウザーでも使いやすさを確保するために、完全な href 値を記述することがベストプラクティスです。ベストプラクティスは、要約や最終的な結論ではありません。ベストプラクティスは、コードを書く前に考慮すべき一連の原則にすぎません。

具体的な使用シナリオに応じて、link a または button ボタンを使用します。button はフォームに関連する要素です。a を乱用しないでください。href 値がわからない場合 (JavaScript 疑似プロトコルや孤独な # なし)、他のタグを使用し、フックを介して js にイベントを追加してください。リンクであり、onclick イベントがある場合は、href 値の整合性を確保するためにプログレッシブエンハンスメントを検討してください。
コードには生命があり、タグの王国は動物園であり、それらに慣れていて、すべてがかわいいです。

<<: MySQL で自動インクリメントシーケンスを実装するためのサンプルコード

>>: Linuxディレクトリ構造の詳細な紹介