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

リンク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ディレクトリ構造の詳細な紹介

推薦する

Nginx/Httpd ロードバランシング Tomcat 設定チュートリアル

前回のブログでは、Nginx と httpd を使用して、逆生成用のバックエンド Tomcat サー...

TomcatはNginxリバースプロキシのクライアントドメイン名を取得します

質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...

アコーディオン効果を実現するネイティブ js

実際のWebページ開発でも、アコーディオンは頻繁に登場します。簡単なアコーディオンを作ったのですが、...

MySQL の永続性とロールバックの原理を 1 つの記事で理解する

目次再実行ログディスクデータを直接更新するのではなく、最初にメモリデータを更新する必要があるのはなぜ...

MySQL の自動増分主キーが使い果たされた場合の対処方法

面接では、次のようなシナリオを経験する必要があります。インタビュアー: 「MySQL を使用したこと...

MySQL の null 制約のケースの説明

目次テーブルを作成するときにNOT NULL制約を設定するテーブルを変更するときに非NULL制約を追...

ウェブページのメモリ使用量とCPU使用量を削減する方法

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

Docker での Redis の最も詳細なインストールと構成 (画像とテキスト付き)

1. Dockerに適したRedisのバージョンを見つけるdocker hubで見つけることができ...

Linux システムでのスケジュールされたタスクの紹介

目次1. 計画タスクをカスタマイズする2. 時間を同期する3. 練習する4. セキュリティの問題1....

MySQL 8.0.24 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.24のインストールチュートリアルを参考までに紹介します。具体的な内...

MySQL btree インデックスとハッシュ インデックスの違い

MySQL では、ほとんどのインデックス (PRIMARY KEY、UNIQUE、INDEX、FUL...

mysql は sql ファイルを実行し、エラーを報告します エラー: 不明なストレージ エンジン 'InnoDB' ソリューション

問題を見つける最近、仕事で問題が発生しました。InnoDB タイプの SQL ファイルを実行すると、...

列名を知らなくてもMySQLインジェクションを詳細に解説

序文最近、穴を掘ってスペースを作っているだけなので、心が空っぽになっているように感じます。テクノロジ...

Dockerを使用してクローンリポジトリを使用してGitイメージを構築する

概要私は 1 年以上 Docker を使用しています。最近、サービスをすばやくオーケストレーションし...

ボタンの 4 つのクリック応答方法の概要

ボタンは頻繁に使用されます。ここでは、イベント処理メソッドを整理し、実装方法が多数あることを発見しま...