：この質問に対処https://github.com/YvetteLau/Step-By-Step/issues/8
名前が示すように、セマンティックHTML5は、ヘッダー、フッターなど、ページ構造を作成するために、セマンティックタグの使用の合理化を指し意味セマンティックを、NAV、直感的にラベルの役割ではなく、虐待のdivを知ることができるラベルから。
セマンティックな利点は以下のとおりです。
- 開発を支援し、維持します読みやすいクリアコードの構造、
- パターンは負荷に失敗した場合、経験のために改善し、明確なページ構造
- その他の便利な分析装置（スクリーンリーダーなど）のセマンティクスに基づいて、ページをレンダリングします。
- エンジン最適化（SEO）を検索に資する、検索エンジンのクローラは、ラベルに応じて、異なる重みを与えられます
セマンティックタグは以下のとおりです。
- タイトル：情報は、ページの先頭を説明するために主に使用
- ヘッダ：ヘッダ定義書
- NAV：主にページのナビゲーションに使用
- メイン：文書の内容の主な規定。文書の場合、それが一意である必要があります。それは、このようなサイドバー、ナビゲーション、著作権情報、一時停止の標識として、文書内の重複コンテンツが表示されますが、含まれているか、検索フォームにはなりません。
- 記事：独立した、自己完結型のコンテンツ
- H1〜H6：カスタムタイトル
- UL：順不同リストを定義するために使用されます
- オール：順序付きリストを定義するために使用されます
- 住所：著者/所有者の連絡先情報の文書又は物品の定義。
- キャンバス：画像を描画するための
- ダイアログ：ダイアログボックスやウィンドウの確認応答を定義します
- 余談：その内容外のコンテンツを定義しています。
<aside>コンテンツは、サイドバーの記事として使用することができます。 - セクション：文書のセクション（セクション、セクション）を定義します。そのような他の章、ヘッダ、フッタ、または文書など。
- 図：別個のストリームコンテンツの規定（画像、図、写真、コード、等）。コンテンツ要素がメインのコンテンツに関連した図はずですが、それが削除された場合、それは、ドキュメントフローへの影響に対処するためではありません。
- 詳細：説明文書または文書の内容の特定の部分
- マーク：意味でテキストをマーク。
セマンティックアプリケーション
例えば、視覚的なラベルは、ページの構造は次のように構築しました：
https://www.jianshu.com/p/605386179154で再現