# 基本的なwebページの構成 webページの一般的なタグの構成を紹介します。 `html_and_css`ディレクトリ内に`part4`ディレクトリを作成して、`index.html`を作成しましょう。ボイラーテンプレートを使用しましょう。まずは**headerタグ**、**mainタグ**、**footerタグ**を使い、ヘッダー部分、コンテンツ部分、フッター部分に分けます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
</html>

もしコンテンツ部分の右側、左側に広告などを入れる場合は、**asideタグ**を追加します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header></header>
    <main></main>
    <aside></aside>
    <footer></footer>
  </body>
</html>

headerタグには、基本的に**nav(navigation)タグ**を入れることが多いかと思います。内容としては、同一サイトの別ページに遷移するリンクを複数入れます。そのため**navタグ**の中に**ulタグ**を使用して、**liタグ**を複数記述します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </nav>
    </header>
    <main></main>
    <aside></aside>
    <footer></footer>
  </body>
</html>

**mainタグ**の中には、比較的様々なパターンがあるかと思いますが、今回は学習ブログを想定して作ります。まず**h1タグ**にて、ページのタイトルを表示します。

...   
   <main>
      <div>
         <h1>HTMl&CSS学習ブログ</h1>
      </div>
   </main>
```

次に、**sectionタグ**を使用して、一つのコンテンツのまとまりとして、グルーピングして、記述します。 **sectionタグ**は、見出しとそれに関する文章をグルーピングする役割を持っています。

...   
   <main>
     　　<div>
         <h1>HTMl&CSS学習ブログ</h1>
      </div>
      <section>
        <h2>HTMLの学習記録</h2>
        <p>タグについて理解した</p>
      </section>
      <section>
        <h2>CSSの学習記録</h2>
        <p>要素の指定方法について理解した</p>
      </section>
   </main>
```

mainタグに関して、上記のような例を挙げましたが、何度も言いますが、様々なパターンがあるので、前章で紹介した**セマンティックなタグ**を使いつつ、どのタグに該当するか難しい場合は、**divタグ**を使いグルーピングして記述していくのが良いかと思います。