<a>（アンカータグ）をhref属性なしで使用できますか？

私はTwitter Bootstrapを使用してサイトを構築してきました。その機能の多くは、<a>JavaScriptを実行するだけの場合でも、でのラップに依存しています。href="#"Bootstrapのドキュメントで推奨されている戦術に問題があったため、別の解決策を見つけようとしました。

ただし、href属性を完全に削除してみました。私はを使用しており<a class='bunch of classes' data-whatever='data'>、残りはJavascriptで処理します。そしてそれは機能します。

それでも、私がこれをしてはいけないことを何かが教えてくれています。正しい？つまり、技術的に<a>は何かへのリンクであることになっていますが、これが問題である理由は完全にはわかりません。またはそれは？

<a>nchor要素は、単にいくつかのコンテンツへまたはからアンカーです。当初、名前付きアンカー（<a name="foo">）およびリンクされたアンカー（）に許可されていたHTML仕様<a href="#foo">。

名前付きアンカー形式はあまり使用されません。これは、フラグメント識別子が[id]属性の指定に使用されるようになったためです（ただし、下位互換性のために属性を指定することはでき[name]ます）。なしの要素属性がまだ有効です。<a>[href]

セマンティクスとスタイルに関する限り、<a>要素は属性を:link持たない限りリンク（）ではありません[href]。これの副次的影響は、デフォルトでは、のない<a>要素[href]がタブの順序にならないことです。

本当の問題は、<a>要素だけがの適切な表現であるかどうか<button>です。意味論的なレベルでは、a linkとaの間には明確な違いがありますbutton。

ボタンは、クリックするとアクションが発生するものです。

リンクは、現在のドキュメントのナビゲーションを変更するボタンです。発生するナビゲーションは、フラグメント識別子の場合はドキュメント内を#foo移動する（）か、URLの場合は新しいドキュメントに移動する（/bar）可能性があります。

リンクは特殊なタイプのボタンであるため、代替機能を実行するためにアクションがオーバーライドされることがよくあります。アンカーをボタンとして使用し続けることは、意味的に正確ではありませんが、一貫性の観点からは問題ありません。

<a>要素（または<span>、または<div>）をボタンとして使用することのセマンティクスとアクセシビリティについて懸念がある場合は、次の属性を追加する必要があります。

<a role="button" tabindex="0" ...>...</a>

ボタンの役割は、特定の要素が、基礎となる要素は持っていたかもしれないものは何でもセマンティクスのためにオーバーライドとしてボタンとして扱われていることをユーザーに伝えます。

<span>および<div>要素については、JavaScriptキーリスナーを追加しSpaceたりEnter、clickイベントをトリガーしたりできます。<a href>and <button>要素はデフォルトでこれを行いますが、非ボタン要素は行いません。clickトリガーを別のキーにバインドする方が理にかなっている場合があります。たとえば、Webアプリの「ヘルプ」ボタンはにバインドされる場合がありますF1。

私はここであなたの答えを見つけることができると思います：href属性のないアンカータグは安全ですか？

また、hrefとのリンク操作を行いたくない場合は、次のように使用できます。

<a href="javascript:void(0);">something</a>

はい、href属性なしでアンカータグを使用することは有効です。

a要素にhref属性がない場合、要素は、要素のコンテンツのみで構成され、関連性がある場合にリンクが配置された可能性のある場所のプレースホルダーを表します。

はい、あなたが使用することができますclassし、他の属性、しかし、あなたが使用することはできませんtarget、download、rel、hreflang、とtype。

target、download、rel、hreflang、およびtypehref属性が存在しない場合の属性が省略されなければなりません。

「私は？」の部分については、最初の引用を参照してください：「関連性があった場合にリンクが配置された可能性がある場所」。それで、「JavaScriptがない場合、このタグをリンクとして使用しますか？」と尋ねます。答えがイエスであれば、そう、あなたがすべき使用<a>せずにhref。いいえの場合は、エッジケースのセマンティクスよりも生産性の方が重要であるため、私はそれを使用しますが、これは私の個人的な意見にすぎません。

さらに、さまざまな動作とスタイル設定（たとえば、下線なし、ポインターカーソルなし、aではない）に注意する必要があります。:link

出典：W3C HTML5勧告

有効です。たとえば、これを使用してモーダル（またはそれに応答する属性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"、カーソルポインタは変化しません。