href属性なしで<a>（アンカータグ）を使用するのは有効ですか？
Twitter Bootstrapを使用してサイトを構築してきましたが、その機能の多くは、Javascriptを実行するだけでも、<a>でラッピングすることに依存しています。 Bootstrapのドキュメントが推奨するhref="#"戦術に問題があったため、別の解決策を探していました。
しかし、その後href属性を完全に削除しようとしました。私は<a class='bunch of classes' data-whatever='data'>を使用しており、残りをJavascriptで処理しています。そしてそれは動作します。
しかし、これは私がこれを行うべきではないということです。右？つまり、技術的に<a>は何かへのリンクであるはずですが、完全にはわかりません理由これは問題です。またはそれは？
<a>nchor要素は、コンテンツへの、またはコンテンツからの単なるアンカーです。当初、HTML仕様では、名前付きアンカー（<a name="foo">）およびリンクされたアンカー（<a href="#foo">）が許可されていました。
名前付きアンカー形式はあまり使われていません。フラグメント識別子を使用して[id]属性を指定するようになったためです（下位互換性のために、[name]属性を指定することもできます）。 <a>属性のない[href]要素は引き続き有効です 。
セマンティクスとスタイリングに関する限り、<a>要素は、:link属性を持たない限り、リンク（[href]）ではありません。これの副作用は、<a>なしの[href]要素がデフォルトでタブ順序にならないことです。
本当の問題は、<a>要素だけが<button>の適切な表現であるかどうかです。セマンティックレベルでは、linkとbuttonには明確な違いがあります。
ボタンは、クリックするとアクションが発生するものです。
リンクは、現在のドキュメントのナビゲーションを変更するボタンです。発生するナビゲーションは、フラグメント識別子（#foo）の場合はドキュメント内を移動することも、URL（/bar）の場合は新しいドキュメントに移動することもできます。
リンクは特別なタイプのボタンであるため、多くの場合、代替機能を実行するためにアクションがオーバーライドされます。アンカーをボタンとして使用し続けることは一貫性の観点からは問題ありませんが、意味的には正確ではありません。
ボタンとして<a>要素（または<span>、または<div>）を使用することのセマンティクスとアクセシビリティが心配な場合は、次の属性を追加する必要があります。
<a role="button" tabindex="0" ...>...</a>
ボタンの役割 は、特定の要素がボタンとして扱われていることを、基礎となる要素のセマンティクスのオーバーライドとしてユーザーに伝えます。
<span>および<div>要素の場合、JavaScriptキーリスナーを追加することができます。 Space または Enter clickイベントをトリガーします。 <a href>および<button>要素はデフォルトでこれを行いますが、非ボタン要素は行いません。 clickトリガーを別のキーにバインドする方が理にかなっている場合があります。たとえば、Webアプリの「ヘルプ」ボタンは、 F1。
あなたの答えはここで見つけることができると思います： href属性のないアンカータグは安全ですか？
また、hrefを使用してリンク操作を行わない場合は、次のように使用できます。
<a href="javascript:void(0);">something</a>
はい、href属性なしでアンカータグを使用することは有効です。
a要素にhref属性がない場合、その要素は、関連する場合は要素のコンテンツのみで構成されるリンクが配置されるプレースホルダーを表します。
はい、classおよび他の属性を使用できますが、target、download、rel、hreflang、およびtypeは使用できません。
Href属性が存在しない場合は、
target、download、rel、hreflang、およびtype属性を省略する必要があります。
"Should I？"の部分については、最初の引用を参照してください： "リンクがなければ、関連する場合はリンクが配置される可能性があります"。そこで、「JavaScriptがない場合、このタグをリンクとして使用しますか？」と尋ねます。答えがyesの場合、yes、hrefなしで<a>を使用する必要があります。 「いいえ」の場合、Edgeケースのセマンティクスよりも生産性が私にとって重要であるため、それを引き続き使用しますが、これは単なる個人的な意見です。
さらに、気をつけてください-異なる 動作 と スタイリング （例：下線なし、ポインターなし）カーソル、:linkではありません）。
有効です。たとえば、モーダル（またはdata-toggleおよびdata-target属性に応答する同様のもの）を表示するために使用できます。
何かのようなもの：
<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>
ここでは、モーダルを表示するために、aよりもbuttonタグとして優れているfont-awesomeアイコンを使用します。また、role="button"を設定すると、ポインターがアクションタイプに変更されます。 hrefまたはrole="button"がなければ、カーソルポインターは変わりません。