HTML5における「sectionタグ」と「article」タグの違いって微妙に解らなくないですか？

HTML5がメジャー化してからだいぶ経過してますし違いを解っている方の方が既に多いとは思うのですが、HTMLを勉強し始めた方にとってはその違いってなかなか分かりづらいと思うんですよ。

私もHTML5がメジャーになった時は「なんじゃこりゃ」って思ってました！

今日は滅茶苦茶簡単に「section」と「article」の違いを説明する方法を発見しましたので、その方法をお伝え致します。

目次

secitonは「記事一覧」に使え！

はい、とっても簡単に理解する方法、これが一番わかりやすいのですが、要するに「secitonタグはWordpressなんかの記事一覧に使え！」ってことです。

複数の記事をまとめてsecitonでくくってはいけませんよ。

一つづつ、secitonで囲いましょう。

sectionをもう少し掘り下げて解説すると、「一ページ内に複数の投稿記事が存在する場合はsectionを使おうね」ということです。

どうですか？無茶苦茶わかりやすいですよね。

ソースコードで説明すると、こういう感じです。

<section>
  <img src="hoge.com/images/hoge.png" alt="hoge" />
  <h2>タイトル</h2>
  <p>抜粋文とか、文章とか</p>
</seciton>

<section>
  <img src="hoge.com/images/hoge.png" alt="hoge" />
  <h2>タイトル</h2>
  <p>抜粋文とか、文章とか</p>
</seciton>

<section>
  <img src="hoge.com/images/hoge.png" alt="hoge" />
  <h2>タイトル</h2>
  <p>抜粋文とか、文章とか</p>
</seciton>

<!--こういう記事なんかの繰り返しにsectionを使うということ-->

articleは「単体記事」に使え！

はい、また無茶苦茶簡単な話ですね。「articleタグはWordpressなんかのシングルページ、テーマの編集などから見た場合の【個別投稿 (single.php)】に使え！」ってことなんですよ。

記事一覧画面にarticleを使うべきではありません。あくまでarticleで囲む必要があるのは「単体の記事ページ」ということです。

articleをもう少し掘り下げて解説すると、「一ページ内に一記事しか無い場合はarticleを使おうね」ということです。

やっぱり無茶苦茶わかりやすかったですよね！

ソースコードで説明すると、以下の様な感じです。

<article>
　　<h2>HTML5の「section」と「article」の違いと使い分けを超簡単に説明！</h2>
　　<p>
     HTML5における「sectionタグ」と「article」タグの違いって微妙に解らなくないですか？

     HTML5がメジャー化してからだいぶ経過してますし違いを解っている方の方が既に多いとは思うのですが、HTMLを勉強し始めた方にとってはその違いってなかなか分かりづらいと思うんですよ。

     私もHTML5がメジャーになった時は「なんじゃこりゃ」って思ってました！

     今日は滅茶苦茶簡単に「section」と「article」の違いを説明する方法を発見しましたので、その方法をお伝え致します。

    はい、とっても簡単に理解する方法、これが一番わかりやすいのですが、要するに「secitonタグはWordpressなんかの記事一覧に使え！」ってことです。

    複数の記事をまとめてsecitonでくくってはいけませんよ。

    一つづつ、secitonで囲いましょう。

    sectionをもう少し掘り下げて解説すると、「一ページ内に複数の投稿記事が存在する場合はsectionを使おうね」ということです。

    どうですか？無茶苦茶わかりやすいですよね。

    ソースコードで説明すると、こういう感じです。
    ・
    ・
    ・
    ・
    ・
　　</p>
</article>

<!--articleは単体記事ページで使おうね-->

sectionもarticleもSEO対策上非常に重要なタグです。

HTML5によって、ソースコードの役割を明示的にするために「section」「article」が存在しています。

要するに、「ここは見出しとコンテンツだよ！」とGoogleさんのクローラーに伝えるために滅茶苦茶大切なタグになっているという訳です。

ちなみに補助的でさほど大切ではないよ！と伝えるためにブログならばサイドバーを「aside」で囲うべきですし、ヘッダーを囲む「header」タグもフッターを囲む「footer」タグも非常に重要なタグになってきます。

Googleのクローラーはこういったタグをベースに、コンテンツのソースを読み取って評価しています。

実は今運用中のテンプレート作成時にすっかりとarticleのタグを入れることを忘れておりましたので、戒めとしてこの記事を作成した次第です・・・。

最後に

すごく簡単にarticleとsectionの違いを理解できたと確信しています。

記事一覧＝seciton

記事単体＝article

アホでも解るように頑張って書きました。

内部SEO対策上、扱いに注意が必要なタグになりますので皆さんもお忘れなく正確にタグを使ってくださいね！