トモジ
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タグが使われない場合も多くある
2.section article mainの使い方
sectionタグ・articleタグ・mainタグの違いはわかったかとは思いますが
もう少し詳しく違いについて説明していきます。
sectionタグ
sectionタグは複数の段落をまとめるタグで
入れ子構造も可能なので、
文章で言うところの[章][節][項]と同じ役割になります。
articleタグ
articleタグは自己完結や独立した文章をブロックに使用するタグとなり、
ニュースサイトやブログにおける各記事やそのコメントになります。
mainタグ
mainタグはwebページ内で一番中心となる部分に使用するタグとなり、
検索エンジン(クローラー)に情報を伝える役割があります。
クローラーとはweb上の文書や画像などを周期的に取得し、自動的にデータベース化するプログラム
まとめ
最後にこの記事のポイントをまとめておきます。
まとめ
section
- 一つのブロックとして使用
- タグで入れ子構造も可能
article
- 自己完結,独立した文章ブロック
- ニュースサイトやブログにおける
各記事やそのコメントに使用
main
- webページ内で一番中心となる部分
- 検索エンジンに情報を伝える役割