両方が機能しているように見えるので、どちらを使用するかを決めるのが難しいです。
リンクを配置する必要があります<a>
の中に <h2>
要素?
またはその逆ですか?
正しい基準は何ですか?
HTML5を使用している場合、<h2>
要素内に<a>
要素のみを配置できます。これにより、 が<a>
要素内の他の要素を許可します 。以前の仕様(または現在の仕様)でこれを許可することはありませんでした。
これを行う通常の方法は、<a>
を<h2>
内に配置することです。これは機能し、常に機能しており、リンクがその見出しのテキストを参照しているため、HTML5より前の見出しリンクに対して行う唯一の有効な方法です。 <h2>
が全体としてハイパーリンクとして機能するより複雑な構造の一部でない限り、<a>
内に<h2>
を配置する必要はほとんどありません。
また、同じように機能しないため、大きな違いが1つあります。
<h2>
into <a>
見出しのブロック全体(行など)はリンクのように機能します。
ただし、<a>
into <h2>
、可視テキストのみがリンクとして機能します。 (カーソルを変更してテストできます)
<h2>
はブロックレベルであり、<a>
はそうではないため、<h2>
は<a>
を含むことができますが、その逆はできません。
<a>
タグ内にあるものを許可します私はこれを持っています...
<header>
<a href="/home">
<h1>Main heading</h1>
<h2>Sub heading</h2>
</a>
</header>
そしてそれは私のために働いています。
小見出しを含む見出しテキスト全体は、必要に応じてクリック可能です。 html 5でこれを行うより良い方法がわかりません。
答えは、それが依存するということです...
W3C Webサイト、より具体的には HTML5セマンティクスページ から、h2要素(他のすべての見出しタグと同様)がコンテンツモデルとして「コンテンツのフレーズ化」を持っていることは明らかです。
Phrasing content link の後に、次の説明が表示されます。
フレージングコンテンツは、ドキュメントのテキストであり、段落内レベルでそのテキストをマークアップする要素です。段落からのフレージングコンテンツの実行。
次のリストには、フレージングコンテンツが含まれています。
a (if it contains only phrasing content)
したがって、a
タグにフレージングコンテンツのみが含まれる場合、HTML5ではh2
タグ内に含めることができます。
Viceversa、- テキストレベルセマンティクスページ は、次のようにa
要素コンテンツモデルを説明します。
透過的ですが、インタラクティブなコンテンツの子孫があってはなりません。
透明リンク に続いて、説明の最後に以下が見つかります。
透明な要素に親がない場合、そのコンテンツモデルの「透明」な部分は、フローコンテンツを受け入れるものとして処理する必要があります。
h2
タグの説明 では次のように記述されているため:
この要素を使用できるコンテキスト:フローコンテンツが予想される場所。
h2
タグはフローコンテンツと見なされる場合があります。
したがって、a
タグに親がない場合、HTML5では、h2タグを含むフローコンテンツを受け入れるものとして扱う必要があります。
W3C h2の仕様 は、許可された親要素は、フロー要素またはhgroupを含むことができるものであると言います。 aの仕様 は、フレージングまたはフロー要素を含むことができる親要素を許可します。 h2にはフレージングコンテンツを含めることができ、aにはフレージングコンテンツまたはフローコンテンツを含めることができるため、仕様に基づいてどちらかが許可されているようです。
セマンティクスタグを含めたので、どの 'seems'にも興味があると思います。私の側では、アンカーが見出しと他のコンテンツにまたがるタイミングを考えることはできませんが、ヘッダーにアンカーと他のコンテンツを含める必要がある場合は何度も考えることができるため、内部のh2は行くのに最適なルート。