h1,h2,h3,h4,h5,h6要素

見出しを表します。h1が最も重要な見出し、そしてh2〜h6までとあり、数字の順番に従って階層となるようにする必要があります。特にh1はページの一番重要な見出し（タイトル）を表す要素となり、SEO上も重要な意味を持ちます。文法上は複数のh1を使っても問題ありませんが、SEOとしては1ページにつき1つの形がオススメです。

サンプルコード

<article>
	<header>
		<h1>コーヒーの淹れ方</h1>
		<p><time datetime="2016-01-20">2016年1月20日</time></p>
	</header>
	<section>
		<h2>ペーパードリップ</h2>
		<p>インスタントコーヒーと合わせて、広く親しまれている淹れ方です。</p>
		<h3>ドリッパー</h3>
		<p>フィルターをセットするための容器。口の形にも様々な種類があります。</p>
		<h3>ペーパーフィルター</h3>
		<p>挽いた豆を入れるフィルター。<br>豆にあった紙を選ぶことで、より一層香りが引き立たせることができます。</p>
	</section>
</article>

カテゴリー

フローコンテンツ、ヘディングコンテンツ、パルパブルコンテンツ
コンテンツモデル

フレージングコンテンツ
使用ケース

フローコンテンツが期待される場所

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

ブログの記事ページを想定したサンプルコード

次のHTMLは「コーヒーの淹れ方」をテーマにした記事でのh1〜h5要素の使用例です。

<main>
	<article>
		<header>
			<h1>コーヒーの淹れ方について</h1>
			<p><b class="lead">多くの方に親しまれているコーヒー。お仕事に、休日のひと時に、目覚めの一杯など様々な場面で飲む機会があります。<br>今回は、そんなコーヒーをより楽しむための美味しい入れ方をご紹介します。</b></p>
		</header>
		<section>
			<h2>フレンチプレス</h2>
			<p>金属のフィルターで濾すフレンチプレスは、コーヒーの油分まで余すことなく抽出できるため、コーヒーの素材本来の美味しさをお楽しみいただけます。</p>
			<h3>手順1</h3>
			<p>容器に挽いた豆を入れ、そこへ半分ほど熱湯を入れます。</p>
			<h3>手順2</h3>
			<p>30秒後に、さらに熱湯を容器の9分目まで入れてください。<br>その後、3〜4分間待ちます。</p>
			<aside>
				<h4>ポイント！</h4>
				<p>お湯を入れる際に注意したポイントをご紹介します。</p>
				<h5>一箇所にバーッと入れるよりも、グルグルと円を描くイメージで入れる</h5>
				<p>こうすることで、全体に万遍なく水を行き渡らせることができ、斑が減ります。</p>
			</aside>
		</section>
	</article>
</main>

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。