閉じる
カテゴリー
もっと見る:HTML&CSSコーディング

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>

articleタグとsectionタグを使う利点

個人的にではありますが、articleタグとsectionタグを使う利点はあまりありません。

あえていうなら、articleタグを使うことで、検索エンジン(クローラー)に対して、そのページの核となるコンテンツを明示的に伝えることができそうなことです。

また、sectionタグを使うことで、コード上、構造を把握しやすくなり、またひとまとまりごとにCSSでスタイルを整えることができるなどが考えられます。

HTML/CSS一覧