HTMLを作成するとき、こんな文書構造にしていませんか？
HTMLで文書構造に使用できるタグには、div以外にも目的にあったタグが用意されています。
使い方を理解してウェブサイトの構造を明確にすることで、正しくプログラミングできるようになり管理やメンテナンスがしやすくなります。
また、検索エンジンは重要な情報を正しく把握しやすくなりSEO強化にも繋がります。
<p> と <div> の違い
「p」は段落
p は paragraphの略で「段落」という意味です。<p>～</p> で一つの段落を示します。
p を使うと、上下に一行（1em）の余白（margin）が入ります。
<p>P要素の文章です</p>
<p>P要素の文章です</p>
<p>P要素の文章です</p>P要素の文章です
P要素の文章です
P要素の文章です
「div」は区分
div は divisionの略で「分割」という意味です。<div>～</div> で一つの区分を示します。
文章をブロックに区分します。CSSやJavaScriptを適用する対象ブロックとしてよく利用されます。
div は p とは違い、上下に余白（margin）は入りません。
<div>div要素の文章です</div>
<div>div要素の文章です</div>
<div>div要素の文章です</div>div以外の文書構造タグ
それぞれの文書構造タグの役割を見ていきます。
「nav」はナビゲーション
nav は navigationの略で「目的地への道筋」という意味です。他のページやページ内のポジションへのナビゲーション情報を記述します。
ヘッダーメニューやサイドメニューなど、メニューバーとしてよく利用されます。
「section」は章
section は「章」という意味です。見出しとその内容が書かれている文章をまとめる役割があります。
また、sectionタグを利用する場合、タイトルタグ「h2」などをsection内で使用するというルールがあります。
検索エンジンでは、このsection要素の内容が重要な文書をして扱われます。
「article」は独立した記事
article は「記事」という意味です。独立したコンテンツや記事をまとめる役割があります。
sectionタグと同様に、タイトルタグ「h2」や「h3」などをarticle内で使用するというルールがあります。
1つのsection内に複数のarticleやその他の要素が含まれることがあります。
「aside」は補足や脚注
aside は「脇に」という意味です。本文内の補足や脚注、用語の説明など本筋とは触れた余談を記述します。
サイドバーやコールアウトボックスなどを表現するためによく使われます。
