※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。
もくじ
前回のおさらい
前回は、HTMLの正式名称や、マークアップの考え方、タグの使い方や記述例を確認しました。
今回はそれを基に、HTMLがどんな構造で書かれていくのかを確認していきましょう。
HTMLに必要なタグ
HTMLを記述する際に、最低限必要になるタグが以下の4種類です。
- doctypeタグ
- htmlタグ
- headタグ
- bodyタグ
それぞれ順番にみていきましょう。
doctypeタグ
doctypeタグは、HTMLファイルがどのようなHTMLで書かれているのかを伝えるためのタグです。
HTMLは、今の状態になるまでいくつもバージョンアップを重ねてきました。このdoctypeタグを用いることで、書かれているHTMLファイルがどのバージョンなのかを正確に示すことができるようになります。
htmlタグ
htmlタグは、htmlタグの中の範囲が本文（内容）であることを伝えるためのタグです。つまり、htmlタグで囲むことにより、「ここからここまでがhtmlです」と伝えることができるタグとなります。
headタグ
大前提として、headタグは、htmlタグの中に書かれます。その上で、headタグは、「HTMLファイルを解釈する上で必要な情報を書く場所」という役割を持ちます。具体的には、ページのタイトルなどがあたります。
bodyタグ
bodyタグも、大前提としてhtmlタグの中に書かれます。bodyタグは、「HTMLファイルの見せたい部分の内容を書く場所」という役割を持ちます。つまり、実際にページに表示させたい内容をbodyタグの中に書いていくことになります。
実際に書いてみよう
では、これらの4つのタグを使って、実際にHTMLファイルに記述をしていきましょう。
まずはdoctypeタグです。doctypeタグは、非常に特殊なタグで、書く場所が決められています。それはHTMLファイルの1行目です。スペースや空行を開けずに、記述します。
実際の記述は、下記の通りになります。
<!doctype html>「HTML5」というバージョンのHTMLで記述する場合は、この記述をすればOKです。なお、doctypeタグには閉じタグ（</doctype>のような記述）は必要ありません。
続いて、htmlタグを記述していきます。
<!doctype html>
<html>
</html>このような形で記述します。またhtmlタグ自体に、「このHTMLファイルが日本語なのか英語なのか」などのような、言語に関する情報も記述することができます。今回は日本語であることを記述したいので、下記のように記述します。
<!doctype html>
<html lang="ja">
</html>「lang」は、言語という意味のLangage、「ja」はJapanese、つまり日本語という意味になります。この記述をすることによって、「htmlの言語は日本語です」という情報を書き込んだことになります。
では次に、headタグとbodyタグを記述していきますが、これらはhtmlタグの中に入れるタグです。htmlタグの中に入っていることをわかりやすくするために、字下げ（インデント）をしましょう。
字下げ（インデント）をする前の記述はこのようになりますが…
<!doctype html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>headタグとbodyタグを字下げ（インデント）すると、下記のようになります。
<!doctype html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>これをすることによって、視覚的にheadタグとbodyタグがhtmlタグの中に入っていることがわかりやすくなりましたね。
index.html
ここまでのコード例のファイル名に「index.html」という名前を使用してきました。この「index」には、「索引・指標」などと訳されるのが一般的です。その意味通り、「index.html」は、多くのWebサーバーが最初に探すことが多いです。したがって、最初に作るファイルは「index.html」とすることが多いです。
おわりに
今回は、HTMLの基礎的な構造について見てきました。ただ、まだ実際に今の状態のファイルを読み込んでも、ページには何も表示されません。
次回は、実際にページに表示させたいことを表示させるためのタグについてよく使われるものを見ていきます。
