アウトラインとは、本の目次のような構造を取ります。
以下のようなイメージです。
1.猫について
┣1-1.猫の種類
┣1-1-1.ロシアンブルー
┣1-1-2.ラグドール
┣1-1-3.メインクーン
┣1-2.猫の毛について
┣1-2-1.長毛種
┣1-2-2.短毛種
┣1-3.猫の食べ物
┣1-3-1.ドライフード
┣1-3-2.ウェットフード
こういったアウトライン構造を作るには、二種類の方法があります。
明示的なアウトライン
一つは、アウトラインを作る、body、article、aside、nav、sectionといったタグを使って、アウトラインを作っていく明示的なアウトラインです。<html>
<head><title>猫</title></head>
<body>
<h1>猫について</h1>
<section>
<h2>猫の種類</h2>
<section>
<h3>ロシアンブルー</h3>
</section>
<section>
<h3>ラグドール</h3>
</section>
<section>
<h3>メインクーン</h3>
</section>
</section>
<section>
<h2>猫の毛について</h2>
<section>
<h3>長毛種</h3>
</section>
<section>
<h3>短毛種</h3>
</section>
</section>
<section>
<h2>猫の食べ物</h2>
<section>
<h3>ドライフード</h3>
</section>
<section>
<h3>ウェットフード</h3>
</section>
</section>
</body>
</html>
暗黙のアウトライン
もう一つは、見出しのレベルでアウトラインを作る暗黙のアウトラインです。<html>
<head><title>猫</title></head>
<body>
<h1>猫について</h1>
<div>
<h2>猫の種類</h2>
<div>
<h3>ロシアンブルー</h3>
</div>
<div>
<h3>ラグドール</h3>
</div>
<div>
<h3>メインクーン</h3>
</div>
</div>
<div>
<h2>猫の毛について</h2>
<div>
<h3>長毛種</h3>
</div>
<div>
<h3>短毛種</h3>
</div>
</div>
<div>
<h2>猫の食べ物</h2>
<div>
<h3>ドライフード</h3>
</div>
<div>
<h3>ウェットフード</h3>
</div>
</div>
</body>
</html>
明示的なアウトラインも暗黙のアウトラインも、同じようにアウトラインを作ることが出来ます。
ただ、一般的には明示的なアウトラインを使う場合が多いです。
尚、明示的なアウトラインの場合、各sectionの中で大見出しであるh1を使っても問題ないことになっています。
つまり、以下のようなコードも有効です。
<html>
<head><title>猫</title></head>
<body>
<h1>猫について</h1>
<section>
<h1>猫の種類</h1>
<section>
<h1>ロシアンブルー</h1>
</section>
<section>
<h1>ラグドール</h1>
</section>
<section>
<h1>メインクーン</h1>
</section>
</section>
</body>
</html>
ただし、一部の古いスクリーンリーダーなどで、明示的なアウトラインがうまく理解できない可能性があるので、念のため暗黙のアウトラインも合わせて使用するのが推奨されているようです。
つまり、セクショニングのタグを使ってアウトラインを作りつつ、見出しのレベルも揃えるのが良いとされています。
