最終更新このページの目次sectionタグの使い方まとまりを作る最も汎用的なタグ見出しを含めると良いsectionは複数回使用できる🙅マークアップの都合でsectionを使わない🙅装飾を目的にsectionを使わないarticleとsectionの使い分け方<section>セクションタグはその名の通り、HTML文書の中で1つのセクションを表現するために使用します。表現すると、1つの内容のまとまりを作るために使います。セクショニングの一例。</section></article>👆例えば、1つのブログ記事の中で、いくつかの小さいテーマに分けられる場合、それぞれのテーマのまとまりを<section>タグで囲むと良いでしょう。sectionタグの使い方まとまりを作る最も汎用的なタグ<header>や<nav>、<aside>など、まとまりを作るためのHTMLタグ(セクショニングのためのタグ)は他にも存在します。<header>で作られたまとまりは「ヘッダー」を表します。<nav>で作られたまとまりは「ナビゲーション」を表します。<aside>で作られたまとまりは「補足的な情報」を表します。<section>には、そのような意味づけを持たせる役割はありません。「このまとまりは、ヘッダーでもフッターでもないし、ナビゲーションでもない...」というように他に使えるセクショニング・タグが見つからない場合に<section>を使用します。</section></article>👆研究論文であれば、たとえば以下のようにまとまりを作ります。論文全体は、1つの記事として<article>のまとまりにタイトルや日付などの情報は、ヘッダー(<header>)のまとまりに目次は、ナビゲーション(<nav>)のまとまりに概要や、本文などは(<section>)のまとまりに見出しを含めると良いルールではありませんが、見出しを使うことで、そのセクション(まとまり)の主題が明確になります。HTML逆に言えば、見出しが使えない場合「セクションを使うべき内容ではない」もしくは「セクションの区切り方が適切ではない」のかもしれません。😺<section>の開始タグの直後に見出しを配置するのが理想的です。sectionは複数回使用できる<section>は(必要であれば)1つのHTML文書の中で複数回使用できます。🙅マークアップの都合でsectionを使わないたとえば「<div>が増えてきたからキリの良いところで<section>でまとめよう」というのは誤りです。<section>は内容的にまとまりがある場合(ページのアウトラインに載ってくるような内容のまとまりがある場合)に使います。🙅装飾を目的にsectionを使わない<section>タグはセクションを作るために使用します。基本的に装飾を目的としている場合は<div>タグを選ぶようにしましょう。articleとsectionの使い分け方<article>は、他と切り離されても意味が成り立つような独立したまとまりに対して使用します。</section></article>👆<article>〜</article>は、1つ完成した内容になっており、切り離されても意味が成り立ちます。<p>〜</p></article>👆もし<section>まで<article>に置き換えた場合、その内容では意味が成り立ちません(「豆にこだわる...何の話?」となってしまいます)。このような小さなテーマのまとまりに対しては<section>を使うのが理想的です。ブログの投稿などでは、投稿全体を1つの<article>で囲み、内容を複数の小さいテーマに分けられる場合は、<section>で分けるのが1つの正解例と言えるでしょう。