web-dev-qa-db-ja.com

どちらが正しいか：<h1> <a> ... </a> </ h1> OR <a> <h1> ... </ h1> </a>

<h1><a ...> ... </a></h1>と<a ...><h1> ... </h1></a>の両方が有効なHTMLですか、それとも正しいのですか？両方とも正しい場合、意味は異なりますか？

htmlsemantics
154
knokio

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

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

歴史的には、インライン要素内にブロック要素を配置することはできませんでしたが、これはHTML5には当てはまりません。ただし、<h1><a>..</a></h1>のアプローチはより一般的だと思います。

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

140
Marco

HTML 5以前では、これ

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

検証しません。 HTML 5で使用できますが、これは次のように使用します。

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

<a>内に<h1>以上を追加する必要がない限り

23
vaidas

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

8
pleasedontbelong

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

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

enter image description here

これは、要素をスタイルする場合、たとえばリンクの背景色を設定すると、効果は同様に異なります。

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

見出しの見出しまたはテキストをリンクにする理由はほとんどありません。 （ほとんど非論理的で使い勝手が悪いです。）しかし、見出し（または見出し内のテキスト）を潜在destinationにすると、同様の質問がしばしば発生しますたとえば、リンク<h2><a name=foo>...</a></h2>対<a name=foo><h2>...</h2></a>。同様の考慮事項がこれに適用されます（両方の作業、後者はa要素をブロックにするため、違いがあるかもしれません。HTML5より前は、前者のみが正式に許可されています）。しかし、さらに、両方の方法は時代遅れであり、見出し要素で直接id属性を使用することが推奨されています：<h2 id=foo>...</h2>。

7
Jukka K. Korpela

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

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

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

また、スタイル階層の違いがあります。 <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;}
1
Vim Bonsu

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

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

1
knittl