0

アンカータグが見出しタグの中にあるリンクがたくさんあるウェブサイトがたくさんあります。例：

<a href="#">
    <h2 style="padding-left: 50px;">
       A hyperlinked heading
    </h2>
</a>

これにより、h2要素（！）のパディングを含め、h2要素の任意の場所をクリックして、ハイパーリンクをトリガーできます。ただし、W3Cに準拠していません（http://validator.w3.org/で確認）

W3Cに準拠するために、インラインタグ（つまりa）内にブロックタグ（つまりh2）を含めることはできません。したがって、修正は、アンカータグを見出しタグ内に配置することです。

<h2 style="padding-left: 50px;">
    <a href="#">
        A hyperlinked heading
    </a>
</h2>

このソリューションの問題は、h2内のテキストをクリックすることによってのみハイパーリンクをトリガーできることですが、実際にはh2要素の任意の場所をクリックできるようにしたいと考えています。

次のように、display：blockをアンカータグに追加できることがわかりました。

<h2 style="padding-left: 50px;">
    <a href="#" style="display: block;">
        A hyperlinked heading
    </a>
</h2>​​​​​​​​​

これにより、h2要素の大部分をクリックしてハイパーリンクをトリガーできるという問題が部分的に解決されますが、h2の埋め込み領域内をクリックしてハイパーリンクをトリガーすることはできません。

問題を強調するJSFiddleはここにあります：http：//jsfiddle.net/84rDG/

h2要素からすべてのCSSを削除し、代わりにh2クラスに追加して、h2タグとh2タグの外観を必要とするアンカータグにh2クラスを適用することが提案されています。ただし、これはあまり良くありません。ほとんどのh2タグをアンカータグに置き換える必要があり、h2要素に基づくSEOを混乱させるからです。

HTML5では、アンカータグで見出しタグを囲むことができるようです。おそらく、多くの人がここで概説したことを達成しようとしているためですが、それまでの間機能するソリューションが必要です。

どんな提案でも大歓迎です！

4

1 に答える 1

1

-要素からパディングを削除し、h2-要素に追加する必要がありaます

CSS:

h2.anchor {
    border: 1px solid red;
    font-size: 40px;
    padding: 0px;
}
h2 > a {
    display: block;
    padding-left: 50px;
}

HTML:

<h2 class="anchor">
    <a href="#">
        A hyperlinked heading
    </a>
</h2>​​​​​​​​​
于 2012-04-18T14:18:50.680 に答える