HTMLの基本構造
ドキュメントタイプの宣言
はじめに、HTMLの基本構造と
ドキュメントタイプはHTML文書の一番最初に記述され、そのHTML文書がどのバージョンで書かれ、どのDTD（Documtnt Type Definition 文書型宣言）が使われているかをせんげんするものです。
ブラウザはこの宣言に従ってページを表示します。
DOCTYPEの宣言は、HTML5が正式に勧告される前のHTML4.01では
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
のように記述していましたが、HTML5でのDOCTYPE宣言は、、
<!DOCTYPE html>
のようにシンプルな記述に変わりました。
HTML文書の記述
<開始タグ>～<終了タグ>の中に内容（コンテンツ）を記述する事になります。
<br>のように<終了タグ>が無くコンテンツを持たない～要素も有ります。
基本構造
HTML文書では、html要素の中には、子要素には、head要素とbody要素しか入れることが出来ず、しかも、一つずつしか置くことが出来ません。
<html> <head> meta要素、link要素などのページに関係する情報を入れる。 </head> <body> ブラウザなどで閲覧するコンテンツを入れる。 </body> </html>
head要素の中にはドキュメント全般の情報（メタデータ）を内包する要素で検索エンジン向けのキーワードや内容の説明文、CSS、文字コード情報などを記述する場所でブラウザには表示されません。
body要素の中にはブラウザなどに表示させたいページのコンテンツ（内容）を記述されます。
htm要素、コンテンツを構成するすべての要素はルート要素であるこのhtml要素の中に配置されます。
html要素はグローバル属性をサポートしているのでグローバル属性のlang属性（ドキュメント言語の指定）は、ここで指定されることが多い。
<html lang="ja"> </html>
要素の分類（コンテンツモデル）
HTML5では以前のバージョンのHTMLとでは、要素のしかたが変わっています、以前のバージョンでは要素をブロック要素とインライン要素と言うカテゴリーで分類していましたが、HTML5ではブロック・インラインと言う分類は廃止されて、新しいカテゴリーで分類されています。
新カテゴリー分類
| メタデータ･コンテンツ | 文書のメタデータや他の文書との関係を記述する要素 セマンティックが主としてメタデータに関連する他の名前空間由来の要素（たとえば、RDF）も含まれる。 |
|---|---|
| フロー･コンテンツ | 文書およびアプリケーションのbodyで使用されるほとんどの要素 |
| セクショニング･コンテンツ | 文章の見出し及びフッターの範囲を定義する要素。 セクショニングコンテンツ要素は潜在的に見出しとアウトラインを持っている。 |
| ヘディング･コンテンツ | セクションの見出しとなる要素 |
| フレージング･コンテンツ | 文書のテキストとその段落内での記述のために使用される要素 |
| エンベデッド･コンテンツ | 画像や映像を表示したり、音声を再生したり、特定のオブジェクトを文書内に組み込むための要素 |
| インタラクティブ･コンテンツ | 閲覧者の操作や入力の対象となる要素 |
| セクショニング･ルート | セクションの始まりとなる要素 |
セクショニングコンテンツ
( body , article , aside , nav , section )
セクショニングコンテンツの要素ではヘディングコンテンツの最初の要素は、そのセクションの見出しとなる。同ランク以上の後続の見出しは新しいセクションの始まりとなり、低いランクの見出しは前のセクションの一部であるサブセクションの始まりとなる。
新しいセクションまたはサブセクションの見出しに使用する場合を除き、小見出し、字幕、代替えタイトル、キャッチフレーズをマークアップするために、h1-h6要素を使用してはいけない。
section要素
この要素は文書やアプリケーションの一般的なセクションで有ることを表していて、主題となるコンテンツのグループになる。
各secitionの主題は子要素として見出し要素を含むことで一般的に識別されます。
section要素を汎用コンテナとして使用してはいけない、スタイリングの為のブロック要素が必要なときは<div>が適しています。
article要素
この要素は自己完結（セクション内で１つの記事として終わっていること）するセクションで有ることを表しています。
article要素がネストしている場合は、原則的に内側のarticle要素は外側の記事に関連した記事で有ることを表しています。
article要素に関連づけられたaddress要素の参照は、ネストされたarticle要素には適用されません。
article要素とsection要素、どちらを先に書くかという優先順位は無く、内容（コンテンツ）によって変わってきます。また、複数ページに分かれているコンテンツはarticle要素では無くsection要素を使う方が良いと思います。
aside要素
メインコンテンツとの関係性はあまりなく、メインコンテンツとは切り離すことのできるセクションで有ることを表しています。
この要素はリード文またはサイドバー、nav要素のグループ、広告など、そのページのメインコンテンツとは別物と考えることができる、他のコンテンツに対して使うことができます。
nav要素
サイト上の主要ナビゲーション(他のページやページ上の他の部分)で有ることを表しています。
ページ上に複数は位置しても良く、ページ上にグローバルナビゲーションとローカルナビゲーションが有る場合には、どちらも主要ナビゲーションになるので両方ともnav要素を使うのは適当ですが、ページ上の全てのリンク集合に使うのは誤りです。
セクショニングルート
( body , blockquote , details , fieldset , figure , td )
セクショニングルートはそれ自体がアウトラインを持っていて、その内部のセクションと見出しは、祖先のアウトラインには影響を与えず、そのセクショニングルート内で完結します。
body要素
body要素は文書の論理的なセクショニングルートになり、HTML文書の中に1つだけしか配置できません。
その他のセクショニングルート要素
body要素以外のセクショニングルートになる要素は、自分自身のアウトラインを持つことができますが、これらの要素の中にあるセクションと見出しは、祖先のアウトラインに影響しません。
アウトライン
アウトラインとは文書の見出しレベル等で生成される階層構造のことを指しています。
従来は見出し要素を使て暗黙的生成されていたものをHTML5では、セクショニングコンテンツの<section>タグを使って明示的に柔軟なアウトラインを生成します。
次の2つの文書はセマンティックに同じなので、適合ユーザーエイジェント（ブラウザ）で同じアウトラインを作ります。
<body>
<h4>リンゴのこと</h4>
<p>リンゴは果物です</p>
<section>
<h2>リンゴの味は</h2>
<p>甘くて美味しい</p>
<h6>その甘さは</h6>
<p>赤いリンゴの方が緑のリンゴより甘い</p>
<h1>リンゴの色</h1>
<p>緑から赤に徐々に変化する</p>
</section>
</body>
<body>
<h1>リンゴのこと</h1>
<p>リンゴは果物です</p>
<section>
<h2>リンゴの味は</h2>
<p>甘くて美味しい</p>
<section>
<h3>その甘さは</h3>
<p>赤いリンゴの方が緑のリンゴより甘い</p>
</section>
</section>
<section>
<h2>リンゴの色</h2>
<p>緑から赤に徐々に変化する</p>
</section>
</body>
上記２つのコードのアウトラインは
1. リンゴのこと
1.1 リンゴの味は
1.1.1 その甘さは
1.2 リンゴの色
の様になります。
セマンティックとは
セマンティックとは”意味”とか”意味論”を指す言葉ですが、HTMLでは言葉の意味とか文章の意味などを指しているのでは無く、文書構造的なことを指しているのだと思います。その意味で上記2つの例は同じアウトラインとなり、セマンティックに同じになります。
※ アウトライン構造の分析はこちらでできます。