こんにちはkentaです！！
今回はアウトラインについてお話しようと思います！
ずっと趣味や私生活のことを話してもあれなんでね。
ちゃんと勉強しているところも頑張って見せていきたいと思います笑

アウトラインって何？？

まず「html アウトライン」と調べるとこのように出てきます。

アウトラインとは、HTML文書から見出し（h1～h6要素）だけを抜き出して、文書内のセクションとその階層を示したものです。

https://techblog.istyle.co.jp/archives/3261

わかりにくいですが簡単に言うと
Webページの中身の構造をわかりやすく、見やすくしようということです。
その中にも「明示的アウトライン」と「暗黙的アウトライン」の２つがあるのでそれを解説していきます！

アウトラインってどうやって確認する？？

説明の前にアウトラインの確認の方法をお話します！！
アウトラインの確認方法は普通にコードを打つだけでは見ることができません。
なのでHTML5 Outlinerというツールを使用しましょう。
そこにファイル、URL又は直接コードを入力するだけでアウトラインがわかっちゃう優れものです。

https://gsnedders.html5.org/outliner/

明示的アウトライン

明示的アウトラインは
特定のタグを使用することで生成されるアウトラインのことを指します。
section、article、nav、asideの４つのことをセクショニング・コンテンツといい今回はそれを解説していきます！

例題その１

<section>
</section>

<article>
</article>

<aside>
</aside>

<nav>
</nav>

このようにコードをHTML5 Outlinerに入力するとこのように表示されます。

要素の外側に別のセクショニング・コンテンツが出現すると「次の内容に移行した」とみなされ、同列のアウトラインが生成されるようになっています。

例題その２

<section>
  <h1>見出し1</h1>

  <section>
  　<h2>見出し2</h2>
  </section>

  <aside>
  </aside>

</section>

<article>
　<h2>見出し2</h2>
</article>

<aside>
</aside>

<nav>
</nav>

次はこのコードのアウトラインを見てみましょう！

セクショニング・コンテンツ内に、さらにセクショニング・コンテンツが出現すると「さらに細かい内容に分けられた」とみなされ、インデントのついたアウトラインが生成されます！
今回の場合上から二個目のsectionが右にずれていますね！

暗黙的アウトライン

暗黙的アウトラインは
見出し要素使用すると自動生成されるアウトラインのことを指します。

見出し要素h1〜h6を使用すると自動的に生成されます！らくちんですね！

例題その１

<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>

これのアウトラインを表示するとこのようになります。

見出しレベルが同等以下のものが出現すると「更に細かい内容に分けられた」とみなされてインデントのついたアウトラインが生成されます！

例題その２

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

<h2>見出し2</h2>
<h3>見出し3</h3>

<h4>見出し4</h4>

次にこのコードのアウトラインを見てみましょう。

見出しレベルが同等以上のものが出現すると「次の内容に移行した」とみなされ、同列のアウトラインが生成されます！

まとめ

どうでしたか？？
アウトラインの説明は非常に難しいなと感じました、、、笑
もっと語彙力を上げたいです、、頑張ります、、笑
最後まで読んでくれてありがとうございました^^