HTMLの基本構造をはじめての人にわかるように解説

html基本構造

HTMLの大まかな構造

html基本構造

基本の構造を見ていきます。DOCTYPE宣言からはじまり<HTML><HEAD><BODY>と言う形になるのが一般的です。

DOCTYPE宣言

<!doctype html>

この文書がHTML5だと言う事を伝えるのがドキュメント宣言です。

HTMLであること、バージョン情報を宣言しています。今回はHTML5の宣言です。HTMLの違うバージョンだと違う書き方になります。HTML4まではすごく長い宣言をしていたのですが、HTML5になってからすごく簡単な宣言で済むようになりました。

HTML4.01の時

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTMLである事、バージョンは4.01である事。どの定義のDTDに基づくか。を宣言していましたがHTML5ではすごく簡単な宣言で済むようになりました。

html要素

htmlタグはHTMLの文書であることを表します。HTMLタグと言う箱を作ると思ってもらえるとわかりやすいですね。HTML要素の箱の中にはheadタグの箱とbodyタグの箱が入ります。HTML要素の箱が一番大きい箱なのでHTML要素の中に全ての要素を入れます。

headタグ

headタグはwebサイトを見に来る人が直接みる場所ではありません。訪問者が直接見る情報は全てbodyタグに書きます。headタグにはブラウザや検索エンジンに対して情報を提供したり指示を出します。具体的にはmetaタグとlinkタグを入れます。

metaタグ

metaタグは文字コードの指定やブラウザでどう表示させるのか、検索エンジンへインデックスをするのかどうかなどの指定をします。

linkタグ

linkタグはCSSと言うwebサイトのデザインを担当するファイルの読み込みw指定したり、ページ同士の関係性を検索エンジンに伝えたりします。

bodyタグ

bodyタグの中にはheaderやfooterタグを書きます

bodyタグにはすべての目に見えるコンテンツを書きます。webサイトに関わる人がたくさんの時間を費やす場所です。headerタグやfooterタグなどをbodyタグの中に書いて行く事になります。

骨格を作る時に使うタグは上の図のようなタグを使います。骨格ができてからコンテンツを作って行く事になります。

HTML5のコンテンツモデル

HTML5のコンテンツモデル。

HTML5はコンテンツモデルと言う考え方が導入されています。どの要素の中にどんなコンテンツを入れていいのかの分類方法のルールです。

7つのカテゴリに分類

HTML5のコンテンツモデルは7つのカテゴリに分類されます。

  • メタデータコンテンツ
  • フローコンテンツ
  • セクショニングコンテンツ
  • ヘッディングコンテンツ
  • フレージングコンテンツ
  • エンベディットコンテンツ
  • インタラクティブコンテンツ

詳しく分かるとすごく分かりやすいのですが分かりにくくなるのが必ずしも一つのタグが1つのコンテンツじゃないと言うところです。
imgタグは「フローコンテンツ」「フレージングコンテンツ」「エンベッディッドコンテンツ」「インタラクティブコンテンツ」の4つのコンテンツに属してます。

逆にarticleタグは「フローコンテンツ」1つのコンテンツに属しています。

具体的なコンテンツモデルの例

<!-◎正しい>
<article>
 <section>sectionタグのカテゴリはセクショニングコンテンツまたはフローコンテンツです</section>
</article>

<!-×間違ってる>
<article>
 <title>タイトルはメタデータコンテンツです。</title>
</article>

articleタグはフローコンテンツです。sectionタグはセクショニング・コンテンツ orフロー・コンテンツなので上は正解です。

下は間違いです。titleタグはメタデータコンテンツでarticleタグの中に配置する事はできません。

まとめ

  • HTMLファイルの基本はhtml、head、bodyです。
  • headは検索エンジンやブラウザに情報提供や指示を出すところ
  • bodyは訪問者が見える情報があるところ
  • webページの基本構造はheader、contents、sidebar、footer
  • HTML4はブロックレベル要素とインライン要素
  • HTML5ではコンテンツモデルが導入されている

[ホームページ製作] dilection

カスタマイズサイトやオリジナルサイトの製作をしています。個人や小規模のサイトから中規模サイトの運営の相談まで受付しています。

[ホームページプラスデザイン] service

初期費用0円からスタートできる総合デザインの定額プランです。webやデザイン担当者を雇うより圧倒的なコスパと質です。

[プライベートレッスン] school

Wordpress、HTML5、CSS3でのWebサイト運営のプライベートレッスンから数人から十数人までのSchool、Kidsプログラミングスクールまで。