以下は、自身がフィヨルドブートキャンプのカリキュラムで学んだ内容をメモしたものになります。
元の著者が表現したい内容を歪めている可能性もあるので、詳しくは参考文献をご確認ください。また、フィヨルドブートキャンプ独自のコンテンツで学習したメモもあるので、気になった方はご参加いただければと思います。

参考文献

極！HTML5アウトライン

HTMLのアウトライン

アウトラインってなんだ

文章の階層構造のこと。

好きな食べ物

麺類

ラーメン

丼もの

カツ丼

上記文章を階層構造にすると、

- 好きな食べ物
  - 麺類
    - ラーメン
  - 丼もの
    - カツ丼

このようなツリー構造をアウトラインという。HTMLの骨組みのようなイメージ。

アウトラインをHTMLで表現する

表現方法は2種類ある。暗示的に表現するか、明示的に表現するか。

なお、直接階層構造によって読み手側の読むという体験が変化するわけではなく、あくまでブラウザ側が与えられた情報をどう解釈するかという話である。
しかしアウトラインがよく整理されたHTMLは、開発において扱いやすい構造になり、SEOなどシステム側にわかりやすく解釈してもらい、ひいてはHTMLを利用する読み手側にとってのメリットになりえるものである。

暗示的に表現

hタグである見出し要素を使うことで、ブラウザ側に構造を暗示（暗黙）し、ブラウザがアウトラインを勝手に解釈してくれる。
これはh1~6の数値（レベル）を使い分けることによって成り立つ。

<h1>好きな食べ物</h1>
<h2>麺類</h2>
<h3>ラーメン</h3>
<h2>丼もの</h2>
<h3>カツ丼</h3>

上記のようにhタグのhレベルによって、ブラウザがアウトラインを以下のように解釈する。

<h1>好きな食べ物</h1>
<section>
  <h2>麺類</h2>
  <section>
    <h3>ラーメン</h3>
  </section>
</section>
<section>
  <h2>丼もの</h2>
  <section>
    <h3>カツ丼</h3>
  </section>
</section>

明示的に表現

セクショニング・コンテンツであるarticle、section、asideといった要素で入れ子構造を明示的につくることで、アウトラインをブラウザに解釈させる。

<!-- 上に書いたHTMLと同じ -->
<h1>好きな食べ物</h1>
<section>
  <h2>麺類</h2>
  <section>
    <h3>ラーメン</h3>
  </section>
</section>
<section>
  <h2>丼もの</h2>
  <section>
    <h3>カツ丼</h3>
  </section>
</section>

現在のHTML5の仕様ではセクショニング・コンテンツの中のhレベルはすべてh1でも書ける。

注意点

hレベルと重要度は無関係

hレベルと文章においての重要度は別の概念なので、重要度によってhレベルを上げ下げするとアウトラインを歪めてしまうので覚えておくこと。

暗示的な表現では最大レベルのhタグは一つでないといけない

暗示的にアウトラインを表現する場合、ブラウザの解釈に判断を委ねるわけだが、最大レベルとなるhタグが複数存在すると狙った通りのアウトラインにはならない。

<!-- bad -->
<section>
    <h2>見出し★</h2>
    <h3>見出し</h3>
    <h2>見出し☆</h2>
</section>

その他

HTML5では、bタグは太字を表すものではなくなった。文章内のキーワードや製品名など、他と区別したいテキストに用いる。
参考URL - http://www.htmq.com/html5/b.shtml

OREMATOPEE

プログラミング、気になったこと、メモ書き...etc

HTMLの文書構造