ウェブページの情報には、ブラウザに表示されるものと、表示されない情報があります。これらの内容を明らかにして、HTML全体構造を把握します。これで、HTMLの記述スタイルの基本学習は終了です。次回からは、実践的なテーマ演習を通じて進めます。
ブラウザに表示されない情報も重要
HTMLの構造は、「DOCTYPE宣言（HTMLのバージョンを示したもの）」と「ヘッダ情報」
および「コンテンツ」で構成されています。
ヘッダ情報はブラウザには表示されませんが、「ヘッダ情報」には、ページ内のデータに関する情報がメタデータとして記載されています。
「ヘッダ情報」は、ブラウザを見ている人には表示されない情報ですが、検索エンジンなどのプログラムからは、読み取ることができるため、とても重要なデータになります。
メタデータがあれば、精度の良い情報を読めるため、正確に処理することができるからです。
《メタデータ》
メタデータというのは、データや情報の説明書きのことです。いわゆる、付帯情報と呼ばれるものです。
以上のことを一般化して表現すると、次のようになります。
HTMLは、タグという文字列の追加をすると、文書は構造化されて、ネット上の有益情報になります。タグが付加されると検索エンジン等は、タグで解釈できるようになるため、検索精度などの向上につながります。
このように、プログラムを機械が読み取れる状態をマシンリーダブルと呼びます。
データがマシンリーダブルになっていると、例えば、高齢者や視覚しょうがい者などが利用するツールなどで、音声読み上げシステムにも直ぐに正確に対応することもできます。
Webページの視覚表現は、「美しい」「読みやすい」など見た目のデザイン（視覚表現）は、CSSで指定されるため、CSSも、HTMLと同様にマシンリーダブルの状態にすることが重要です。
HTMLの基本構造
html要素図HTMLの構造は、とてもシンプルで直ぐに把握できるように作られています。全体構造は、最初にHTMLのバージョンを記述、次に検索エンジンなどのプログラム向けにヘッダの情報を記載します。さらに、ブラウザで表示されるコンテンツ内容を記述すれば完成です。
もう少し、掘り下げると次のような構成と内容になっています。
- DOCTYPE宣言
HTMLのバージョンを示します。HTML5以降はシンプル表現になった。＜！DOCTYPE html＞ - html要素
html要素は、DOCTYPE宣言を除いた全ての要素が、この中に含まれます。 - head要素
head要素は、html要素の中に入る1つ目の箱で、検索エンジンやブラウザなどの機械に情報を伝えるもののため、内容は表示されません。head要素は、文書に関する情報を示す要素のことで、タイトルや、CSSの指定、文字コードなどです。 - body要素
body要素は、文書の本文のことです。見出しや段落、画像、表などの本文を作っている内容は、全てbody要素の中に記載します。これらは、ブラウザ上に表示されます。
まとめ
HTMLの全体構造を学習しました。基本的なことは、まだまだありますが、このような学習スタイルは面白くないので、この講座では、基本学習は以上で終わりにします。
次回からは、具体的なテーマ演習を通じて、実践的な学習スタイルで行います。
