div、section、article、asideタグの使い分けとWordPressの投稿や固定ページで使用する方法（メモ）|Personal WP Customization Notes (PWCN)

公開日：2023(令和5)年4月6日／最終更新日： 2023(令和5)年4月7日

「div」「section」「aside」タグの違いってご存じでした？恥ずかしながら私、今の今まで、何でも「div」タグで囲んでおけばいいだろうなんて思ってて、いろいろなページでソースを見て、「何でsectionやasideのタグがあるんだろう．．」とちょっと気になる程度で全く関心がありませんでした。

でも、この3つのタグ、ちゃんと違いがあるんですね（笑）。

ということで、いろいろなページを拝見し、「div」「section」「aside」タグの違いと使い分けを自分なりにまとめてみました。

divタグは、実は何も意味を持たない？

よく使いますよね、divタグ。何かのまとまりをこれで囲んでおくと、スタイルコード書く時にとっても便利なんです。

よって私も何かにつけてdivタグで囲むようにしています。divタグにクラスを付与しておけば、後々変更する際にも手間が省けますしね。何よりdivタグ内の別のタグにクラス付けなくても適用できるので非常に重宝します。

ただ、いろいろ見てると、このタグ、検索エンジンからは「塊がある」と認識されるだけで意味を持たないようです。つまり使い手である私と一緒で、便宜的にまとめてある場所という認識なんですね。

ということは．．．ページの本文にdivタグしか存在しない場合、全部が同じページの内容と一括りに認識されるということで．．例えば本文の内容が薄い（文章量が少ない）ページは逆に関連投稿やらサイドバーの内容やらもひっくるめて一つのページと認識されるわけです。

これが原因か分からないですが、Google Search Consoleで「重複してるページがあるよ」と時折言われて、「重複してるページなんかないのに．．」と今まで無視してましたけど、きちんと部分分けしたら出なくなるのかも知れません。

そこで活躍するのが次の「section」や「aside」タグなんです。

sectionタグの役割

sectionタグは、検索エンジン等からの認識上では、ページ内のとある内容の塊を意味するタグなのだそうです。

ページには、見出しがあり、段落があり、テーブルがあり、画像があり．．といろいろな部品がまとまって構成されてますね。

ただ、その中でも、「序章」「本題」「終章」みたいな部分が存在するはずです。

この「序章」「本題」「終章」を、ここは「序章」ですよ！ここは本題ですよ！と知らせるのがsectionタグなんです。

これをなんの隔たり（明示をすること）なく、ページを作っていると、こんな感じになりますね。

冒頭の文章がある
H2見出しタグ
- 文章
- H3見出しタグ
- 文章
- H3見出しタグ
H2見出しタグ
- 文章
- H3見出しタグ
  - 文章
    - H4見出しタグ
    - 文章
- H3見出しタグ
  - 文章

これを何も明示してないと、検索エンジンがクロールした時には、

ああ、冒頭の文章があるのね！
えーっと、大見出し（H2）があるのね
大見出しの中に文章があって．．中見出し（H3）があるのね
中見出しの中に文章があるのね．．フムフム．．
え？また大見出しがあるの？
え？また中見出しがあるの？
え？その中に小見出しがあるの？
え？え？また中見出しがあるの？

ってなっちゃうみたいなんです。

それを、H2タグの塊ごとに、sectionタグで囲むことで、

sectionだから、ここから内容の塊があるのね
ああ、冒頭の文章があるのね！
えーっと、大見出し（H2）があるのね
大見出しの中に文章があって．．中見出し（H3）があるのね
中見出しの中に文章があるのね．．フムフム．．
おっとここでsectionが閉じてるから、塊はここまでなのね！
またsectionがあるからここから塊が始まるのね
大見出しがあるのね
文章があるのね
中見出しがあるのね．．．．（省略）
ああ、ここでまたsectionが閉じてるから、塊はここまでなのね！

と認識してくれるようになるそうです。

これで思い当たるのが、Google Pagespeed Insightsなどで、「見出し要素は降順になっていません」とアドバイスされるケース。

ページ内の一つの塊に何度も大見出しが登場するので恐らくそういわれるのでしょう。完全解決するかは分かりませんが、sectionタグは使っておいた方がよさそうです。

articleタグの役割と使い方

続いてarticleタグ。

このタグはsectionと似ていますが、ざっくりと「ここが本文だよ！（ここがページの主旨となる内容だよ！）」というのを指定するためのタグです。

本文をまずarticleで囲んで、その中にいくつかのsectionがある．．というような使い方をします。

asideタグの役割と使い方

最後にasideタグについてです。

これもsectionタグと同様に何かの塊を知らせるタグなのですが、sectionとの違いは、「これはページ内の補助的なもので、本文とは直接関係ないですよ！」という意味が付加されるということです。

つまり、サイドバーのコンテンツとか、文末に表示させることが多い関連するページの案内とかがこれに当たります。

また、本文の冒頭に「この内容は古いかも」や「ページを読むのにこの位時間がかかりますよ」といった案内を出したい場合にも、asideで括っておくと、「ああ、補助的なものね」と認識してくれるかも知れません。

WordPressの投稿や固定ページでどう使うか？

今回はHTMLタグについての話ではあるものの、WordPressで作った投稿や固定ページも最終的にはHTMLで出力されてブラウザで変換されて表示されるのですから、関係ありありです。

そこでWordPressではどうしたらいいのか？の答えが、「グループ化」です。

普通にパチパチと文章書いてたらほとんど使わないですよね、「グループ化」。

でも、先ほどのH2タグから次のH2タグの手前までを全部選択してグループ化し、グループを選択した状態で右サイドバーのブロックオプションにある「高度な設定」を展開すると、以下のようにグループ化したものをどのタグで出力する（括る）かが指定できるんです。

div、section、article、asideタグの使い分けとWordPressの投稿や固定ページで使用する方法（メモ）|Personal WP Customization Notes (PWCN)

これで分ければいいんですね！グループ化は、特に何も指定しなければ、何かの隙間や間隔はできませんから、内容に影響はありませんので、単純に「section」や「aside」で括ってくれるありがたい役割だけを担ってくれるわけです。

それでグループ化ってあるんだなぁなんて、本当に今更ながら感心した次第です（笑）。

ちなみにブロックの範囲（グループ化させる範囲）を選択する場合は、ブロックエディター上部の三本線みたいなの（下図）をクリックして、選択の始まりのブロックをクリック後、「shift」キーを押しながら終わりのブロックをクリックし、三点リーダー（点が縦に3つ並んだリンク）をクリックして「グループ」をクリックすればOKです。

ちなみにこのページもグループ化してsectionタグを付与してますので、興味のある方はHTMLソース等で確認ください。

先にグループ化したほうが書きやすいかも．．

この投稿である程度書き進めてから、「グループ化」→「sectionへ変更」というのを繰り返してみて、分かったことがあります。

それは、グループ化するための見出しや段落を入れたら、すぐにグループ化してsectionに変更したほうが書き進めやすいということです。

後からだと、前述したようにグループ化するブロックを複数選択するという操作が必要で、これが何気に面倒でした。

でも、section化したい場所で最初に作ったブロックをまずグループ化して、sectionで囲むようにしておくと、そのブロックに他のブロックを追加した際、自動で同じグループに入れてくれるんです。

これで、グループ化を忘れることもありませんから、各段に書きやすく、公開しやすくなります。

また、「どこがグループ化されてるの？」とならないよう、グループ化した部分に枠線を入れておくと便利かも知れません。

以下のコードを有効化しているテーマのfunctions.phpへ追加するだけで、投稿や固定ページの編集画面、サイトエディター（ブロックテーマの編集画面）で、グループに色の付いた枠線が表示されるようになります。

/***** グループブロックに枠線を付ける *****/
if ( !function_exists( 'add_grouped_block_outline' ) ){
function add_grouped_block_outline(){
$custom_css = "
.wp-block-group {
    border: 2px solid #fd7e0040!important;
}
";

wp_add_inline_style( 'wp-edit-blocks', $custom_css );//テーマエディターへインラインでCSS出力
}
}
add_action('init','add_grouped_block_outline');//テーマエディターへ適用