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