[解決済み] Which is more correct: <h1><a>...</a></h1> OR <a><h1>...</h1></a>

Question

Are both <h1><a ...> ... </a></h1> and <a ...><h1> ... </h1></a> valid HTML, or is only one correct? If they are both correct, do they differ in meaning?

How to solved?

Both versions are correct. The biggest difference between them is that in the case of <h1><a>..</a></h1> only the text in the title will be clickable.

If you put the <a> around the <h1> and the css display property is block (which it is by default) the entire block (the height of the <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>