语义化标签

无序列表 ul

并不是所有的并列关系的数据都要使用到ul无序列表，ul他大多数出现在行文中间，也就是在ul的上部，我们一般会有文字说明，如列举一些选项啥的。

所以，对于语义标签，我的态度是:‘“用对" 比“不用” 好，“不用" 比“用错”好。当然了,我觉得有理想的前端工程师还是应该去追求“用对”它们。

所以，有时候用其他元素替换ul，反倒可以减少冗余的标签。

（感觉我就是那种，为了所谓的语义而去大量使用的这种，这种习惯以后要改了）

em强调倾斜和strong强调加粗

em可能常常和strong标签概念混淆，而strong的大量使用，其实原因就是他不倾斜，文本加粗，在日常使用中，这种情况更多一些，即便可以用em，我们也不想多书写一条重置样式的css而去使用em

而em的代表了这个文字是重音，所以从理解上可以这么去读：em会对文本含义有改变作用，类似于读一段话时，里面的重音部分，重点部分。

我吃了一个<em>苹果</em>
我吃了<em>一个</em>苹果

两句话，不同的重音意思也不一样。

第一句突出我吃的是苹果

第二句突出我只吃了一个

所以文字的重音其实和strong是完全不一样的。

那么strong又是什么意思？

strong表达的是文本的重要性、严重性和紧急性等

比如：一条重要的通知，一个特别的价格，一段不能忽视的文本，这个作用着重于强调重要性，对文本的理解并不会产生语义上的变化。他更多的是一个作用。

这里说的比较绕，仔细理解下就会明白。

标题和hgroup

h1-h6是不同层级的标题，不同层级的标题按照顺序排列，我们可以生成目录树的结构

<h1>一级目录</h1>
<p>一级目录介绍</p>
<h2>二级目录</h2>
<p>二级目录介绍</p>
<h2>二级目录</h2>
<p>二级目录介绍</p>

他会生成如下格式的目录：

• 一级目录

  • 二级目录
  • 二级目录

这种是最基本的标题，而当我们的标题出现副标题的时候，其实很多人会使用span啊，这种行内元素，但其实html5已经考虑到这种情况，给了一个hgroup元素。

<hgroup>
  <h1>标题</h1>
  <h2>副标题</h2>
  <p>其他内容</p>
</hgroup>

他会生成如下格式目录：

• 标题 - 副标题

  • 其他内容

可以看到，在hgroup中，h1-h6被视为标题的组成部分，而不是独立标题。

为什么会生成这种目录结构

html标准中专门规定了生成目录结构的算法，所以说，即便我们不打算深入，也应该尽量在大的层面上保证这些元素的语义化使用。

section元素

section不仅仅是一个有语义的div标签，虽然大部分时候，我们对他的理解是混淆的，但是它会改变h1-h6的语义。

在section元素中，标题元素h1-h6会下降一级。

也因此，我们只需要section和h1-h6就足以形成文档的树形结构。

<section>
  <h1>section的语义</h1>
  <p>xxxx</p>
  <section>
    <h1>语义1</h1>
    <p>xxxx</p>
  </section>
  <section>
    <h1>语义2</h1>
    <p>xxxx</p>
  </section>
</section>

生成：

• section的语义

  • 语义1
  • 语义2

section表示的是一个内容的区块，区域，比如内容章节区块，页眉，页脚。

section容易和article混淆，在原则上，能用section就能用article，但是如果情景上article更合适，那么就应该使用article。

那么什么情形使用article更合适？

一篇博客文章的文章部分，包含标题，内容等

论坛的帖子文章

单条评论部分

等等...

article

我们需要明确article内容的独立性，该内容本身独立于上下文，即便是周围所有的内容被移掉，也不会影响该内容的阅读。

在article中，可以存在header和footer，这两个标签语义就是头部和底部。

这种也适合拿来做博客的mini文章卡片展示。

针对 section和artcle，dive，我们可以按照以下原则：

1. 内容是否独立完整，是，用article；
2. 如果该内容上下文相关，考虑使用section；
3. 仅仅是个块内容，使用div。

header和footer

header： 如其名，常出现在头部，表示导航或者介绍性内容

footer： 通常出现在底部，包含一些作者信息，相关链接，版权信息

header和footer-般都是放在article或者body的直接子元素，但是标准中并没有明确规定，footer也 可以和aside, nav, section相关联 ( header不存在关联问题)。

aside

可以理解为侧边栏，实际上aside可以是侧边栏，但不仅仅是侧边栏。

aside中的导航，虽然和header一样都可以有nav，但是，aside的导航一般是一些相关性的导航，最典型的就是博客的侧边栏了，什么相关文章啊，tag标签云啊，这些。

address

footer中一般包含address标签，这是个非常容易被误用的标签，address用于表示文章的联系方式或作者的联系方式，它明确的只关联article和body元素。

HTML 的

<time itemprop="date" datetime="2016-08-12">下一周</time> 

<abbr title= "World Wide Web ">WWW</ abbr>