在HTML5中新增了很多语义标签概念，使HTMl文档根据页面内容结构选择语义标签，是页面结构内容格式化。它有利于清楚的描述HTML文档的意义给浏览器和开发者。下面列举了一些我们常用到的语义标签：
section元素 表示页面中的一个内容区 块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中<section>……</section>；HTML4 中<div>……</div>。
article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。
aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。
header元素 表示页面中一个内容区块或真个页面的标题。
hgroup元素 表示对真个页面或页面中的一个内容区块的标题进行组合。
footer元素 表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
nav元素 表示页面中导航链接的部分。
figure元素 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用
figcaption元素为figure元素组添加标题。
到这里你可以能对如何对HTML页面语义化还是一直半解。下面我们就来通过一个具体的页面结构进行说明。
今天你的leader兴致冲冲地找到你，希望你可以帮他一个小忙，他现在急着要去开会。要帮什么忙呢？你很好奇。
他对你说，公司打算做一个公司主页，让你设计下这个页面的基本结构。
这个任务很简单嘛！你爽快的答应了，然后你就自己设计出来如下图所示的页面基本结构布局。
好了，完工！你自信满满。
你的leader过来看了下你的成果。总体来说，他还挺满意。但是他说从你设计的网页布局中我们视觉正常的人可以直观的看到页面的布局，并获取页面的内容信息。
但是屏幕阅读器或者搜索引擎无法获取准确获取页面的内容信息和内容相互之间的关系。
这样的设计是正确的但是还可以进行改进。
于是他百忙之中抽出一点时间对你的网页布局做了改进
• 在你的设计的布局中加入了一些HTML5中的语义元素，这样无论是人还是机器都可以很轻松的从设计布局中读取到相关信息了。这样的设计是不是更合理呢？这样做的好处有：
1、将构造HTML页面内容语义元素一起使用，可以将HTML内容分成明确的几个区域。
2、建立区域关系后的页面，对于人或者机器，都更具有可读性。而且，这也有利于搜索引擎访问页面。
3、建立区域关系后的页面，也有利于网页风格的一致性。
这些都是HTML5的基础知识，在教程网站秒秒学中有很多关于这些知识的讲解，推荐你可以去看看。
早在 2013 年， <main> 元素就被正式添加到 W3C HTML 规范中，到目前为止，关于该元素的定义已经很完善了，所以现在是时候深入了解什么时候适合使用 <main> 元素了。那么，下面就开始吧。
<main> 的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。 W3C 规范将 <main> 描述为 ：
自从 <main> 元素包含在 HTML 规定里之后， <body> 元素就还原成了它在 HTML4 中的定义。
使用 <main> 元素值得注意的一点是，它在每个页面中只能使用一次。为什么要规定一个页面只能使用一次呢？虽然我对具体的细节并不感兴趣，但是有些观点看起来还是比较有意义的。
按照规格，如果你在一个文档中试图使用多个 <main> 标签，那么 W3C validator 会抛出错误。
<main> 元素的另外一个规定是，它不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点。
就像其它的 HTML5 新元素一样，并不是所有的浏览器都能够识别出 <main> ，并且给它加上预设的样式，你可能需要在自己的 CSS 文件中将它设置为块级元素。
有的时候，为了支持一些较低版本的 IE 浏览器，你可能还需要使用 JavaScript 创建该元素。
当然了，你还可以使用 html5shiv .
使用 <main> 元素最简单的方式就是去替换那些 ID 或者 Class 值为 main 或者 content 之类的 <div> 元素。
所以，在实践中它应该是什么样子呢？下面是使用 <main> 元素之前的文档结构。
下面使用 <main> 元素改写文档。
好了，这是如此的简单，以至于一分钟不到我们就可以将文档改写成新潮的 HTML5 样式。
正如你所见的，使用 <main> 元素是超级简单的，只需要花费几分钟的时间，所以现在真的到了将 <main> 带入到网站开发的过程中了。
