Web Survive

Webで生きる道を模索するブログ

HTMLの構造

HTMLは「文書型宣言」「html要素」の2つのブロックで構成されています。
さらに、htm<要素のなかは「head要素」「body要素」の2つに分かれます。

HTMLの全体像

html-structure-overall-picture

文書型宣言(HTMLのバージョンを示す)

文書型宣言は、そのページがどのバージョンのHTMLに基づいて制作されるかを示すものです。

HTMLにはいくつかのバージョンがあり、
どのような要素・属性が使えるかがバージョンごとに微妙に異なるため
どれに準拠するかをきちんと宣言しておく必要があるからです。
どのバージョンのHTMLを採用するかは
Webサイトの目的や方針によって異なりますが、
現状はHTML5が一般的となってますので、HTML5での制作をオススメします。

html要素(ルート要素:最上位要素)

html要素は、ページのルート要素(すべての基点となる最上位要素)です。
子要素にhead要素とbody要素を置き、
これらの要素のなかに具体的な内容を記述することになります。
HTMLの要素は、このようにhtml要素をルートとした
ツリー構造になっているのがポイントです。

head要素(ページの基本情報)

html要素の子要素であるhead要素の範囲には、「そのページの基本情報」を含めます。
ブラウザでは基本的に表示・表現されない部分です。
ページタイトルを指定するtitle要素、
メタ情報(そのページ全体に関わる基本データ)を指定するmeta要素、
文書関係を指定するlink要素などを含めます

body要素(ページの本文)

body要素には「ページの本文」を書きます。
ブラウザで表示・表現される部分であり、
具体的なコンテンツはbody要素に含めます。

見出しを意味するh1〜h6要素、コンテンツのおおまかな範囲を示すdiv要素、
段落であるp要素、リストを定義するul要素やol要素
表(テーブル)を示すtable要素、フォームを定義するform要素など、

本文を構成するさまざまな要素を含めます。

ブラウザではbody要素の内容を自動的に読みやすい状態で表示してくれます。
例えば乱しを太字で大きめのサイズで表示してくれたり、
リストの先頭にマーカーをつけてくれますが、
そのままでは多くのユーザーにとって魅力的ではないため、
CSSを使って読みやすさやデザイン性を向上させます。