html - href 属性なし (アンカータグ)の使用は有効ですか?
4 に答える
nchor 要素は、あるコンテンツへの、またはあるコンテンツからの<a>単なるアンカーです。もともと HTML 仕様では、名前付きアンカー ( <a name="foo">) とリンク付きアンカー ( ) が許可されていまし<a href="#foo">た。
フラグメント識別子を使用して属性を指定するようになったため、名前付きアンカー形式はあまり使用され[id]ません (ただし、下位互換性のために属性を指定することはでき[name]ます)。属性の<a>ない要素[href]も有効です。
セマンティクスとスタイリングに関する限り、属性を持たない限り、<a>要素はリンク ( :link) ではありません。[href]これの副作用は、<a>要素[href]がデフォルトでタブ順序にならないことです。
本当の問題は、<a>要素だけが a の適切な表現であるかどうか<button>です。linkセマンティック レベルでは、 aと a の間に明確な違いがありbuttonます。
ボタンは、クリックするとアクションが発生するものです。
リンクは、現在のドキュメントのナビゲーションを変更するボタンです。発生するナビゲーションは、フラグメント識別子の場合はドキュメント内の移動 ( #foo)、URL の場合は新しいドキュメントへの移動 ( /bar) です。
リンクは特別なタイプのボタンであるため、代替機能を実行するためにアクションがオーバーライドされることがよくあります。アンカーをボタンとして使用し続けることは、意味的に正確ではありませんが、一貫性の観点からは問題ありません。
<a>要素 (または<span>、または<div>) をボタンとして使用する場合のセマンティクスとアクセシビリティが気になる場合は、次の属性を追加する必要があります。
<a role="button" tabindex="0" ...>...</a>
ボタンの役割は、特定の要素がボタンとして扱われていることをユーザーに伝えます。
<span>および<div>要素の場合、イベントをトリガーするための JavaScript キー リスナーを追加することがSpaceできますEnter。and要素はデフォルトでこれを行いますが、ボタン以外の要素はそうしません。トリガーを別のキーにバインドする方が理にかなっている場合があります。たとえば、Web アプリの「ヘルプ」ボタンは にバインドされている可能性があります。click<a href><button>clickF1
ここで答えを見つけることができると思います: Is an anchor tag without the href attribute safe?
また、 href でリンク操作を行いたくない場合は、次のように使用できます。
<a href="javascript:void(0);">something</a>
hrefはい、属性なしでアンカータグを使用することは有効です。
a要素に属性がない場合、要素はhref、リンクが配置されていた可能性のある場所のプレースホルダーを表し、関連性がある場合は、要素のコンテンツのみで構成されます。
はい、classおよびその他の属性を使用できますが、、、、およびは使用できませんtargetdownloadrelhreflangtype。
href 属性が存在しない場合は、、、、、および属性を省略する必要があり
targetます。downloadrelhreflangtype
「すべきか?」の部分については、最初の引用を参照してください: 「関連性がある場合、別の方法でリンクが配置されていた可能性がある場所」. だから私は、「JavaScript がなかったら、このタグをリンクとして使用しますか?」と尋ねます。答えが「はい」の場合は、 「はい」を使用せずに使用する必要があります。そうでない場合でも、エッジケースのセマンティクスよりも生産性の方が重要であるため、引き続き使用しますが、これは私の個人的な意見です。<a>href
さらに、さまざまな動作とスタイルに注意する必要があります(たとえば、下線がない、ポインター カーソルがない、.: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ではなくタグとして適した font-awesome アイコンを使用しています。buttonまた、設定role="button"するとポインタがアクションタイプに変わります。hrefまたはがなければrole="button"、カーソルポインタは変化しません。