どちらが正しいですか：<h1> <a>…</a> </ h1> OR <a> <h1>…</ h1> </a>

両方ある<h1><a ...> ... </a></h1>と<a ...><h1> ... </h1></a>有効なHTML、または一方のみが正しいのですか？両方が正しい場合、意味が異なりますか？

どちらのバージョンも正しいです。それらの間の最大の違い<h1><a>..</a></h1>は、タイトルのテキストのみの場合にクリック可能になるということです。

の<a>周りに配置<h1>し、css displayプロパティがblock（デフォルトでは）である場合、ブロック全体（の高さ<h1>およびコンテナが<h1>存在するコンテナの幅の100％）をクリックできます。

従来、インライン要素の内部にブロック要素を配置することはできませんでしたが、これはHTML5には当てはまりません。とは<h1><a>..</a></h1>いえ、このアプローチはもっと慣習的だと思います。

ヘッダーにアンカーを配置<a id="my-anchor"><h1>..</h1></a>する場合は、idまたはname属性を次のように使用するよりも良い方法です：<h1 id="my-anchor">..</h1>または<h1 name="my-anchor">..</h1>

HTML 5以前では、これは

<a><h1>..</h1></a>

検証しません。HTML 5で使用できますが、私はこれを使用します。

<h1><a>..</a></h1>

<a>内に<h1>より多くを追加する必要がない限り

<a><h1></h1></a>W3Cは有効ではありません...基本的に、インライン要素内にブロック要素を置くことはできません

<h1><a>..</a></h1>また<a><h1>..</h1></a>、スタイルシートがレンダリングに影響しない場合は、常にほぼ同じように動作します。ほぼ、しかし完全ではありません。タブキーを使用して移動するか、リンクにフォーカスすると、ほとんどのブラウザでリンクの周りに「フォーカス長方形」が表示されます。の場合<h1><a>..</a></h1>、この長方形はリンクテキストのみを囲んでいます。の場合<a><h1>..</h1></a>、マークアップによってa要素がレンダリングのブロック要素になり、デフォルトで幅が100％になるため、長方形は使用可能な水平方向のスペースを横切って広がります。

以下は、フォーカス<a href=foo><h1>link</h1></a>がChromeによってどのようにレンダリングされるかを示しています。

これは、たとえばリンクの背景色を設定するなどして要素のスタイルを設定すると、効果が同様に異なることを意味します。

歴史的に<a><h1>..</h1></a>は、HTML 2.0では無効であると宣言され、その後のHTML仕様も同様に続きましたが、HTML5はこれを変更し、有効であると宣言しています。正式な定義はブラウザに影響を与えず、バリデータのみに影響を与えました。ただし、一部のユーザーエージェント（通常のブラウザーではないが、特殊なHTMLレンダラー、データエクストラクター、コンバーターなど）<a><h1>..</h1></a>は、仕様で許可されていないため、適切に処理でき ない可能性があります。

見出しや見出しのテキストをリンクにすることには、めったにない理由があります。（それはほとんど非論理的で使い勝手が悪いためです。）しかし、たとえばvs を使用して、見出し（または見出しのテキスト）をリンクの潜在的な宛先にすると、同様の質問がしばしば発生します。同様の考慮事項がこれに適用されます（どちらの作業でも、後者は要素をブロックにするため、違いがある可能性があります。HTML5以前では、前者のみが正式に許可されています）。ただし、それに加えて、どちらの方法も古くなっており、heading要素で属性を直接使用することが推奨されています。<h2><a name=foo>...</a></h2><a name=foo><h2>...</h2></a>aid<h2 id=foo>...</h2>

H1要素はブロックレベルの要素であり、アンカーはインライン要素です。ブロックレベル要素内にインライン要素を含めることはできますが、その逆はできません。ボックスモデルとHTML仕様を考えると、これは理にかなっています。

結論として、最良の方法は次のとおりです。

<h1><a href="#">Link</a></h1>

ハイパーリンク<a href="…">/ を使用a:linkしますか、それとも見出しにアンカーを追加しますか？アンカーを追加したい場合は、単にidを割り当てることができます<h1 id="heading">。次に、それをとしてリンクできますpage.htm#heading。

見出しをクリック可能（リンク）にしたい場合は、最初に<h1><a></a></h1>/ h1 > a– blocklevel要素を使用し、内部にインライン要素を使用します

また、スタイルの階層にも違いがあります。として持っている場合<h1><a href="#">Heading here</a></h1>、アンカーのスタイルはh1要素のスタイルを無効にします。例：

a {color:red;font-size:30px;line-height:30px;}

オーバールール

h1 {color:blue;font-size:40px;line-height:40px;}