web-dev-qa-db-ja.com

Web標準でリンク（<a>タグ）と見出し（<h1>タグ）を混在させる方法は？

Web標準に従って見出し1のリンクを作成する正しいコードは何ですか？

それは...ですか

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

または

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

ありがとう

htmlweb-standards
91
ahmed

Web標準によると、ブロック要素をインライン要素に入れることは許可されていません。

h1はブロック要素であり、aはインライン要素であるため、正しい方法は次のとおりです。

<h1><a href="#">This is a title</a></h1>

詳細については、リンクをご覧ください。 w3ビジュアルフォーマットモデル

ただし、HTML5では、アンカータグでブロックレベルの要素（div、pまたはh*など）をラップすることが有効であるという例外があります。アンカー以外のインライン要素にブロックレベルの要素をラップすることは、依然として標準に反します。

137
Darko Z

HTML5はこの主題を更新します：別の質問で述べられているように、ブロックレベルの要素をAでラップしても問題ありません： https://stackoverflow.com/a/9782054/674965 そしてここ： http://davidwalsh.name/html5-elements-links

44
f055

私が理解している限り、HTML5ではリンクタグでブロックレベルの要素をラップできます。ただし、古いブラウザではバグが発生する場合があります。 Firefox 3.6.18でこれに遭遇し、moz-rs-heading = ""がコードに挿入されました。したがって、私のスタイルが壊れました。回避策が必要な場合は、リンクタグをdivでラップできます。以下は、追加コードが機能する理由のより良い説明を提供します http://oli.jp/2009/html5-block-level-links/

2
Kip Deeds