#はじめに
この記事は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の書き方について説明をしていきたいと思います。
私も勉強を始めたばかりなので、初心者のみなさん一緒に頑張っていきましょう:）