東京のウェブマーケティング会社（ウェブ制作、集客、見込み客開拓・育成） 株式会社グルコム
私たちは、2007年創業17年900サイト以上の実績がある会社
当社ウェブサイトへようこそ！ホームページは制作する時代から、集客する時代へ。そして、現在では、集客した見込み客を育成する流れを作るのがホームページの役割です。制作・集客・育成に関するご相談はこちらからご連絡ください。
東京のウェブマーケティング会社（ウェブ制作、集客、見込み客開拓・育成） 株式会社グルコム
当社ウェブサイトへようこそ！ホームページは制作する時代から、集客する時代へ。そして、現在では、集客した見込み客を育成する流れを作るのがホームページの役割です。制作・集客・育成に関するご相談はこちらからご連絡ください。
HTML5のセクションとアウトラインについてはHTML5.jpさんの見出しとセクションという記事にて詳細に解説されていますが、とても厳密に定義の説明をされている（記事を翻訳してくださっている）ので、「ざっくり」と理解するのが少々大変です。そこで、HTML5のセクションやアウトラインについて「ざっくり」とした説明を試みてみます。念のため申し上げますと、深く理解しようとされるのであれば上記のHTML5.jpさんをご覧ください。HTML5について広範囲な情報を扱っていらっしゃいます。
さて、姑息な言い訳も済ませましたので、早速説明していきたいと思います。
“アウトライン”とはその名の通り「輪郭」を意味します。文書のアウトラインですから、「あらまし」となります。例えば、おおまかな構成を考えて、見出しを付けてから中身を書いていく、というような文書をイメージしてください。
このように見出しとその順番や関係など文書の「輪郭」がアウトラインです。
先ほどのアウトラインを別の表現にすると以下のようになります。
この四角い「箱」が“セクション”です。セクションは“セクショニング・コンテンツ”に分類されたHTML要素によって作られます。セクショニング・コンテンツに分類されるHTML要素はARTICLE要素、ASIDE要素、NAV要素、そしてSECTION要素があります。
セクショニング・コンテンツは見出しを持ちます。見出しは“ヘッディング・コンテンツ（要はH1〜H6要素）”によって表されます。上記アウトラインをSECTION要素とH1〜H6要素で擬似的にマークアップすると以下のようになります。
セクショニング・コンテンツとは別に、“セクショニング・ルート”に分類されるHTML要素もあり、BLOCKQUOTE要素、BODY要素などがあります。セクショニング・ルートは「アウトラインを持つことができる」要素のことで、BODY要素のように「セクションで区切られたアウトライン」を持つことができますが、それ自体はセクショニング・コンテンツとはなりません（内部処理的にはセクションを作りますが、分類としてはセクショニング・コンテンツではありません）。また、BLOCKQUOTE要素のようにセクションがセクショニング・ルートを持つこともありますが、外側のアウトラインと内側のアウトラインは別ものになります。
例えば、以下は先ほどの例にセクショニング・ルートを追加したものです（太い枠線がセクショニング・ルートとなります）。BLOCKQUOTE要素による引用が追加され、それぞれの引用部分内に見出し（H1要素）がありますが、これらの見出しはBODY要素をセクショニング・ルートとするアウトラインには影響しませんので、BODY要素のアウトラインは冒頭のリストと同一になります。
H1〜H6の見出し要素（ヘッディング・コンテンツ）には、それぞれ“ランク”が設定されます。ランクはH1要素が最も高くなり、H6要素が最も低くなります。
ヘッディング・コンテンツのランクは文書全体ではなくセクションと結びつきます。ですから、セクションが明示的であれば以下のようにすべてH1要素で記述しても問題はありません。
同一セクション内にランクの異なるヘッディング・コンテンツが存在する際は、暗黙のセクションが作られます。先ほどの例を、今度はヘッディング・コンテンツのランクを利用することでSECTION要素を省略する記述にしたものが以下になります。
SECTION要素で明示的にセクションを作る記述と、ヘッディング・コンテンツのランクで暗示的にセクションを作る記述の、どちらも妥当な記述ですが、その両方が混在するような記述は（とても解り辛いので）避けるべきでしょう。
私たちは、2007年創業17年900サイト以上の実績がある会社です。 グルコムでは、集客から見込み客の開拓・既存客との関係構築・維持、土台であるウェブ制作まで、一気通貫できる視野・サービスを提供できることが強みです。
