【HTML5】Google Chrome『HTML5 Outliner』で環境カスタマイズ

HTML

Google Chromeに『HTML5 Outliner』をインストール。
文書構造が正しく階層化されているか確認できる。

コーディング的にもユーザビリティ的にも配慮の行き届いたページ作りを心掛けたい。

構造比較でソースを複数掲載。
テキスト元『【HTML5課題18】文章を内容でわけて表示させなさい。』

まずは模範解答

<body> 
<header> 
<h1>クリスマスオーナメント</h1> 
<p>クリスマスツリーに飾られるオーナメントをご紹介します。</p> 
</header> 
<section> 
<h2>ツリートップ</h2> 
<p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されることもある。</p> 
</section> 
<section> 
<h2>クリスマスボール</h2> 
<p>光沢のあるボール型のオーナメントで、カラーが豊富。好みにあわせて選ぶことができる。</p> 
</section> 
</body>

Outlinerの表示

  1. クリスマスオーナメント
    1. ツリートップ
    2. クリスマスボール

模範解答のアレンジ・1

<body>
<header>
<h1>クリスマスオーナメント</h1>
<p>クリスマスツリーに飾られるオーナメントをご紹介します。</p>
</header>
<article>
<h1>ツリートップ</h1>
<p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されることもある。</p>

<h1>クリスマスボール</h1>
<p>光沢のあるボール型のオーナメントで、カラーが豊富。好みにあわせて選ぶことができる。</p>
</article>
</body>

Outlinerの表示

  1. クリスマスオーナメント
    1. ツリートップ
    2. クリスマスボール

模範解答のアレンジ・2（あえてダメな書き方を）

<body>
<article>
<header>
<h1>クリスマスオーナメント</h1>
<p>クリスマスツリーに飾られるオーナメントをご紹介します。</p>
</header>

<section>
<h1>ツリートップ</h1>
<p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されることもある。</p>
</section>
<section>
<h1>クリスマスボール</h1>
<p>光沢のあるボール型のオーナメントで、カラーが豊富。好みにあわせて選ぶことができる。</p>
</section>
</article>
</body>

Outlinerの表示

  1. Untitled BODY
    1. クリスマスオーナメント
      1. ツリートップ
      2. クリスマスボール

『1.Untitled BODY』の原因は<article>の直下に<header>がいるせい。
<body>直下に<header>がいれば、現れない表記。

模範解答のアレンジ・3（2のアレンジ・やはり不可の例）

<body>
<header>
<h1>クリスマスオーナメント</h1>
<p>クリスマスツリーに飾られるオーナメントをご紹介します。</p>
</header>
<article>
<section>
<h1>ツリートップ</h1>
<p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されることもある。</p>
</section>
<section>
<h1>クリスマスボール</h1>
<p>光沢のあるボール型のオーナメントで、カラーが豊富。好みにあわせて選ぶことができる。</p>
</section>
</article>
</body>

Outlinerの表示

  1. クリスマスオーナメント
    1. Untitled ARTICLE
      1. ツリートップ
      2. クリスマスボール


『1.Untitled ARTICLE』の原因は<article>の直下に<section>がいるせい。
<article>にも<h1>と<p>のセットがあれば解決。
なので、下記の例では文章を追加。
模範解答のアレンジ・4（2,3の不可部分を解消）

<body>
<header>
<h1>クリスマスオーナメント</h1>
<p>クリスマスツリーに飾られるオーナメントをご紹介します。</p>
</header>
<article>
<h1>モール</h1>
<p>ツリー以外にも、天井や壁の飾りつけに使用される。</p>
<section>
<h1>ツリートップ</h1>
<p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されることもある。</p>
</section>
<section>
<h1>クリスマスボール</h1>
<p>光沢のあるボール型のオーナメントで、カラーが豊富。好みにあわせて選ぶことができる。</p>
</section>
</article>
</body>

Outlinerの表示

  1. クリスマスオーナメント
    1. モール
      1. ツリートップ
      2. クリスマスボール

正しい階層にできたところで、おやすみなさい(=_=)