html - ヘッダーの追加または説明の適切な意味表現

Question

フォームにコンテンツがあるとします

<h2>George Epworth</h2>
<h3>Director</h3>
<p>Content Content Content</p>

ここでは h2 の説明部分を h3 として表現しましたが、実際には h2 の一部ですよね? ここでの h3 は単独では存在せず、h2 に依存しています。この要素を定義する最も柔軟な方法を考えようとしています...

Answer 1

HTML 5 では、次のhgroup要素を使用します。

<hgroup>
  <h2>George Epworth</h2>
  <h3>Director</h3>
</hgroup>
<p>Content Content Content</p>

必要に応じて、要素全体をラップし<section>ます。

Answer 2

セマンティクスが関係する場合、ページ全体を調査する必要があります。それなしでは、アプローチを推奨することは困難です。これは私がそれを見る方法です：

H1-H6 をヘッダーの重要度の階層として見ることができます。重要度が「名前」から「役職」に変わるかどうか自問してください。

私の意見では、より正確な表現は定義リスト アプローチです。

<dl>
  <dt>[Name]</dt>
  <dd>[Job Title]</dd>
</dl>

<h2>と要素を追加することもできますが<h3>、データを表現するにはこれらで十分であり、それに応じてスタイルを設定し、<dd>.