一、结构的精简

HTML5文档最简单的结构是：

结构

与传统的html相比，它更简洁

二、整体文档结构化的代表标签

headersectionfooternavarticleaside

三、文档结构和语义

1、页眉header、整个页面的头部

2、正文article、博文或者新闻的展现

3、页脚footer、一般用于呈现页面底部的相关信息，可以放在body最下面，也可以放在article的最下面，只要记住它的作用是呈现其他信息，且不能相互嵌套

4、导航nav、可以出现在header，也可以出现在footer，也可以出现在section，只要保证语义化，即用作导航功能，如配合footer就可以表示为如下形式

5、侧边栏aside、用于页面上一些与主题联系不大而相对独立的区域，通常用于边栏，例如展示以下内容：快速链接、最多访问、登录注册等

6、文档中的节section、通常表示一段专题性的内容，一般会带有标题，应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分，section可以说语义化强于div，但是弱于article，也可以这么说吧，article标签是特殊的section，section是特殊的div，语义递减。对于 section 和 article 的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体。

那么section所用到的结构可以如下几种形式：

从上面可以看出，有很多场景可以应用哪个部分，但是需要注意的是保证语义。

四、文档大纲

第三点所列的标签可以对网站的轮廓做一个总结，并不代表正确的轮廓就是这样，但可以作为参考。

当然，页面结构的设计完全取决于开发者，但是为了更好的体现HTML5的语义原理，清楚的理解每个标签所代表的语义是非常重要的。这里列出的文档结构只是一个代表，更多的新标签可以包含在小节中，比如figurevideohgroup，需要根据需求来确定。

对于使用不支持HTML5的浏览器的用户，也有解决方案：

你可以在head/head里面以评论的形式引用这样一个js(这样的评论只对IE有效(包括那些有国产IE内核的浏览器))。它托管在谷歌开源服务器上，它可以使IE8及以下版本的ie也支持那些新的html5标签(包括IE6)。

以上都必须也使用CSS来形成自己的风格。所谓语义，只是指开发者在查看页面时，可以清楚的知道页面结构，页眉在哪里，内容在哪里。