音声スライド （クリックで展開／閉じる）
はじめに
- 前の単元で作った HTML 文書の骨組みを土台にする
- 文字コードの宣言とページタイトルの設定を学ぶ
- 要素の「入れ子構造」を理解し正しく書けるようになる
この単元では、前の単元で作成した HTML 文書の骨組みに、文字コードの宣言とページタイトルを追加します。また、HTML の要素同士がどのように「入れ子」になっているかを理解し、インデントを使って読みやすく書けるようになることを目指します。
文字コードとメタ要素の指定
- コンピュータは文字を数値として扱っている
- 文字コードの解釈がずれると文字化けが起きる
- meta 要素の charset 属性で UTF-8 を宣言する
- head 要素の中に記述する
コンピュータは、情報として文字を扱うために、あらかじめ決められた文字コードという規則に従って数値に変換しています。この対応関係の解釈がずれると、いわゆる文字化けが起こります。HTML では、meta 要素の charset 属性に UTF-8 という文字コードを指定することで、どの規則で解釈すべきかをブラウザに伝えます。この記述は head 要素の中に書きます。
タイトル要素でページ名を設定
- title 要素は head 要素の中に書く
- ブラウザのタブに表示される文字列を指定する
- 検索結果の見出しに使われることもある
title 要素は head 要素の中に書き、その内容がブラウザのタブに表示されるページタイトルになります。検索エンジンの検索結果に見出しとして表示されることもあるため、ページの内容を的確に表す文字列を指定することが大切です。
ヘッド要素の中身のコード例
ここまで説明した meta 要素と title 要素を、実際に head 要素の中に書いたコード例です。1行目に文字コードの宣言、2行目にページタイトルの指定が並んでいます。
要素の入れ子構造とは
HTML の要素は、外側の要素が内側の要素を包み込む「入れ子」の構造になっています。図のように、html 要素の中に head 要素と body 要素があり、さらに head 要素の中に meta 要素と title 要素があります。外側にある要素を「親」、内側にある要素を「子」と呼びます。
親子関係と兄弟関係
- 外側の要素を「親」内側の要素を「子」と呼ぶ
- 同じ親を持つ要素同士を「兄弟」と呼ぶ
- 例：head と body は html の子で兄弟にあたる
ある要素を外側から包んでいる要素を「親」、その内側にある要素を「子」と呼びます。さらに、同じ親を持つ要素同士は「兄弟」と呼ばれます。たとえば head と body はどちらも html の子であり、互いに兄弟の関係にあります。
インデントで見やすく書く
- 子要素を1段字下げ（インデント）して書く慣習がある
- インデントはブラウザの表示結果には影響しない
- 階層が深いほど字下げも深く対応が分かりやすい
入れ子になった子要素は、親要素より1段字下げ（インデント）して書くという慣習があります。インデントの空白は、ブラウザでの表示結果には影響しません。階層が深くなるほど字下げも深くなるため、どの要素がどの要素の子なのか、対応関係が一目で分かりやすくなります。
完成した HTML 文書の例
ここまで学んだ内容をすべて反映した、この単元の完成形です。DOCTYPE 宣言から始まり、html 要素の中に head 要素と body 要素が入れ子になっており、head 要素の中にはさらに meta 要素と title 要素が入れ子になっています。子要素は親要素より字下げして書かれています。
まとめ
- meta 要素の charset 属性で文字コードを宣言する
- title 要素はブラウザのタブや検索結果に表示される
- 要素は親子・兄弟関係を持つ入れ子構造になっている
- 子要素を字下げして親子関係を分かりやすく書く
この単元では、meta 要素の charset 属性で文字コードを宣言すること、title 要素がブラウザのタブや検索結果に表示されるページタイトルであることを学びました。また、HTML の要素は親子・兄弟関係を持つ入れ子構造になっており、子要素を字下げして書くことで、その関係を分かりやすく表せることを確認しました。
