html と head と body
この章のゴールは「html、head、body」それぞれのタグの役割と構成を理解することです。
前回も使ったサンプルコードも使いながら説明を進めていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>ここは大きく表示されます。</h1>
<p>pは「paragraph（＝段落）」のpです。</p>
<p>「img」を使うと画像の表示ができます。</p>
<img
src="https://html-css-guide-five.vercel.app/images/og-image-for-top-v2.png"
width="700"
/>
</body>
</html>
また、サンプルコードの 1 行目に書かれている「<!DOCTYPE html>」についても、最後のほうで少し触れておきたいと思います。
html タグ
基本的に html タグについて最低限覚えれば良いことは次の 2 つだけです。
- HTML の入れ子の一番外側のタグとなる
- html タグの中には head タグと body タグだけを記述できる
1. HTML の入れ子の一番外側のタグとなる
前回の記事の「HTML はタグの入れ子でできている」のところでも説明したように、HTML は複数のタグが入れ子になって構成されています。
タグの入れ子で構成されている HTML ですが、入れ子の一番外側（根っこ）の部分は１つだけとなります。
その一番外側で使うタグが「html タグ」になります。
2. html タグの中には head タグと body タグだけを記述できる
html タグの中には後述する「head タグ」「body タグ」の 2 つだけを持つことができます。
つまり、これまでに何度か出てきた「h1 タグ」「meta タグ」「img タグ」などは html タグの直下には含めることが出来ないことを意味します。
「h1、p、img」は「body」の中で使う。
「meta、title」は「head」の中で使う。
さらに html の詳細を知りたい場合は、以下の参考リンク先のドキュメントも参考にしていただけたらと思います。
- 参考リンク: : HTML 文書 / ルート要素
head タグ
基本的に head タグについて最低限覚えれば良いことは次の 2 つだけです。
- Web ページ上に表示しない情報を記述する
- CSS ファイルや JS ファイルなどを読み込むことができる
1. Web ページ上に表示しない情報を記述する
まずは以前「HTML とは」の中の「HTML で書かれたコードと Web ブラウザの様子」で使った以下のサンプルコードと画像をご覧ください。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>ここは大きく表示されます。</h1>
<p>pは「paragraph（＝段落）」のpです。</p>
<p>「img」を使うと画像の表示ができます。</p>
<img
src="https://html-css-guide-five.vercel.app/images/og-image-for-top-v2.png"
width="700"
/>
</body>
</html>
サンプルコードが Web ブラウザに表示された様子
上の画像を見ると、Web ページ上には「body タグ」の中で記述した内容だけが表示されていることがわかります。
それでは「head タグの中身は不要なんじゃないか？」と思われるかもしれません。
実際には不要ということはなく、head タグでは「人間が見る部分ではなく、機械が理解すれば良い部分」を記述していきます。
その一例として、上記サンプルコードの 4 行目をご覧ください。4 行目を見ると「<meta charset="UTF-8" />」と書かれているのがわかります。
これが意味するのは、Web ブラウザ（人間ではなく機械）に対して、「この HTML を表示する際には、文字コードは UTF-8 でお願いします」と指定していることを意味します。
「文字コード」に関してはここでは深くは解説しませんが、指定できる文字コードには次のようなものがあります。（下記で挙げた 3 つ以外にもあります。）
- UTF-8
- Shift_JIS
- EUC-JP
「文字化け」が発生しているときは「文字コード」周りの設定を見直すことで解決します。
2. CSS ファイルや JS ファイルなどを読み込むことができる
Web ブラウザへの付加情報の指定(例:文字コードの指定など)以外にも、head タグの主な役割としては、「CSS や JavaScript などの外部ファイルを読み込む」というのもあります。
「CSS ファイルの読み込み」に関しては、「３日目 CSS その１」の項目の中で説明していきます。
また JavaScript ファイルの読み込み関しては、head タグ内だけでなく body タグの中でも可能です。head タグ内で読み込むときと、body タグ内で読み込むときの違いを知りたい場合は「HTML で JavaScript の読み込み時に気をつけること【ページ表示を早める】」を参考にしていただけたらと思います。
さらに head の詳細を知りたい場合は、以下の参考リンク先のドキュメントも参考にしていただけたらと思います。
- 参考リンク: : 文書メタデータ (ヘッダー) 要素
body タグ
基本的に head タグについて最低限覚えれば良いことは次の 2 つだけです。
- Web ページ上に表示する部分を記述する
- JS ファイルを読み込むこともできる
1. Web ページ上に表示する部分を記述する
「1. Web ページ上に表示する部分を記述する」に関しては「head」の説明でも使った、以下のサンプルコードと Web ページに表示されている内容を見るとイメージが掴みやすいかと思います。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>ここは大きく表示されます。</h1>
<p>pは「paragraph（＝段落）」のpです。</p>
<p>「img」を使うと画像の表示ができます。</p>
<img
src="https://html-css-guide-five.vercel.app/images/og-image-for-top-v2.png"
width="700"
/>
</body>
</html>
サンプルコードが Web ブラウザに表示された様子
上の画像を見ると 8~13 行目の body の中身が Web ページ上に表示されているのが確認できます。
2. JS ファイルを読み込むこともできる
body タグの中では Web ページ上に表示する内容を記述するだけでなく、「JavaScript ファイル」を読み込めたり、直接 JavaScript のプログラムを記述することが出来ます。（head タグ内でも JavaScript のプログラムを埋め込むことが出来る）
当コンテンツは「HTML&CSS 速習教室」という名前から JavaScript の詳細は解説しませんが、「body の中に JavaScript に関するコードも記述できる」と認識してもらえれば問題ありません。
さらに body の詳細を知りたい場合は、以下の参考リンク先のドキュメントも参考にしていただけたらと思います。
- 参考リンク: : 文書の本文要素
<!DOCTYPE html>
冒頭でも書きましたが、サンプルコードの 1 行目を見ると「<!DOCTYPE html>」という記述があるのがわかります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>ここは大きく表示されます。</h1>
<p>pは「paragraph（＝段落）」のpです。</p>
<p>「img」を使うと画像の表示ができます。</p>
<img
src="https://html-css-guide-five.vercel.app/images/og-image-for-top-v2.png"
width="700"
/>
</body>
</html>
<!DOCTYPE html> に関してはそこまで深く考えないで「HTML を書くときは先頭に<!DOCTYPE html>を置く」と決まり文句のように覚えておくので問題ありません。
Visual Studio Code を使って HTML を作成する際には、うまく補完機能を活用すると html, head, body, <!DOCTYPE html> が自動的に記述されるので、意識しなくても<!DOCTYPE html>は自動的に先頭に書かれるようになります。
Visual Studio Code を使って HTML を作る流れは次回解説します。
さらに <!DOCTYPE html> の詳細を知りたい場合は、以下の参考リンク先のドキュメントも参考にしていただけたらと思います。
- 参考リンク: Doctype
次回は HTML を作って動作確認をしていきます！
これまでは座学ばかりでしたが、次回は実際に Visual Studio Code を使って HTML ファイルを作っていきます。
そして、作成した HTML を Web ブラウザで確認するところまで体験していきましょう！
「事前準備: 開発環境を整える」をまだ終えていない場合は、先に下記の 3 つを完了してから先に進みましょう。