ホームページは『HTMLとCSSによって構成される』ことは以前の解説で触れました。
さらにその後の解説でHTMLとCSSを試しに記述してHTMLとCSSそれぞれの働きを具体的に確認してみました。
これからは具体的なHTMLやCSSのお話をゆっくり掘り下げながらひとつずつ解説していきます。
まず今回はホームページの『内容そのもの』を担う『HTML』について、その土台となる概念から学習していきましょう。
HTML記述の約束事をコーディングする（前編）
HTMLを記述しホームページの内容を作り込んでいく前に、まずは厳格な規則に従った約束事のようなものが複数行必要となります。
最初にそれらの情報をコーディングしていきましょう。
『コーディング』とは文字どおり『コードを書くこと』です。
『コード』とは、例えば
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLを書いてみるテスト</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>このページの内容である文章</p> </body> </html>
のようなコンピュータ言語で書かれた情報のことです。
『HTML』でも『CSS』でも『C言語』でも『Ruby』でも、何で書かれているかに関係なくその情報のことを総称して『コード』と呼びます。
!doctype（文書型宣言）
HTMLという言語は、その誕生からすでに30年近くが経過しています。
その間にHTML自体も文法や仕組み、機能などがよりよいものに更新されながら発展を遂げており、 現在に至るまでにいくつかのバージョンが存在します。
バージョンは分かりやすく通し番号が振られていて、現在（2019年）の最新バージョンは通算で『5』です。インターネットでHTMLについて調べたり、本屋で書籍の購入を検討された方は『HTML5』というキーワードをよく目にされたのではないでしょうか。
ここでようやく本題ですが、HTML文において必ず1行目に記述するのがこの『文書型宣言』と呼ばれる1行です。
『この文書はHTMLの〇個目のバージョンのルールに則って書かれています』という宣言文です。
テキストエディターを起動したら1行目に以下のように記述してください。
<!doctype html>
とてもシンプルですが、実はここには『HTMLのバージョン5以降を使用している』という意味が込められています。
『5』という数字はどこにも見当たりませんけどね。
でもいいんです。それで構わないんです。
というより、 こう書くことがルールで定められています。
『バージョン4』まではもっと長ったらしい書き方だったのですが、『バージョン５』から簡略化されました。
実はこのHTMLの『バージョン』という概念、現在は廃止されています。
バージョン５以降、6や7など番号付きで呼ぶことは今後はありません。
これまでは『まとまったルール変更・追加』に番号を付けてリリースしていましたが、今後は随時新しい機能やルールが追加され、それに合わせて『ウェブブラウザー』のメーカーが対応していく、という形が取られていきます。
ですから『もうバージョン番号は必要ない』、ということなんですね。
あ、そうそう、この記述、『大文字でも小文字でも』区別されることはありません。
<!doctype html>
<!DOCTYPE HTML>
<!doctype HTML>
<!DOCTYPE html>
いずれの書き方でも問題ありません。
『大文字でも小文字でも』 問題ない、ですよ？
『全角でも半角でも』・・・ではありませんよ？
こういったコードの記述は『半角』でしか認識されませんから混同しないよう注意してくださいね。
『大文字と小文字』
『全角と半角』
混同しがちですが全くの別物ですね
要素
HTMLファイルの中はそれぞれ異なる役割を持った『要素』 と呼ばれるブロックで区切られていて、それらが複数隣り合って（あるいは入れ子になって）配置されています。
例えば・・・
- 『見出し』の役割を持つ要素
- 『本文』の役割を持つ要素
- 『リンク』の役割を持つ要素
など、他にもたくさんの種類があります。
1行目のみ例外的に『宣言文』だったのですが、2行目からはこの『要素』と呼ばれるものを繰り返し記述していくことになるわけです。
html要素を記述
- 全ての要素の祖先要素（あるいは親要素と言う）となる最も大きな入れ物
- この要素より大きな要素は存在しない。
- この要素の『中に』あらゆる要素を作成する。
- HTMLファイルの2行目で始まり、最終行で終わる。
まず最初に『html要素』を作ってみましょう。
上記にあるように、他の『 全ての要素の祖先要素（あるいは親要素と言う）』となる要素です。
以下のように追記してください。
※赤字が追記部分
<!doctype html>
<html>
</html>
こう記述することで、『html要素』がこのコード内に誕生したことになります。
でも少し気になることがありますよね？
なぜ2行必要なんでしょうか。
しかもよく見ると後の行のカッコ内には『/』（スラッシュ）が入っていますね。
この2行のコード、というよりこのふたつのコードはそれぞれ呼び名が異なります。
<html>（スラッシュ無し）をhtml要素の『開始タグ』
と呼び、
</html> （スラッシュ有り） をhtml要素の『終了タグ』
と呼びます。
大半の要素はこのように
『開始タグ』と『終了タグ』のふたつを必要とします。
（※『開始タグのみ』という例外の要素もありますが、それはまた先でお話しします）
『開始』と『終了』
つまり
『ここ（開始タグ）』から始まって『ここ（終了タグ）』で終わる
という『範囲』を示すために開始タグと終了タグが必要になるのです。
そしてその『範囲』の中に収められたものを、その要素の『内容』と呼びます。
- 開始タグと終了タグで内容を挟んだもの全体を『要素』と呼ぶ ↓
- 書き方のルール
< 要素名 > 内容 < / 要素名 > （※『<』や『/』、要素名は全て半角）
例）p要素 ：<p>内容</p>
section要素：<section>内容</section>
head要素・body要素を記述
そのHTMLファイルの詳細情報（以下）を記述する場所
- そのHTMLファイルのメタデータ（使用する文字コードや概要文等）
- そのHTMLファイルと連動させる外部ファイル（CSSなど）の情報
- そのHTMLの『タイトル』
など
ここに記述した情報はブラウザー画面には表示されない
- ブラウザーの『画面』内に表示される全ての内容を記述する場所
- ここに記述された情報が閲覧される
では続いて『head要素』と『body要素』を作ってみます。
これらもそれぞれ『開始タグ』と『終了タグ』を持っており、『ここからここまで』という範囲を示さなければなりません。
<head> </head> <body> </body>
上記のコードになるわけですが、ひとつ注意点があります。
要素の入れ子（階層構造）
話を少し戻しますが、html要素について前述した中に
- （html要素は） 全ての要素の器（親あるいは祖先と言う）となる最も大きな入れ物
- この（html要素）要素の『中に』あらゆる要素を作成する
と書きました。
html要素の『中に』あらゆる要素を作成するということは、今回追記する『head要素』と『body要素』は、そのとおりhtml要素の『中に』記述しなければなりません。
以下のように追記してみましょう。
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
なぜこの場所（赤字部分）に追記したかお解りですね？
head要素もbody要素もhtml要素の『中に』記述するものなので
『<html>と</html>の間』に追加したわけです。
head要素とbody要素を『html要素の開始タグと終了タグで挟む』
と言い換えることもできますね。
現時点での3要素（html・head・body）の関係性を見てみると、
『html要素の中にhead要素とbody要素がある』
ということが言えます。
この時、
html要素を『head要素とbody要素の親要素』
と言い、反対に
head要素とbody要素は『html要素の子要素』
と言います。
つまり、ある要素内に別の要素を作成した時、その要素間には『親子関係』が発生した、ということになります。
このような要素どうしの大小の親子関係を
- 階層構造
- ツリー構造
- ネスト構造
などと呼びます。
おっと、解説ばかりでコーディングは少ししかし進んでいませんが、長くなってしまいましたね。
『要素』というものの概念がお話できたところで、今回はここまでにしましょう。
ここまでを保存しておくことを忘れないでくださいね。
次回は今回記述した要素の『さらに中に』また別の要素を追加していきます。
最後までお読みくださりありがとうございました。
おつかれさまでした。
