HTML5のアウトライン


HTML5のアウトラインについて

HTML5で重要なアウトライン(階層構造)を理解するには、セクショニング・コンテンツ(文章構造を明確にする範囲)を理解する必要がある。

セクショニング・コンテンツのタグ
〈article〉 〈section〉 〈aside〉 〈navi〉

HTML5以前はh1~h6を使ったマークアップをしていた。
HTML5ではセクショニング・コンテンツの構造自体がアウトラインを作る

以下のアウトラインをHTML以前とHTML5でマークアップすると

    1. 見出し1-1
      1. 見出し2-1
      2. 見出し2-2
        1. 見出し3-1

HTML5以前の文章構造

HTML5での文章構造

HTML5ではマークアップにh1を使ってもh1-h6をバラバラに使っても同じ意味となる。

W3CのHTML5仕様書のもの

    1. The Tax Book
      1. Earning money
        1. Getting a job
      2. Spending money
        1. Cheap things
        2. Expensive things
      3. Investing money
      4. Losing money
        1. Poor judgement

セクショニング・コンテンツを調べていると”セクショニング・ルート”という分類の要素を知っておく必要があるようだ。

セクショニング・ルートとは:セクションのルートとして扱われる要素であり、このカテゴリに属する要素は独自のアウトラインを持つ事ができる。

独自のアウトラインを持つ事が出来るセクショニング・ルート要素は以下。
<blockquote>
<body>
<td>
<details>
<fieldset>
<figure>

これらの要素はセクショニングルートの祖先には影響を及ぼさず、独自のアウトラインを持つ。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL