web-dev-qa-db-ja.com

href属性のないアンカータグは安全ですか？

href属性を含めずにアンカータグを使用し、代わりにJavaScriptクリックイベントハンドラーを使用しても大丈夫ですか？そのため、hrefを完全に省略し、空にしない（href=""）こともありません。

htmlhyperlinkstandardsanchor
216
john

HTML5では、a属性なしでhref要素を使用することが有効です。 「プレースホルダーハイパーリンク」と見なされます。

例：

<a>previous</a>

W3cアンカータグリファレンスページで「プレースホルダーハイパーリンク」を探します。 https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element 。

また、こちらのウィキにも記載されています： https://www.w3.org/wiki/Elements/a

プレースホルダーリンクは、アンカー要素を使用したいが、どこにも移動しないようにする場合に使用します。これは、ナビゲーションメニューまたはパンくずリストで現在のページをマークアップするのに便利です。 （古いアプローチは、「active」または「current」という名前のクラスでspanタグまたはアンカータグを使用してスタイルを設定し、JavaScriptでナビゲーションをキャンセルすることでした。）

プレースホルダーリンクは、実行時にJavaScriptを介してリンクのリンク先を動的に設定する場合にも役立ちます。 href属性の値を設定するだけで、アンカータグがクリック可能になります。

こちらもご覧ください：

201
dthrasher

大丈夫ですが、同時に一部のブラウザが遅くなる可能性があります。

http://webdesignfan.com/yslow-tutorial-part-2-of-3-reducing-server-calls/

私のアドバイスは、<a href="#"> </a>を使用することです

JQueryを使用している場合は、以下も使用することを忘れないでください。

.click(function(event){
    event.preventDefault();
    // Click code here...
});
34
Gunnar Hoffman

短い答え：いいえ。

長い答え：

まず、href属性がないと、リンクになりません。リンクでない場合、キーボード（またはブレススイッチ、またはその他のポインターベースではないさまざまな入力デバイス）にアクセスできません（普遍的にサポートされていないtabindexのHTML 5機能を使用しない限り）。コントロールがキーボードにアクセスできないことが適切であることは非常にまれです。

第二に。 JavaScriptが実行されない場合（サーバーからの読み込みが遅い、インターネット接続が切断された（移動中の電車のモバイル信号など）、JSがオフになっているなど）ための代替手段が必要です。

プログレッシブエンハンスメント を nobtrusive JS。 で利用する

24
Quentin

後方互換性のためにhrefを使用する必要がある場合は、使用することもできます

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

＃の代わりに、属性を使用したくない場合

16
Rasive

このタグは、href属性なしで使用しても問題ありません。ここでの回答の多くとは反対に、実際には、hrefがないときにアンカーを作成する標準的な理由があります。意味的に、「a」はアンカーまたはリンクを意味します。その意味に続く何かにそれを使用するなら、あなたは大丈夫です。

Hrefなしのaタグの標準的な使用法の1つは、名前付きリンクを作成することです。これにより、name = blahのアンカーを使用でき、後でhref =＃blahのアンカーを作成して現在のページの名前付きセクションにリンクできます。ただし、同じ方法でIDを使用することもできるため、これは廃止されました。例として、id = headerでヘッダータグを使用し、後でhref =＃headerを指すアンカーを持つことができます。

ただし、私のポイントは、nameプロパティの使用を提案することではありません。 hrefを必要としないユースケースを1つだけ提供し、それがなぜ必要でないのかを説明するためにのみ。

12
monokrome

Hrefのないアクセシビリティの観点から<a>はタブ対応ではないため、すべてのリンクはタブ対応である必要があるため、hrefがない場合はtabindex = '0 "を追加します。

8
user3862605

「href」のない<a>タグは、マルチレベルメニューを使用するときに便利です。次のレベルを展開する必要がありますが、そのメニューラベルをアクティブリンクにしたくない場合。そのように使用しても問題はありません。

7
Jon

私はこの仕事をすることができました：

<a id="dumb-button" href="#" onclick="return false;">Link</a>

クリックを無視します。次に、jQueryを使用して「ダムボタン」クリックをキャッチし、コードをトリガーします（一部のdivを非表示にする/ divを表示する）。

0
Ron Richardson

一部のブラウザでは、hrefタグを指定しないと問題が発生します。次のようなコードを書くことをお勧めします。

<a href="#" onclick="yourcode();return false;">Link</a>

yourcode（）を独自の関数またはロジックで置き換えることができますが、return falseを追加することを忘れないでください。最後のステートメント。

0
shashwat13