Html5语义化标签的启示

语义化标签，顾名思义也就是可以直接读懂的标签。最早接触HTML5的时候，对HTML5的语义化并没有太深的理解，只是对Html几个新增的功能很感兴趣，比如画布；Html5的语义化标签，header，footer
，nav等，这些本质上就是Div，在html4时代，我们用div id="header","footer"，也能漂亮地完成header、footer这些标签相同的效果，html5为什么要多此一举把这些div单独分离出来作为新的标签呢？

专注内容与结构

在HTML5之前，DIV+CSS实际上就能很好渲染出一个web页面。HTML5已不仅仅满足于怎样将一个网页表现出来了，而是更加专注网页的结构，更加务实地关注网页的内容。
我们用div来表示页面元素，但是这些div都没有实际意义。为了区分不同的结构，我们往往给这些div设置不同id，ID名称标记了这个Div负责的区块。而HTML5则为这些不同的区块创造不同的标签。
我们浏览过成千上万的网页，或看新闻，或听音乐，或看视频，最终你发现其实发现千万个网页实际上有着大同小异的结构：导航条、标题、内容、底部，几乎“万变不离其宗”，html5干脆使用不同的语义化的标签来各司其职地代表网页的不同部分。当使用了这些语义化的标签后，可以帮助你更好地理解网页的框架。
即使在没有CSS的情况下，HTML页面也能呈现出很好地内容结构、代码结构。

Paste_Image.png

** 我们来回顾几个HTML5几个语义化标签：**

• 1):article标签:装载显示一个独立的文章内容。
  例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。
  例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。
• 2):section 标签:定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
• 3):aside 标签: 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。
• 4):hgroup 标签:用于对网页或区段的标题元素（h1-h6）进行组合。
  例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

• 5):header 标签:定义文档的页面组合，通常是一些引导和导航信息。
• 6):footer 标签:定义 section 或 document 的页脚。
  在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
  实例:
  <footer> © 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>
• 7):nav 标签:导航链接放在nav标签里。
  nav标签里应该放入一些当前页面的主要导航链接。
  例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。
• 8):time 标签:定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
  该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果
• 9):mark 标签:定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
• 10):figure标签:规定独立的流内容（图像、图表、照片、代码等等）。
  figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
• 11):figcaption 标签:定义 figure 元素的标题（caption）。

语义化标签的默认CSS

语义化标签不是html5的“专利”，比如html5之前的h1、h2等等就是语义化标签，他们表示几级标题；虽然我们在html没有引入任何css时，我们仍然可以看到h标签有字体放大加粗的效果。
实际上，html本身是没有表现的，我们看到例如 h1标签是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

浏览器默认的CSS

模块化，便于团队开发和维护

不同的语义化标签实际上为我们将网页划分了不同的模块，结构分明更利于分解模块，利于团队的合作和维护。或者当你自己审查元素的时候，当你看到“header”是自然知道这应该是网页的头部，你进入这个标签可能还会发现一个nav标签，你会很快联想到这是个导航条。你可以迅速顾名思义让自己或他人知道网页的结构，而不是看见一堆div让自己头大。

不同标签，其内容可能有不同的关注度

一个网页有不同的部分，但是不一定每一部分都是你感兴趣的，比如当你看到我写的这边文章时，你可能更加关注我的文章内容，可能不那么关注我叫什么名字，不会关注我有多少个粉丝。更夸张一点，当你看到一段精彩的电影时，不会关注旁边弹出的膏药一样的广告，相反广告只会让你恼怒。不同的语义化标签，实际上分割了不同的内容。

语义化标签更加标准化，让机器更懂HTML

读到上面的时候，你可能会说，用户看网页的时候，一般不会像那些程序员哥哥那样强迫症般地查看源代码来看看用了那些语义化标签（程序员哥哥。。。不好意思，好像说的是我自己），谁知道不同的模块，用了哪个语义化标签。对于人来说，不管你是语义化标签还是div，看到的都是活生生的、渲染好的网页啊！
其实，语义化标签，或许并不是给人看的（没有骂程序猿GG的意思），可能还是机器看的。
讲个例子，极客人在使用wordpress时装过一个为文章生成目录的插件。这个插件的原理就是遍历文章提取内容中的h标签，然后生成目录。实际上就是通过识别语义化标签的方式提取内容。
再讲一个类似的但是不是通过识别语义化标签的例子， 见过别人用过一些爬虫插件，就是把别人家网站的博客内容抓下来然后发布到自己的博客上，原理是需要在后台输出要抓取网页的网址，然后过滤网页内容中div的class属性来把文章的导航链接（往往是目录链接）、内容页分离出来。比如有的网站的文章目录使用div class="nav"的css样式，内容使用div class="content"的css，我们可以正则匹配一下nav、content把需要的信息过滤出来。但是不是所有的网站都是使用这种class名称，有的网站也许用div class="post"来表示文章内容。也就是说class="nav",class="content"，不是一个标准化的名称。然后nav,article语义标签则为我们可以提供了一个标准化。如果我们很严格按照html5语义标签的使用规则来设计自己的网页，将很利于爬虫“看懂”我们的网页。

内容权重差异化，给SEO会带来变革吗

前面讲到，语义化标签更利于机器看懂我们写的html，同时不同的内容有着不同的关注度。个人绝对这对SEO可以带来一定的变革的。
当我们使用搜索引擎时，很恼火地搜到和搜索词完全不相干的内容。仔细一看才发现自己的搜索词实际上仅仅出现在一个网站的广告词。如果我们可以通过语义化标签，将网页的重点：比如文章的内容，放在一个article，不太重点的广告词、文章推荐列表放在aside里，就可以成功分化不同内容的权重。实际上搜索引擎可以给某些语义化标签更高一点的权重，从而提高搜索精准度。
当然，这是个人对搜索引擎的期待。若如此，这势必可以给SEO带来变革。

有许多个人观点希望大家交流斧正！