DIVからの脱却 〜section article aside nav〜

とりあえずdivで囲っておけば大丈夫となりがちになるほどdivはよく利用されてしまいます。
しかしSEO的やメンテナンスする際にそのdivがどのような意味を持つのかがわかりません。
ですので、クローラーに正しく認識してもらうため、メンテナンスしやすいためにdivではなく、セクションコンテンツを利用すべきということで、ここではdivではなくセクションコンテンツを使おう！ということをいいたいと思います。

#セクションコンテンツとは？
セクションコンテンツは４つの要素に分類されます。
section article aside nav の4つです。
これらそれぞれが１つのセクションであることを表します。

##section
section要素は、章や節のことをさします。
またsection要素にはh2などの見出し要素はセットで使われます。

section.html

<section>
  <h1>プロフィール</h1>
  <p>初めまして・・・</p>
</section>

##article
article要素は、ニュースやブログ記事などのそれだけで自己完結していて、セクションの中で独立しているもの。

article.html

<article>
　<section>
　　<h2>記事</h2>
　　<p>本文</p>
　　<h3>小見出し</h3>
　　<p>本文</p>
　</section>
</article>

##aside
aside要素は、例えば広告や補足記事など、メインコンテンツとか関連性が薄い内容の場合はこちらを使用します。

aside.html

<aside>
　<section>
　　<h2>広告</h2>
　　<ul>
　　 <li><a href="#">広告１</a></li>
　　 <li><a href="#">広告2</a></li>
　　 <li><a href="#">広告3</a></li>
　　</ul>
　</section>
</aside>

##nav
nav要素は、ナビゲーションである場合に使用します。
ただナビならなんでもいいというわけでなく、主要のナビゲーションだけに使います。
よってサブメニューには使いません。

nav.html

<nav>
　<h1>グローバルナビゲーション</h1>
　<ul>
　　<li><a href="#">MENU1</a></li>
　　<li><a href="#">MENU2</a></li>
　　<li><a href="#">MENU3</a></li>
　　<li><a href="#">MENU4</a></li>
　　<li><a href="#">MENU5</a></li>
　</ul>
</nav>

#div
w3gによると

div要素（division）は区切りを意味するブロックレベル要素です。この要素自身が特に意味を持っているわけではなく、他の要素をグループ化（含まれた内容を一つの単位とする）し、文書に構造を付加することで文書の情報的価値を高めます。

と書かれています。
div要素自体は意味はなくデザインやレイアウトのためにdiv要素を使用するといった使い方があってるのかもしれません。

#とりあえずdivで囲っておけばいいやは ❌
divやsectionやarticleの違いがわからなくて、じゃあdivで囲えばいいやと思っていたのが、
しっかりとそれぞれの用途を理解すればgoogleのクローラーにも理解できるような、メンテナンスする際にもみやすく、わかりやすいようにセクションコンテンツを使っていけるともっといいコードに近づけるのではないかと思います。