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进行相互转换，但代码的可阅读性与可维护性提升了至少一个层次。