親ヘッダータグ全体をターゲットとするアンカータグを持つにはどうすればよいですか？

Question

私はアンカータグを見出しタグ内にあるリンク、例えばの多くを持っているウェブサイトの数を持っている：

<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要素のをクリックするとどこでもになります。これは、部分的にそれをトリガーするH2要素のほとんどをクリックして私にできることで問題を克服

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

：アンカータグにブロック、そうのように：

私はディスプレイを追加できることを発見しましたハイパーリンクをクリックしてもハイパーリンクをトリガーすることはできません。問題を強調するために

A JSFiddleがここで見つけることができます：http://jsfiddle.net/84rDG/

私がH2要素からCSSのすべてを削除し、代わりにH2クラスに追加することができますが示唆されている、と私はそれから適用することができますh2タグを任意のh2タグおよびに、h2タグの出現を必要とするアンカータグに割り当てる。しかし、h2タグのほとんどをアンカータグで置き換えなければならないので、h2要素に基づいてどのSEOも動揺するため、これはあまりうまくいかない。

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

どのような提案も大歓迎です！

Answer 1

あなたはh2 -elementから詰め物を削除し、a -element

CSSに追加する必要があります：HTML

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

：

<h2 class="anchor"> 
    <a href="#"> 
     A hyperlinked heading 
    </a> 
</h2>​​​​​​​​​