見出し（使い方）

コンポーネント要素

• ショルダー
• 見出しテキスト（必須）
• サブタイトル
• リードアイコン
• チップ
• 飾り罫

仕様

• 見出しは、HTMLにおける<h1>要素から<h6>要素に対応します。レベル1見出しからレベル6見出しを使ってページの内容を構造化します。
• 見出しは階層が深くなるごとにレベルの数が増えていきます。たとえば章がレベル1、節がレベル2、項がレベル3となり、レベル6の階層まで用意されています。
• あるレベルの見出しから始まり、次に同じまたは上位の見出しレベルが出現するまでがひとつのセクションです。
  • セクション中に登場する下位の見出しは、サブセクションを形成します。
  • セクションの階層は、6階層まで形成することができます。

見出しによる構造化

• title要素に相当するページの主題を、レベル1見出しにしてください。
  • たとえば「<title>ページの主題｜サイト名</title>」である時、「<h1>ページの主題</h1>」となります。
• レベル2見出し以降は、セクションの主題となるものを記述してください。
  • セクションごとに見出しがあると、ページ全体のコンテンツ構造を明確にし、理解を助ける「取っ掛かり」になります。
  • 原文に見出しが存在しない場合は除きます。

文字サイズとスタイル

• 見出しレベルの大小と、フォントサイズの大小はそれぞれ別々に定義します。スタイルガイドで見出しレベルとフォントサイズの対応関係を定義してください。
• リードアイコンを付与することができます。リードアイコンは見出しの左側に表示され、見出しの内容を視覚的に補足します。
• チップを付与することができます。チップは見出しの左側に表示され、視覚的なアクセントを加えます。
• 飾り罫を付与することができます。飾り罫は見出しの下に表示され、セクションの開始を強調します。

ショルダーとサブタイトル

見出しに対する補足情報がある場合に使用します。<p>要素として記述し、<hgroup>要素で当該の見出しとグループ化します。ショルダーやサブタイトルを<h1>〜<h6>要素にしないように注意してください。