HTML5容器元素概览

随着HTML5的快速发展，现在HTML的应用不仅讲究布局的美观性与合法性，还越来越注重编码的语义性，传统页面中满是div元素的编码风格正逐渐被淘汰，取而代之的是更具语义性与自身行为的元素。

1. main

必须应用于文档或程序最主要内容或功能，一般来说每个页面只有一个main元素。

<main class="container">
   <!-- 可嵌入子元素 -->
</main>

2. article

它代表一个独立的、完整的相关内容块，具有强语义性，并能自我嵌套，例如博客文章中包含的评论。

<article>
    <!-- 标题区 -->
    <header>
    </header>
    <!-- 内容区 -->
    <p>
    </p>
    <!-- 脚注区 -->
    <footer>
    </footer>
    <!-- 评论区 -->
    <article class="comments">
    </article>
</article>

3. section

它表示一段专题性的内容，一般会带有标题，例如文章中的章节，适合于模块化的内容。

<section>
    <header>
    </header>
    <p>
    </p>
    <p>
    </p>
    <footer>
    </footer>
</section>

4. aside

它表示一块与主题内容无关的边栏，多用于表示标注、左右工具栏或者广告。

<aside>
    <header>
    </header>
    <p>
    </p>
    <footer>
    </footer>
</aside>

5. nav

它包含了文档或文章的主要链接，可以导航到其他文档或文件，多用于菜单与工具栏。

<nav>
    <a>
    </a>
    <a>
    </a>
</nav>

6. footer

它代表一个模块的底部，具有强语义性，可应用于body、article、section、nav等各类容器，并可以自嵌套。

<section>
    <header>
    </header>
    <p>
    </p>
    <p>
    </p>
    <footer>
    </footer>
</section>

7. header

它代表一个模块的头部，具有强语义性，可应用于body、article、section、nav等各类容器，并可以自嵌套。

<section>
    <header>
    </header>
    <p>
    </p>
    <p>
    </p>
    <footer>
    </footer>
</section>

8. figure

它用于组合与主题内容无关的相关信息，多用于文章的引用信息、代码片段与快照，多与figcaption一起使用。

<figure>
    <figcaption>
    </figcaption>
    <pre>
    </pre>
</figure>

9. dialog

它用于表示对话框，并提供了show、showModal、close等API。

<dialog>
    <button>确认</button>
</dialog>

10. details

它用于表示概要信息，多与details一起结合使用，能轻易实现收起与展开效果。

Details 它用于表示概要信息，多与details一起结合使用，能轻易实现收起与展开效果。
<details open>
    <summary>查询结果1</summary>
    <p>查询结果1</p>
    </details>
<details>
    <summary>查询结果2</summary>
    <p>查询结果2</p>
</details>    

从浏览器的渲染效果来看，虽然这些容器元素大多与div表现相同，都是块状元素，并且可通过CSS与div进行相互转换，但代码的可阅读性与可维护性提升了至少一个层次。