HTML5的强大功能中很重要的一面是信息的映射——也可以说是内容块化（contentblocking）。将你所需要处理的信息模块化，你会发现整个设计思路特别的清晰而顺畅。
设计前，考虑一下你的网页上需要有什么？在HTML5页面的设计中，页面一般包含以下几个区域1、一个Header区2、一个Navigation区3、一个包含了三个Section区和一个Aside区的Article区4、一个Footer区。
Haeder区：（页面标题和副标题）Header区的例子包含了页面标题和副标题，header标签被用来创建页面的Header区的内容。除了网页本身之外，header标签还可以包含关于section和article的公开信息。这里创建的网页有该页面的一个Header区，这在高层设计中有给出，以及一个位于Article和Section区内部的Header区。
示例1.header标签的例子（把下面代码复制到文本文档中，把后缀名改为首页.HTML）headerh1标题文字/h1p文本或是图像可放在这里/ppLogo通常也放在这个地方/p/header
Navigation区（导航区）nav标签来创建页面的Navigation区。nav元素定义了一个专门用于导航的区域，nav标签应该用做主站点的导航，而不是用来放置被包含在页面的其他区域中的链接。
示例二：（把下面代码复制到文本文档中，把后缀名改为nav.HTML）navulliahref=#kesrc=#Home/a/liliahref=#kesrc=#AboutUsa/liliahref=#kesrc=#OurProducts/a/liliahref=#kesrc=#ContactUs/a/li/ul/nav
Article和Section区：（存储了页面的实质内容）section标签也可以包含article标签，就像article标签可以包含section标签一样。section标签应该用来分组相类似的信息，而article标签则应该是用来放置诸如一篇文章或是博客一类的信息，这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。
示例三：（把下面代码复制到文本文档中，把后缀名改为article.HTML）articlesection内容/sectionsection还是内容/section/articlesectionarticle内容依旧/articlearticle好吧，还是内容/article/section
Footer区：元素包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或是日期。作为页面的页脚，其有可能包含了版权或是其他重要的法律信息
示例四：（把下面代码复制到文本文档中，把后缀名改为footer.HTML）footerpCopyrightAcmeUnited.Allrightsreserved./p/footer