#HTML・セクショニングの必要性・主な区分化要素
###はじめに
その①「HTMLの主な要素〜初心者だった自分に向けて〜　その①メタデータ系」はこちら
続いてセクショニングについてまとめていきます。

##なぜ、セクショニング（適切な要素によって区分）する必要があるか
HTMLにおいてテキストや画像を正確に区分化することは、読み手が内容を正しく理解するために必要不可欠です。
テキストなどを区分するだけであれば<div>要素一つで役割を果たすことができますが、それは正しい区分の仕方ではありません。
以下に、適切なタグを使って区分すべき理由を挙げます。
####理由① 他の端末やブラウザにWebサイトの構造を正確に伝えるため
####理由② 読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する技術に構造的な意味を伝えるため
####理由③リンクやその他のナビゲーション構造は、ユーザーがサイトやページのコンテンツのどこにいるかを理解して移動するのに役立つ

<div>要素は要素自体に意味を持たないため、<div class="navigation">のように記述しても内容の意味はブラウザなどに一切伝わりません。以前は区分化する役割を全て<div>が担ってましたが、HTML５から新しい意味づけする要素（navやsectionなど）が追加され、コンテンツの意味的な領域においてウェブサイトの区分化を進化・明確化することができるようになりました。結果として機械、人間の両方がそのWebサイトの構造を理解しやすくなり、扱いやすさが向上していきました。
ですから、HTMLを適切な要素によって区分することはWEBサイトを構築する上での必要不可欠ということができます。

ここからセクショニングに使用する要素を紹介していきます。

header要素 `<header>`

導入コンテンツ、ナビゲーション群など、いわゆるヘッダー的な範囲を示すための要素です。
その<header>要素を含む最も近くの<main>要素またはセクション、もしくはページ全体のヘッダーになります。
見出し要素以外にもロゴや検索フォームなど入れることができますが、この要素内に<main>要素を入れることはできません。

footer要素 `<footer>`

ページ下部でよく見る、いわゆるフッター的な部分の範囲を示すための要素です。
その<footer>要素を含む最も近い<main>要素またはセクション、もしくはページ全体のフッターとなります。
内容は一般的に著作者の名称やCopyright表記、関連ページへのリンクが含まれます。<header>と同じで、この要素内に<main>要素を入れることはできません。
多くの場合下部に配置されますが、必ずしもその必要があるわけではなく<header>と一緒に上部に配置することもできます。
##main要素 <main>
<main>要素は、そのページ内の主要な内容を示す要素です。
主要な内容とは中心的な主題、情報のことです。したがってこの要素の内容はそのページ内で固有のものであるべきで、セクションにまたがって繰り返されるもの（ナビゲーションや検索フォームなど）を入れることは基本的にありません。
通常は一つのページ内に一つしか配置できません。複数配置する必要がある場合は、１つを除いて全てのメイン要素にhidden属性を指定し、ユーザー側から見て存在していない形にしていなければなりません。
また、この要素は<article>、<aside>、<nav>、<header>、<footer>の中に配置することはできません。

記述例

HTML

<body>
 <header>
  <img src = "image/logo">
 </header>

 <main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
  </article>
 </main>

</body>
~~~

##nav要素 `<nav>`
この要素は、現在のページ内の他の部分や他のページへのリンクを提供するセクションであることを示します。<br>しかしページ内の全てのリンクをこの要素に入れる必要はなく、リンクの主要なブロックにのみ使用します。<br>`<fotter>`内でよくリンク集が置かれることがありますが、この要素に入れる必要はありません。読み上げアプリなどではこの要素の範囲の読み上げを省略することができます。
##section要素 `<section>`
この要素は、ページ内でのセクション（区間）を意味します。<br>この要素は、スタイル付けの目的のみで使用される`<div>`と違いページ内での文脈に沿って論理的な区切りとして現れるべきものです。通常、この要素には見出し`<h1~h6>`が含まれます。<br>内容が独立してページ外でも意味を持つものであれば、代わりに`<article>`要素を使用します。

_記述例_

```html:HTML
<h1>セクションについて</h1>
<section>
    <h2>セクションとは</h2>
    <p>セクションは文書の理解を助けるための区切りです。</p>
</section>

<section>
    <h2>セクションの種類</h2>
    <p>いろいろあります。</p>
</section>

~~~

##article要素 `<article>`
この要素は、ページ内において単独で自己完結している範囲やコンテンツに使用されます。<br>例えば、ネットや新聞の記事、ブログ記事、ユーザーの投稿したコメントなどがそうです。ちなみに、この要素の著者情報は`<address>`要素で提供することができます。
##aside要素 `<aside>`
ページの主な内容と直接関係のない部分を示す要素です。<br>サイドバーや広告、補足記事などに使用されます。
##見出し要素`<hi>~<h6>`
見出しを示す要素になります（h="heading"の略）。`<h1>`から始め次は`<h2>`と、数字順で使用します。`<h1>`が最上位で、`<h6>`が最下位となります。<br>テキストの大きさを変える目的のみで使用することはよくありません。その場合はCSSで`font-size`を使用します。<br>`<h1>`は、そのページの主題となるので１つのページに使用するのは１つまでにすべきです。複数使ってしまうと内容がわかりにくくなったり、SEO(Googleの検索順位)に悪影響があります。