#はじめに
この記事はProgate（プログラミング学習サービス）を使ってHTMLについて学習した内容を忘れないように逐一書き留めたものです。なので、ところどころ間違ってる可能性があるので、参考程度にとどめていただけると幸いです。

###目次
1．HTMLの骨組み
2．head要素
3．body要素

##1．HTMLの骨組み
ここではHTMLの構造について簡単に説明します。下に載せたコードが最も簡単な形のHTMLの構造です。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

一行目のは単にHTMLのバージョンを宣言するためのものです。もう何も考えずに機械的に書いちゃいましょう。

##2．head要素
次に続く<head>要素内には、Webページの設定に関する情報を書いていきます。
具体的には

文字コードの情報
ページのタイトル情報
cssの読み込み情報

などです。これらの情報は以下のような定型文を<head>要素内に記述することで設定できます。

文字コード情報の設定　 <meta charset = "文字コード名">
ページのタイトル情報　　 <title> タイトル名</title>
css読み込み情報　　　　 <link rel = "stylesheet" href = "cssファイル名">

実際の具体例でいうと下の感じです。

<html>
  <head>
    <meta charset ="utf-8">
    <title>Progate</title>
    <link rel ="stylesheet" href ="stylesheet.css">
  </head>
  <body>
  </body>
</html>

ちなみに"タイトル"というのは、下の画像のようにブラウザのタイトルバーに表示される名前のことです。

<head>要素は基本的にこの3つの要素だけ書いておけば大丈夫かと思います。

##3．body要素
先に述べた<head>要素内での記述がWebページに表示されないのに対して、<body>要素内での記述はダイレクトにWebページに表示されます。<head>要素に比べると、書くことも多くなり、難しいです。
では順を追って見ていきましょう。

まず初めに、多くのホームページは大きく**”ヘッダー”、”メイン”、”フッター”**の3パートに分けることができます。下の図のヘッダーとフッターの間の領域はメインと呼ばれます。

ヘッダー　:　どのページが開かれても常に共通して表示される上の部分
メイン　　: 　主なコンテンツが含まれる
フッター　: 　ホームページ一番下の部分　「会社概要」などを書いてたりする。

この3つのパートはそれぞれ違う背景色であったり、文字の大きさを使ったり、異なった設定を用いることが多くなります。そのため、<body>要素はあらかじめ3パートに分けておくとよい。分け方は以下のとおりです。

<body>
    <div class ="header">
    </div>
    <div class ="main">
    </div>
    <div class ="footer">
    </div>  
  </body>

ここで用いられた<div>はdivision(分割)からきています。その名の通り、ここでは<body>要素を3つのパートに分割するために使われています。classというのはわかりやすいようにそれぞれのパートにつけたパート名と思って問題ないと思います。

##4．終わりに
今回は本当に基礎的なHTMLの構造についてだけ説明をしてみました。
次回以降CSSやより細かなHTMLの書き方について説明をしていきたいと思います。
私も勉強を始めたばかりなので、初心者のみなさん一緒に頑張っていきましょう:）