web-dev-qa-db-ja.com

アンカー内のスパンまたはスパン内のアンカー、または重要ではありませんか？

spanおよびaタグをネストしたい。したほうがいい

  1. <span>の中に<a>を入れてください
  2. <a>の中に<span>を入れてください
  3. どうでもいい？
htmlcsssemantic-markup
100
user214582

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

ただし、タグのコンテンツのpartのみの場合は、<span>内でのみ<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>
106
Jon Hadley

<span>を<a>内に、または<a>を<span>内にネストすることは（少なくともHTML 4.01およびXHTML 1.0標準では）完全に有効です。

自分自身でそれを証明するために、いつでもチェックアウトできます W3C MarkUp Validation Service

検証してみました：

<!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>内にあります

つまり.

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

hTML 4.01とXHTML 1.0の両方のdoctypeを使用し、両方とも検証に成功しました！

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

32
CraigTP

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

19
Greg

それはあなたがマークアップしたいものに依存します。

  • スパン内にリンクが必要な場合は、<a>を<span>内に配置します。
  • リンク内の何かをマークアップする場合は、<span>を<a>に入れます
16
knittl

SPANはGENERICインラインコンテナです。 aがspan内にあるか、spanがa内にあるかは問題ではありません。両方ともインライン要素です。あなたにとって論理的に正しいと思われることなら何でもしてください。

16
Salman A

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

2
sykora

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

1
Xopa

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

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

通常、Aの内部にスパンを配置しますが、スタイリングはそれをラウンドにスワップするまで有効になりませんでした。

1
user1368737

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

0
Toby

両方とも機能しますが、個人的には、オプション2の方が望ましいので、スパンはリンクの「周囲」にあります。

0
Oldskool