HTML5では文書構造について、より厳密にコーディングできるようになりました。
HTML5から追加されたheaderタグやsectionタグなどを使って、そのHTMLページの見出しや目次、記事といった構成要素を明確にすることができます。
ただ、このドキュメントアウトラインはなんとなくはわかるものの、どのように使ったらいいか、どんなメリットがあるのか、わかりにくいと思います。
例えば、一つのwebページ内に見出しが複数あって、そのうちの一つの見出しの対象になる内容がどこまでなのか、2～5番目の見出しと対応する内容は1番目の見出しに対応する内容（つまり1番目の見出しは大見出しで2～5番目はその小見出し）であるとか・・・といったことを明確にすることです。
いままでも、なんとなくやっていたと思います。
なかなかに説明が難しく、だらだらと長くなってしまうので、詳細は以下のリンクを参考にしてください。
各リンク先でhgroupの説明がある場合がありますが、HTML5勧告時点でhgroupは廃止されました。
これら以外にも、ネットにいろいろ説明があります。
本当なら、w3cあたりの正式な説明を英語で読んだ方が正確なんですが、英語がわかるわからないというだけでなく、あの手のところの説明はわかりにくいと思います。
そういうわけで、有志の方々の日本語による解説はありがたいのですが、その記事が書かれた時期によっては、現在と状況が違っていたりします。
書いた人の勘違いなどもありますし、google先生に訊くときは一つの解説だけをうのみにしないで、複数の記事を読み比べて、できるだけ正確な情報を入手するように努めてください。
アウトラインを生成する要素には、article、aside、nav、sectionがあります。セクショニング・コンテント（コンテンツ）と呼ばれます。
これらを使ってwebページの内容をグループ化していきます。
他に、セクショニング・ルートと呼ばれるbody、blockquote、details、fieldset、figure、tdがあります。「自身はアウトラインを生成しますが、全体のアウトラインには影響を与えないという点がセクショニング・コンテンツと異なる点」（『HTML5 におけるアウトラインに関して簡単解説』より）だそうです。・・・よくわかりませんね。
セクショニング・ルートについては、とくにアウトラインを意識しないでも、必然的に使う要素もあったりするので、あまり気にしなくて良いでしょう（コーディングを極めたい人は気にしてください）。
注意したいのは、セクショニング要素はページのレイアウトを構成する要素ではなく、文書の意味を構造化するものなので、レイアウト目的では使用しないということです（スタイルを適用してはいけないということではないです）。
レイアウト目的（例えば左右振り分けレイアウト）でコンテンツをグループ化したいときはdivタグを使いましょう。
ちなみに、header要素、footer要素はセクショニング要素ではないので、アウトラインを生成しません。
上記のリンク先各ページにもメリットが書いてありますが、実をいうと現状即効性のあるメリットがあるわけではないです。
将来的にもユーザが直接的に恩恵を被るかというと、微妙なところです。
むしろ、最近よく耳にするビッグデータとか、データマイニングといった、データ解析技術からのマーケティング応用の場面で、アウトラインを意識したコーディングが活きてくる予定です。
文書構造を明確すると、たとえば文書のどの部分が重要であるとか、この見出しの範囲の内容はどこまでなのかとか、コンピュータ（プログラム）が正確に内容を把握できるようになり、効率的に解析（テキストマイニング）できるわけです。
現在でもコンピュータ（プログラム）が自然言語による文書を解析する技術はあり、活用されていますが、ネットの膨大な量のデータを解析するのにはそれなりの負荷がかかりますし、人間の感覚レベルでの高精度な解析ができているとは言えないです。
文書のアウトラインがあらかじめ明確であれば、この負荷を軽減できたり、文書のキモがどこなのかといった解析まで容易に短時間でできるなどといったことが期待できます。
逆に、html5より前の感覚でコーディングして、ぽちっとなとやると、自動的にアウトライン生成してくれるといいんだけどなー・・・というような妄想もできます（下にリンクはっておきますが、実はそれっぽいのはあります・・・生成はしてくれないけれども）。
ただ、量子コンピューターとかが実用化・汎用化されると、ガチャガチャの文書（htmlソース）でも、容易に解析してくれそうな気がしますが（そして正しいコードやわかりやすい文章に変換してくれると）・・・
とにかく、将来的に高精度検索エンジンやビッグデータの恩恵をうけるためには、アウトラインを意識したコーディングをやっておいた方が（たぶんきっと）良い（＝おトク）ってことなのです。
セクショニング要素の使い分けの詳細は、google先生に訊いていただくことにして、大まかにいうと
という感じです。
なお、sectionとarticleは見出し（h1～h6タグのいずれか一つ以上）が含まれているのが自然です（必須というわけではないですが、あった方が正しいという感じです）。
上の方にも書きましたが、セクショニング（・コンテント）要素はレイアウト目的で使用するものではないので、例えばhtml4やxhtmlでコンテンツ全体をwrapとかwrapperといったclass（またはid）名で囲んで左右振り分けレイアウトの親タグにするといった使い方をしていたdivタグをsectionタグに置き換えるのは間違った使い方になります。
だからと言って、sectionタグにスタイリングしてはダメだってことではないです。あくまでレイアウト「だけ」を目的にしてはいけませんよってことです。
各リンク先でhgroupの説明がある場合がありますが、HTML5勧告時点でhgroupは廃止されました。
ドキュメントアウトラインはブログとか、文章系のコンテンツと相性がいいです。
ブログのようなものであれば、わりとセクショニング要素を使うのは難しくないと思います。
しかしながら、コンテンツ的に文書構造を組み立てにくいものもあります（画像や動画中心で、内容があまりない感じのwebページとか）。
「見た目」的な構成要素として構造（レイアウト）を組み立てることは難しくないと思うのですが、「文書」構造というとheaderタグはどこからどこまで？とかnavタグは？とか、困ってしまうことが多いと思います。
そういう時は無理をせず、アウトラインのことは気にしないで組んでしまっても良いのではないでしょうか。
むしろ、正しくない構造の方が問題になるので、わかる範囲でコーディングしましょう。
実はsectionタグとか使わなくても、今まで通り見出しタグを適切に配置しておけば、暗黙的にセクショニングしていることになっていたりします。
とはいえ、正しい文書構造を意識したコーディングができることは、将来のために重要なことですから、早めに慣れておいた方が良いです。
そういうわけで、自分のコーディングしたhtmlソースのアウトラインがどういうことになってるか、確認できるツールがあります。
ページにアクセスして確認したいページのurlもしくはソースを入力して（ファイル選択もできます）、＜Outline this!＞をクリックすると、アウトラインが階層構造で（インデントがつけられて）表示されます。
各セクショニング要素のタイトルがテキスト表示されるだけですが、タイトルと階層が自分が構成した配置になっているか、確認できます。
Untitled Sectionと表示される箇所は見出しのないセクションです。見出しがなくても良いセクションであればよいですが、あるべきものには見出しを付けてください。
HTML 5 Outlinerはchromeの拡張機能としても提供されています。
使い方は上の方で紹介したページのいくつかにも記載されています。
なお、ほとんどの企業では、制作中のページは社内LANだけアクセスできるようになっていると思います。
ということは、インターネットに公開していないページは外部からアクセスできないですからHTML 5 OutlinerにURLを入力しても確認できないので、必然的にソースをコピペして確認することになると思います。
ただし、Ruby on RailsとかCMSとかでwebページを制作している場合はページを構成する部分（共通メニューであるとか、そのページのみのコンテンツファイルであるとか）をいくつかのファイルに分割しているので、コーディングしているファイルのソースのみをコピペしても正しく確認できないと思います。
そういうときは、ブラウザで確認したいテストページを開いて、ブラウザからソースを表示させて、それをコピペしてください。
ソースをコピペして確認する場合は、文字化けすることがあります。