HTML&CSSコーディング
mainタグ内の構造化

ここでは、mainタグをさらにarticleタグとsectionタグで構造化する方法について、わかりやすく解説します。

articleタグとsectionタグはどちらもHTML5から新たに追加されたもので、使わなくても差し支えない風潮があります。

そのため、慣れるまではわざわざ使用することはないと思います。

区画分けする前

次のコードは、前回記述したコードからmainタグを抜粋したものです。今回は、このコードに沿って解説します。

HTML

<main>
  <h1>HTMLファイルの構造</h1>
  <p>HTMLファイルは、まずDOCTYPE宣言をします。</p>
  <p>DOCTYPE宣言の後にはHTMLタグが続きます。</p>
  <h2>htmlタグに入るもの</h2>
  <p>htmlタグにはheadタグとbodyタグが入ります。</p>
  <h3>headタグ</h3>
  <p>headタグにはメタデータを記述します。</p>
  <h3>bodyタグ</h3>
  <p>bodyタグに記述するものはブラウザで表示されます。</p>
  <h2>lang属性の設定</h2>
  <p>htmlタグにはlang属性の設定が必要です。</p>
</main>

記事を囲うarticleタグ

articleは、英語で記事を意味します。つまり、articleタグは記事を構成する要素をすべて囲います。

HTML

<main>
  <article>
    <h1>HTMLファイルの構造</h1>
    <p>HTMLファイルは、まずDOCTYPE宣言をします。</p>
    <p>DOCTYPE宣言の後にはHTMLタグが続きます。</p>
    <h2>htmlタグに入るもの</h2>
    <p>htmlタグにはheadタグとbodyタグが入ります。</p>
    <h3>headタグ</h3>
    <p>headタグにはメタデータを記述します。</p>
    <h3>bodyタグ</h3>
    <p>bodyタグに記述するものはブラウザで表示されます。</p>
    <h2>lang属性の設定</h2>
    <p>htmlタグにはlang属性の設定が必要です。</p>
  </article>
</main>

ひとまとまりを表すsectionタグ

sectionタグは、ひとまとまりを区切るために用います。漠然としていますが、記事では節や章を囲います。

HTML

<main>
  <article>
    <section>
      <h1>HTMLファイルの構造</h1>
      <p>HTMLファイルは、まずDOCTYPE宣言をします。</p>
      <p>DOCTYPE宣言の後にはHTMLタグが続きます。</p>
    </section>
    <section>
      <h2>htmlタグに入るもの</h2>
      <p>htmlタグにはheadタグとbodyタグが入ります。</p>
      <h3>headタグ</h3>
      <p>headタグにはメタデータを記述します。</p>
      <h3>bodyタグ</h3>
      <p>bodyタグに記述するものはブラウザで表示されます。</p>
    </section>
    <section>
      <h2>lang属性の設定</h2>
      <p>htmlタグにはlang属性の設定が必要です。</p>
    </section>
  </article>
</main>