html5の要素の使い方と、「sanitize.css」のリセットについて検証しています。
※このページはデモというよりただのソースサンプルです。
<header>の中に色々文章とかあっても良い。
<header>は何回出てきてもよい。（親要素に対するheaderという扱いになる。）
ナビゲーションは<nav>でくくる。
<nav>も何回出てきてもよい。（親要素に対するnavという扱いになる。）
main要素は、ドキュメントの中にひとつだけ。これはmainブロックの本文です。
article要素は、ひとつのブログ記事のように、それだけで完結する内容のまとまり。articleの中に、<section>が入っていても良い。
articleの中に<header>や<footer>が入っていてもよい。（そのarticleのheader、footerという扱い。）
sectionは章や論文のような番号付きのセクションなどに利用する。
articleとの扱いが分かりにくいが、articleは「単独で再配布でき再利用できる」カタマリだそう。概念としては、articleの中にsectionが入ることはあっても、sectionのなかにarticleが入ることはなさそう...？
有用なデフォルトのスタイルは維持しつつ、各ブラウザの差異をなくすタイプのリセットCSS。セレクタを見るにhtml5を対象としておりモダンブラウザとスマホ対象のよう。（レガシーブラウザには合わない。）
「ul」は、ちゃんとリスト表示になっているがulのパディングがリセットされている。（親要素がoverflow:hiddenだと黒丸のところが消えてしまう。）
「ol」も同じく、ちゃんと番号リスト表示になっているがulのパディングがリセットされている。
「nav + ul」、「nav + ol」は、さらに「list-style: none;」なので何も出ないようになっている。
画像の位置は「vertical-align: middle」。垂直中央に揃えられる。（audioやvideoも同様。）
<sup>要素[上付き文字]<sub>要素[下付き文字]は、文字サイズは等倍だが位置は生きている。