在以前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容，这里搜集整理了一些语义化标签方面的问题和解答，以供你们参考。
语义化这个概念应该说是伴着HTML5应运而生，那么什么是HTML5中所谓的语义化？html
简单来讲就是：描述内容的含义(meaning)html5
好比说<p>标签就是段落的意思，在HTML5中全部的标签都有它书面上的语义。而没有语义的标签在HTML中有，在HTML5中就没有了，好比<font>标签。而HTML5又为了补充HTML如今的不足而加上了一些新的标签，如<article>、<footer>、<header>等等。而这些标签的分类叫法也从"块级元素"与"行内元素"变成了“外围内容”与“短语内容”。
在HTML5中最基本的理念就是"语义"与"显示"分离，HTML5代码中出现的标签都是让开发人员或浏览器一看就知道是干什么用的东西，至于显示效果那是CSS3（Cascading Style Sheet）须要干的事情，因此在HTML5中这个两个好基友终于距离产生了美。
那么语义化之后对HTML文档有什么好处么？segmentfault
- 能够提高可访问性与互操做性（兼容性会更好）；
- 改进搜索引擎的优化；
- 通常来讲可让HTML文件更小；
- 让代码更好惟护，与CSS3的关系更和谐。
<nav>、<article>、<sections>、<aside> 、<footer>这些标签的理解与用处？第一，对这个几个标签的理解：浏览器
HTML5的设计者们能够说是用心良苦呀，他们认真分析HTML4.0中出来的问题，也就是当下最流行的写页面的方式就是"DIV+CSS"，咱们也不难发现只要用到这个就能够把页面写即简单又漂亮。没有繁琐的标签在里面，须要什么功能就去加<div>标签就能够了。ruby
而<div>是什么呢？这个咱们下一个问题详细说明。问题的关键在于<div>没有任何的语义，也就是说他要干的事是什么全凭开发者说了算。这就形成了严重的开发规范不统一，也就是说页面的导航栏是<div>，页面的边栏也是<div>，惟一区分它们的就是id。可能一些有心的开发者会把<div>的id写的语义明白些，好比：导航栏的id用<nav>，边栏的id用<aside>。这样的写法对其余的开发者看来仍是很好的，由于看到id就能够知道这个<div>是干什么用的了。可是仍是有一大部分的开发者会这么写，如：导航栏的id用div1，边栏的id用div2，这样的写法对用户来讲的可能没有什么区别，由于开发者知道他们都表明什么，而对其余的开发者来讲这真的是灭顶之灾，用英文来讲就是“reading the fucking code”，而对开发者自己可能时间一长也不知道是什么意思了，可是下次开发的时候他们必定还有人是这么干的；ide
回到正题，通过上面的介绍你们也许已经知道为何在HTML5引用上面的标签了吧，就是为了解决开发规范不统一的问题同时也为了加强语义，有人也许会问为何HTML5为何那么在乎语义？用了上面的标签能够说带来什么好处呢？这个答案用一个很是简单的话来讲的那就是：为了统一规范与新功能的出现。测试
他们这些标签功能就是代替<div>功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；优化
第二，这几个标签的语义与用法：网站
<nav>：标记导航（对应网页中重要的连接群就须要用这个标签）包含在<nav>中间的一般是<ul>无序列表。固然若是是面包屑连接就需用到<ol>有序列表，只要记住这个语义本身灵活发挥就是能够了。ui
特别提示：
- HTML5规范不推荐对有辅助性的页脚连接用
<nav>；- HTML5中不容许将
<nav>嵌套在<address>标签中。
<article>：文章标记标签（表示的是一个文档、页面、应用或是网站中的一个独立的容器，原则上来说就是聚合）。
特别提示：
<article>这个标签能够嵌套使用，可是他们必须是部分与总体的关系；- 一样不能用在
<address>标签中；- 他与
<section>标签容易混淆因此须要注意；
<section>：区块定义标签（表示的是文档或是应用的一个通常的块），他通常是有一组类似的主题的内容，通常会包含一个标题。能够用这个标签来写：文章的章节，标签式对话框中的各类标签页等等相似的功能。这里你会发现他与<article>这个标签很像对不对？那么怎么的开发中正确的应用他们呢？
其实也很简单，你就这样想：若是你的页面中须要一个单独的模块来实现一个单独的功能，也就是高聚合的状况，就用<article>，其余的时候都用<section>。
<aside>：定义侧栏标签（表示一部份内容与页面的主体并非有很大的关系，可是能够独立存在），用他能够实现：升式引用、侧栏、相关文章的连接框、广告、友情连接等等。
特别提示：
- 若是使用多个
<aside>，标签应该在主要内容的后面，这样有利于SEO的搜索与提高可访问性；- 若是是与文章的主要内容有关系的图像须要用
<figure>标签而。
<footer>：页脚标签（与<header>标签对应的标签），用他能够实现的功能有：附录、索引、版权页、许可协议等。
特别提示：
- 页脚并不必定是要位于所在元素的末尾，不过一般是这样的；
- 他不能够放在<header>标签中，也不能够相互嵌套，或是在
<address>元素中。
<div>、<span>在HTML5中的生存含义？<div>这个标签在好久好久之前就已经出如今HTML中了，他的全拼是（division）。而在HTML5中的不少的新标签都是他的功能的统必定义而已，由于<div>自己没有任何的语义，可是能够对他增长CSS样式，这样就能够很好的为页面作出一些咱们理想中的效果。那么在HTML5为何他还存在呢？那就是由于，在某些时候你会发现你用HTML5中的任何一个标签都不合适你如今须要的语义，因此在这个时候就须要用到<div>这个标签了。既然说到<div>，那么也要说说与他相对应的<span>这个标签，他也是一个没有任何语义的标签，起到的功能与做用是和<div>同样的，只不过用法不同：<div>是块级的无语义容器，<span>是短语的无语义容器。
<div>的用法相信朋友们用的必定比我熟悉，因此这里关于他的用法就很少说了，只是针对在HTML5中对<div>的使用我提几点建议：
<div>合适就必定要用新的标签，由于<div>没有任何的语义，这个是HTML5所不倡导的；<div>标签，这样对HTML中的语义不会产生太大的影响。title属性这个刚一看会不会想到<title>标签？可是不要弄到错了，他们是彻底不一样的东西。平时在咱们开发的时候不多会用到这个属性，首先说一下它是干什么的吧，其实他就是一个具备提示做用的属性，对于屏幕阅读器来讲能够为用户朗读文本，因此正确的使用能够提高页面的访问性。
在写这个问题的答案以前先说说关于这些标签的理解与用法：
- 明确html5的核心思想就是语义，因此无论是什么标签就看表达的意思，而不是看展示的效果；
- 关于文本的相关标签能够适当的想象成是语文中的标点符号这样能够方便记意与运用；
明白上面的两点咱们在来讲这些新的标签的语义与用法吧：<address>、<figure>、<time>这三个标签下一个问题中详细说这里就先不说了；<strong>、<em>这个两个标签在HTML4.0中就已经有了，可是在这里仍是要说一下，由于在之前可能不多用到它们由于不多有人去注意语义；
<strong>表示的是重要的文本（默认为粗体显示）——重点是语义上的表达而不是展示的效果这个须要记住哦<em>表示的是强调的文本（默认为斜体）<mark>标签是HTML5中的新元素，用来突出显示文本，它的效果就像是用荧光笔给重点的语句作标记同样；<span>标签这个也是在HTML中就已经有的了，之前的文章也大概的提过一下可是没有详细的说明，下面就详细的说明一下：
<span>没有任何的语义，因此正确的使用方式是须要在没有其它合适有标签的时候才能够用它；<div>同样在必定的状况下能够添加<span>标签利用微格式来增长语义；<wbr>一个与<br>很像的新标签，区别在于它不会强制换行；<ruby>、<rp>、<rt>这几个标签就像是语文中的音标同样；<meter>能够用它作一些测量结果的显示与投票结果的显示（如今的问题是浏览器对它的支持很差）；<progress>一样的一个进度条的显示，能够用作一些很好的与用户交互的效果，问题是浏览器的兼容如今也很差。
<address>、<figure>、<time>标签的正确用法与注意事项有哪些是你不知道的?<address>这个标签是新的，因此用他的人不多。至于正确的用法固然也不多有人去研究它，下面简单的总结一下：
<address>是用来定义与HTML页面或页面一部分有关的做者、相关人员或组织的联系信息，一般位于页面底部或相关部份内；<address>标签中不能有<h1>~<h6>、<article>、<address>、<aside>、<footer>、<header>、<hgroup>、<nav>、<section>等标签；<figure>这个元素是用来引入图表、图形、照片等，对应的场景就是像是杂志中的图片同样，在HTML5以前是没有一个专门的标签来作这个事的，以前若是实现这个功能就是用没有语义的<div>标签；
用法提示：
1.<figure>元素能够包含多个内容块，可是只能有一个<figcaption>（能够理解成给图表加标题）标签；
2. 能够用<h1>~<h6>来给<figure>增长标题；
3.<figcaption>不能单独出现，须要有配套的内容一块儿出现。
<time>能够经过这个标签标记一个具体的时间或日期，应用场景一般就是一篇文章的发表时间。
须要注意的是：
1.datetime中的时间最好与<time>标签中的文本元素日期同样，写法能够不同；
2. 若是这个时间是表明整个文章或是页面的时间须要添加pubdate属性；
3. 不要在<time>标签中使用不确切的时间如：“今天中午”、“上周末”；
4. 若是 使用pubdate属性须要注意的是要在同一个父标签下面不要出现张冠李戴的问题；
5.<time>标签不能在嵌套另外一个<time>标签；
6.datatime中的时间格式须要是标准的机器可能的时间 如:YYYY-MM-DDThh:mm:ss
其实做为新的标签，它们的用法还有不少，这里只是说了一些最基础的东西，不过我认为用会上面全部的东西就能够说是入门了。
<em>、<strong>与<b>、<i>的前世此生？各位开发过HTML的朋友都知道<em>与<i>、<strong>与<b>它们的展示形式同样的，一个是斜体一个是粗体，那么它们在HTML5中是怎么平相处的呢？下面咱们来重点讲一下<b>、<i>的前世此生：
在很早之前，互联网那时尚未一个叫做CSS的东西出现的时候，为了区分文本中的重点与特殊的含意的文字
<b>、<i>这对兄弟出现了。在它们的帮助下，页面的文字与用户之间的交互获得了提高。
然而好景不长，在互联网飞速发展的状况下，很快出现一个叫CSS的东西，它的责任就是用来控制页面的表现形式的，固然也包括<b>、<i>所表现的形式，因此在HTML4.0与XHTML1中就有开发人员建议废弃<b>、<i>，取面代之的就是<strong>、<em>+CSS，由于他们有语义性能够更好的与用户交互。但是问题并无就此结束，由于在开发的时候在一些状况下发现用<strong>、<em>老是不能很的好的表示语义，为此，在HTML5中<b>、<i>又以修改后的面貌展示给咱们了，因此在HTML5中又从新启用了<b>、<i>这对兄弟。
那么具体在HTML5中何时用它们呢？<b>标签表示出于实用的目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其它的语义和语气，用于：关键词，产品名，操做指令等等；<i>标签表示一块不一样于其它文字的文字，具备不一样的语态或语气，用于：分类名称，技术术语，外语中的惯用词等等。
语义真的有那么重要么？经过语义又怎么提升访问性与增长SEO的搜索的呢？由于如今一些SEO与浏览器或是屏幕阅读器（一个给残障人士用的文章阅读器）都在根据HTML5的新标准作一些新的功能，他们会跟具新的语义直接与自身的功能相对应。若是网页的开发者也是这么作的，那么你的网站的应用性会大大的增长。
上面又强调了一下语义的重要性，下面告诉你们一个更好的加强语义的小窍门，必定要好好看哦，由于这个小窍门朋友们不必定知道的：
概念介绍：WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications)无障碍网页倡议之可访问的富互联网应用，简称ARIA，他就是一种技术规范。他在HTML提供的语义的基础之上，他会使用属性来填补一些语义上的空白。
ARIA的用法：
id与类（语义性必定要明显）；class类以及他提供的微格式；关于class的微格式，由于有不少人都知道或是认为class的属性是只能为一组元素应用CSS样式，其实并非这样的，其实他还能够在不引用额外的标签下来加强语义，这就是微格式，微格式是使用约定的class名称来标示一块HTML从而来加强与应用程序、智能搜索与搜索机器人的交互。关于微格式的使用能够看看这个网址：http://microformats.org
这个一听第一感受就是不靠谱，一个文件的名字还会影响到网站的体验？
正确的答案确实是：是的！
如：文件名： Html_First_Blog.htm 与 html-first-blog.html
这个两个文件名无论是在用户的体验上与搜索引擎上都第二个完胜第一个。是否是有人会问为何 ？？
下面我就说一下有以下几点是须要咱们注意的：
记住以上几点才是正确的写网页文件的命名方法哦，不要把写其它语言的方法放进来。
http://blog.csdn.net/lihui130135/article/details/45033967
http://blog.csdn.net/lihui130135/article/details/45150501
http://blog.csdn.net/lihui130135/article/details/44748415