アンカーの内側のスパンまたはスパンの内側のアンカーか、それとも関係ありませんか？

109

私はネストするspanとaタグ。したほうがいい

置く内部<a>
置く<a>内部
それは関係ありませんか？

html css semantic-markup

— サルマンA
ソース

110

3-それは問題ではありません。

しかし、私はそれがタグのコンテンツの一部だけのためである場合にのみ、内部を使用する傾向があります。<a>

<a href="#">some <span class="red">text</span></a>

のではなく：

<a href="#"><span class="red">some text</span></a>

これは明らかに次のとおりです。

<a href="#" class="red">some text</a>

— ジョン・ハドリー
ソース

1

私は最近、text-overflow：ellipsisおよびoverflow：hiddenの空白の問題に遭遇しました。これは、インラインブロック要素をナビゲーションボタンに追加することで解決できます。<a> テキスト </a>で終わりました。だから私は思う（または希望する;））本当に必要なときにこれを行うのは大丈夫だと思います。

— CunningFatalist 2014

それは重要なので、私はオプション2に行きます。アンカーは、要素を固定するためのものであり、要素を含めるためのものではありません（ベストプラクティス）。クリック可能なタイルを作成し、アンカーがタイルコンポーネントの親要素であり、コンポーネント内に画像へのリンクがあり、さらに多くの画像がある状況を想像してみてください。グーグルクローラーは狂ってしまい、最終的にはそれはあなたのサイトには良くありません。

— イマームバクス

33

それは、（HTML 4.01やXHTML 1.0の基準で少なくとも）巣に完全に有効であるのいずれかの内部<a>または<a>内部。

自分で証明するためだけに、W3C MarkUp検証サービスをいつでも確認できます。

私は検証を試みました：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

また、上記と同じですが、 <a>内部

すなわち

<span><a href="http://www.google.com">Google</a></span>

HTML 4.01とXHTML 1.0の両方のdoctypeを使用し、どちらも検証に合格しました。

注意すべきことは、タグを正しい順序で閉じることです。したがって、次にで始まる場合は<a>、必ず<a>タグを閉じてからを閉じてください。逆の場合も同様です。

— CraigTP
ソース

20

それは問題ではありません-両方がお互いの中に許可されています。

— グレッグ
ソース

ただし、<a>はブロックレベルであり、はインラインレベル要素であり、ブロックレベル要素はインライン要素内に配置できません。それはw3c検証であったと思います

— Vyas

26

いいえ、インラインである、両方

— グレッグ

16

マークアップする対象によって異なります。

スパン内にリンクが必要な場合は、中に入れ<a>ます。
あなたがリンクで何かをマークアップしたい場合は、入れに<a>

— ニット
ソース

16

SPANはGENERICインラインコンテナです。どちらもインライン要素であるため、aが内部にあるspanか内部にあるかspanは関係ありませんa。論理的に正しいと思われることは何でも自由に行ってください。

— サルマンA
ソース

2

スパンの目的によって異なります。リンクであるという事実ではなく、リンクのテキストを参照する場合は、＃1を選択します。スパンがリンク全体を参照している場合は、＃2を選択します。スパンの意味を説明しない限り、それ以上の答えはありません。どちらもインライン要素であり、構文的に入れ子にすることができます。

— シコラ
ソース

正解です。どちらもインライン要素です。

— クリス

2

たとえば、並べ替えアイコンのフォントを使用している場合は問題になります。私はちょうどこれを今持っていました：

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

通常、私はスパンをA内に配置しますが、スタイリングはそれを交換するまで有効になりませんでした。

— ユーザー1368737
ソース

1

個人的には、Web開発者として、リンクテキストのセクションを強調表示する場合（1つのセクションに背景を適用する場合など）にのみ、アンカータグ内にスパンを挿入します。

— Xopa
ソース

0

どちらでも機能しますが、個人的にはオプション2を使用したいので、スパンはリンクの「周囲」にあります。

— Oldskool
ソース

0

意味的には、単一の要素のコンテナであるほど意味があり、それらをネストする必要がある場合、要素よりも外側の要素の内側にあることが示唆されます。

— トビー
ソース