web-dev-qa-db-ja.com

空のhrefは有効ですか?

Web開発者の1人は、ドロップダウンリストのスタイル設定のプレースホルダーとして次のhtmlを使用します。

<a href="" class="arrow"></a>

これはアンカータグが有効と見なされますか?

Href値がないため、リンクチェッカーレポートの一部で壊れていると表示されます。

161
matthew

この質問はすでに回答済みですが(tl; dr:はい、空のhref値は有効です)、既存の回答はいずれも関連する仕様を参照していません。

空の文字列をURIにすることはできません。ただし、href属性は値としてURIだけでなく、URI参照も取ります。空の文字列はURI参照の場合があります。

HTML 4.01

HTML 4.01 sesRFC 2396、セクション 4.2。同じドキュメントの参照 (大胆な強調鉱山):

URIを含まないURI参照は、現在のドキュメントへの参照です。つまり、ドキュメント内の空のURI参照は、そのドキュメントの開始への参照として解釈され、フラグメント識別子のみを含む参照はその文書の識別されたフラグメントへの参照。

RFC 2396はRFC 3986(現在は IETFのURI標準 )に置き換えられています。これは 本質的に同じことを言います

HTML5

HTML5 sesスペースで囲まれた有効なURLvalid URLW3CのURL仕様は廃止されました。 代わりにWHATWGのURL標準を使用する必要があります(最後のセクションを参照)。

HTML 5.1

HTML 5.1 ses有効なURLがスペースで囲まれている可能性がある有効なURL WHATWGのURL標準(次のセクションを参照)。

WHATWG HTML

WHATWGのHTML sesスペースで囲まれた有効なURL有効なURL文字列 fromWHATWGのURL標準、それは relative-URL-with-fragment string 、少なくとも relative-URL string でなければなりません、 path-relative-scheme-less-URL string 、これは path -relative-URL string これは、スキーム文字列で始まり、その後に:が続き、その定義は(太字強調):

パス相対URL文字列は、zero以上のURLパスセグメント文字列で、U + 002F(/)で区切られている必要があります。 U + 002F(/)で始まっていません。

37
unor

有効です。

ただし、標準的な方法は、href="#"または場合によってはhref="javascript:;"を使用することです。

171
SLaks

他の人が言ったように、それは有効です。

ただし、各アプローチにはいくつかの欠点があります。

href="#"は、ブラウザの履歴に追加のエントリを追加します(たとえば、戻るボタンを押すと迷惑になります)。

href=""はページをリロードします

href="javascript:;"には問題がないようです(面倒で無意味に見えること以外)-誰でも知っていますか?

109
UpTheCreek

特にonclickハンドラーでは、hrefを含めないことが完全に有効なHTMLである可能性がありますが、考慮すべき点がいくつかあります。tabindex値が設定されていないとキーボードフォーカスができません。さらに、IEは、tabindexが設定されているかどうかに関係なく、href属性を持たないアンカー要素がフォーカス不可であるとアクセシビリティインターフェースを通じて報告するため、Internet Explorerを使用してスクリーンリーダーソフトウェアからアクセスできなくなります。

したがって、以下は完全に有効かもしれません:

<a class="arrow">Link content</a>

Null-effect href属性を明示的に追加する方がはるかに良い

<a href="javascript:void(0);" class="arrow">Link content</a>

すべてのユーザーを完全にサポートするには、CSSでクラスを使用して画像をレンダリングする場合、何が起こっているのかをテキストで説明するtitle属性などのテキストコンテンツも含める必要があります。

<a href="javascript:void(0);" class="arrow" title="Go to linked content">Link content</a>
55
Nick

現在の HTML5ドラフト では、href属性を完全に省略することもできます。

A要素にhref属性がない場合、その要素は、リンクが関連していた場合にリンクが配置されるプレースホルダーを表します。

あなたの質問に答えるには:はい、有効です。

26
halfdan

実際、空のままにしておくことができます(W3バリデーターは文句を言いません)。

アイデアをさらに一歩進めて、「=」を省略します。これの利点は、リンクが現在のページへのアンカーとして扱われないことです。

<a href>sth</a>
16
anroots

W3のバリデーターは空のhref属性について文句を言わないかもしれませんが、 現在のHTML5ワーキングドラフト は以下を指定します:

hrefおよびa要素のarea属性には、スペースで囲まれている可能性のある有効なURLの値が必要です。

有効なURLは、 RL標準 に準拠するURLです。これで、URL Standardは頭を悩ますのは少し混乱しますが、URLが空の文字列である可能性があるとは述べていません。

...つまり、空の文字列はではなく有効なURLです。

ただし、HTML5 Working Draftは次のように述べています。

注:hrefおよびa要素のarea属性は必要ありません;これらの要素にhref属性がない場合、ハイパーリンクは作成されません。

これは、単にhref属性を完全に省略することができることを意味します。

<a class="arrow"></a>
9
James Donnelly

注意の言葉:

私の経験では、href属性を省略すると、キーボードナビゲーションがそれを無視し、hrefが存在する場合のようにフォーカスを与えないため、アクセシビリティの問題が発生します。手動で要素をtabindexに含めることは、その回避策です。

8
Jason

それは有効ですが、UpTheCreekが言ったように、「それぞれのアプローチにはいくつかの欠点があります」

タグを介してajaxを呼び出している場合、このようにhref = ""を残すと、ページの再読み込みが維持され、ajaxコードは呼び出されません...

この考えを共有した方がいいだろう

3
Ray Tsai

代わりに<a href="#" class="arrow">を実行してみてください。 (鋭い#文字に注意してください)。

2
elvenbyte