section article mainの使い方

トモジのアイコン画像トモジ

sectionタグ・articleタグ・mainタグの違いって何?
意味と使い方を知りたい!

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、これから勉強を始めるあなたに
sectionタグ・articleタグ・mainタグに関して要点をわかりやすく説明しております。

記事の内容

1.section article mainの意味

HTMLのコーディングを進めていく中で
sectionタグ・articleタグ・mainタグの使い方が
いまいち分かりにくく
書籍でもあまり触れていないので説明したいと思います。

タグの説明
  • [section]
    複数の見出しも含め
    一つのブロックに使用するタグ
    ※何回でも使用可能

  • [article]
    webページ内で自己完結,
    独立した文章ブロックに使用するタグ
    ※何回でも使用可能

  • [main]
    webページ内で
    一番中心となる部分に使用するタグ
    ※1度だけ使用

以下の図は、一般的なwebサイト使用される
sectionタグ・articleタグ・mainタグの
構図になります。
※articleタグが使われない場合も多くある

sectionタグ・articleタグ・mainタグの説明図
タグの配置に関して

2.section article mainの使い方

sectionタグ・articleタグ・mainタグの違いはわかったかとは思いますが
もう少し詳しく違いについて説明していきます。

sectionタグ

sectionタグは複数の段落をまとめるタグで
入れ子構造も可能なので、
文章で言うところの[章][節][項]と同じ役割になります。

articleタグ

articleタグは自己完結や独立した文章をブロックに使用するタグとなり、
ニュースサイトやブログにおける各記事やそのコメントになります。

mainタグ

mainタグはwebページ内で一番中心となる部分に使用するタグとなり、
検索エンジン(クローラー)に情報を伝える役割があります。

クローラーとはweb上の文書や画像などを周期的に取得し、自動的にデータベース化するプログラム

まとめ

最後にこの記事のポイントをまとめておきます。

まとめ

section

  • 一つのブロックとして使用
  • タグで入れ子構造も可能

article

  • 自己完結,独立した文章ブロック
  • ニュースサイトやブログにおける
    各記事やそのコメントに使用

main

  • webページ内で一番中心となる部分
  • 検索エンジンに情報を伝える役割

記事の内容
閉じる