Posts /

深入理解HTML5标签

Back to posts /
Twitter Facebook Google+
26 Oct 2015

0. HTML5中最看重的理念“语义化”相比HTML有什么区别？

在之前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容，这里搜集整理了一些语义化标签方面的问题和解答，以供大家参考。
语义化这个概念应该说是伴着HTML5应运而生，那么什么是HTML5中所谓的语义化？

简单来说就是：描述内容的含义(meaning)

比如说<p>标签就是段落的意思，在HTML5中所有的标签都有它书面上的语义。而没有语义的标签在HTML中有，在HTML5中就没有了，比如<font>标签。而HTML5又为了补充HTML现在的不足而加上了一些新的标签，如<article>、<footer>、<header>等等。而这些标签的分类叫法也从"块级元素"与"行内元素"变成了“外围内容”与“短语内容”。
在HTML5中最基本的理念就是"语义"与"显示"分离，HTML5代码中出现的标签都是让开发人员或浏览器一看就知道是干什么用的东西，至于显示效果那是CSS3（Cascading Style Sheet）需要干的事情，所以在HTML5中这个两个好基友终于距离产生了美。
那么语义化以后对HTML文档有什么好处么？

  1. 可以提升可访问性与互操作性（兼容性会更好）；
  2. 改进搜索引擎的优化；
  3. 一般来说可以让HTML文件更小；
  4. 让代码更好唯护，与CSS3的关系更和谐。

1. HTML5中的<nav>、<article>、<sections>、<aside> 、<footer>这些标签的理解与用处？

第一，对这个几个标签的理解：

HTML5的设计者们可以说是用心良苦呀，他们认真分析HTML4.0中出来的问题，也就是当下最流行的写页面的方式就是"DIV+CSS"，我们也不难发现只要用到这个就可以把页面写即简单又漂亮。没有繁琐的标签在里面，需要什么功能就去加<div>标签就可以了。

而<div>是什么呢？这个我们下一个问题详细说明。问题的关键在于<div>没有任何的语义，也就是说他要干的事是什么全凭开发者说了算。这就造成了严重的开发规范不统一，也就是说页面的导航栏是<div>，页面的边栏也是<div>，唯一区分它们的就是id。可能一些有心的开发者会把<div>的id写的语义明白些，比如：导航栏的id用<nav>，边栏的id用<aside>。这样的写法对其他的开发者看来还是很好的，因为看到id就可以知道这个<div>是干什么用的了。但是还是有一大部分的开发者会这么写，如：导航栏的id用div1，边栏的id用div2，这样的写法对用户来说的可能没有什么区别，因为开发者知道他们都代表什么，而对其他的开发者来说这真的是灭顶之灾，用英文来说就是“reading the fucking code”，而对开发者本身可能时间一长也不知道是什么意思了，但是下次开发的时候他们一定还有人是这么干的；

回到正题，经过上面的介绍大家也许已经知道为什么在HTML5引用上面的标签了吧，就是为了解决开发规范不统一的问题同时也为了增强语义，有人也许会问为什么HTML5为什么那么在意语义？用了上面的标签可以说带来什么好处呢？这个答案用一个非常简单的话来说的那就是：为了统一规范与新功能的出现。

他们这些标签功能就是代替<div>功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；

第二，这几个标签的语义与用法：

  • <nav>：标记导航（对应网页中重要的链接群就需要用这个标签）包含在<nav>中间的通常是<ul>无序列表。当然如果是面包屑链接就需用到<ol>有序列表，只要记住这个语义自己灵活发挥就是可以了。

    特别提示：

    1. HTML5规范不推荐对有辅助性的页脚链接用<nav>；
    2. HTML5中不允许将<nav>嵌套在<address>标签中。

  • <article>：文章标记标签（表示的是一个文档、页面、应用或是网站中的一个独立的容器，原则上来讲就是聚合）。

    特别提示：

    1. <article>这个标签可以嵌套使用，但是他们必须是部分与整体的关系；
    2. 同样不能用在<address>标签中；
    3. 他与<section>标签容易混淆所以需要注意；

  • <section>：区块定义标签（表示的是文档或是应用的一个一般的块），他一般是有一组相似的主题的内容，一般会包含一个标题。可以用这个标签来写：文章的章节，标签式对话框中的各种标签页等等类似的功能。这里你会发现他与<article>这个标签很像对不对？那么怎么的开发中正确的应用他们呢？
    其实也很简单，你就这样想：如果你的页面中需要一个单独的模块来实现一个单独的功能，也就是高聚合的情况，就用<article>，其他的时候都用<section>。

  • <aside>：定义侧栏标签（表示一部分内容与页面的主体并不是有很大的关系，但是可以独立存在），用他可以实现：升式引用、侧栏、相关文章的链接框、广告、友情链接等等。

    特别提示：

    1. 如果使用多个<aside>，标签应该在主要内容的后面，这样有利于SEO的搜索与提升可访问性；
    2. 如果是与文章的主要内容有关系的图像需要用<figure>标签而。

  • <footer>：页脚标签（与<header>标签对应的标签），用他可以实现的功能有：附录、索引、版权页、许可协议等。

    特别提示：

    1. 页脚并不一定是要位于所在元素的末尾，不过通常是这样的；
    2. 他不可以放在<header>标签中，也不可以相互嵌套，或是在<address>元素中。

2. HTML5通用的容器<div>、<span>在HTML5中的生存含义？

<div>这个标签在很久很久以前就已经出现在HTML中了，他的全拼是（division）。而在HTML5中的很多的新标签都是他的功能的统一定义而已，因为<div>本身没有任何的语义，但是可以对他增加CSS样式，这样就可以很好的为页面做出一些我们理想中的效果。那么在HTML5为什么他还存在呢？那就是因为，在某些时候你会发现你用HTML5中的任何一个标签都不合适你现在需要的语义，所以在这个时候就需要用到<div>这个标签了。既然说到<div>，那么也要说说与他相对应的<span>这个标签，他也是一个没有任何语义的标签，起到的功能与作用是和<div>一样的，只不过用法不一样：<div>是块级的无语义容器，<span>是短语的无语义容器。

<div>的用法相信朋友们用的一定比我熟悉，所以这里关于他的用法就不多说了，只是针对在HTML5中对<div>的使用我提几点建议：

  1. 如果你觉得用HTML5中的新的标签比用<div>合适就一定要用新的标签，因为<div>没有任何的语义，这个是HTML5所不倡导的；
  2. 如果效果需要的话可以在HTML5新标签的外面加一个<div>标签，这样对HTML中的语义不会产生太大的影响。

3. 元素title属性对语义的重要性是什么？

title属性这个刚一看会不会想到<title>标签？但是不要弄到错了，他们是完全不同的东西。平时在我们开发的时候很少会用到这个属性，首先说一下它是干什么的吧，其实他就是一个具有提示作用的属性，对于屏幕阅读器来说可以为用户朗读文本，所以正确的使用可以提升页面的访问性。

4. HTML5中的新标签对于写文本启到一些重要影响的标签有哪些？

在写这个问题的答案之前先说说关于这些标签的理解与用法：

  1. 明确html5的核心思想就是语义，所以不管是什么标签就看表达的意思，而不是看展现的效果；
  2. 关于文本的相关标签可以适当的想象成是语文中的标点符号这样可以方便记意与运用；

明白上面的两点我们在来说这些新的标签的语义与用法吧：
<address>、<figure>、<time>这三个标签下一个问题中详细说这里就先不说了；
<strong>、<em>这个两个标签在HTML4.0中就已经有了，但是在这里还是要说一下，因为在以前可能很少用到它们因为很少有人去注意语义；

  • <strong>表示的是重要的文本（默认为粗体显示）——重点是语义上的表达而不是展现的效果这个需要记住哦
  • <em>表示的是强调的文本（默认为斜体）

<mark>标签是HTML5中的新元素，用来突出显示文本，它的效果就像是用荧光笔给重点的语句做标记一样；
<span>标签这个也是在HTML中就已经有的了，以前的文章也大概的提过一下但是没有详细的说明，下面就详细的说明一下：

  1. <span>没有任何的语义，所以正确的使用方式是需要在没有其它合适有标签的时候才可以用它；
  2. 它是短语级别的标签所以不会另起一行；
  3. 同<div>一样在一定的情况下可以添加<span>标签利用微格式来增加语义；
  4. 一般的情况下需要用CSS来控制它的显示样式因为它没有样式的展现样式；

<wbr>一个与<br>很像的新标签，区别在于它不会强制换行；
<ruby>、<rp>、<rt>这几个标签就像是语文中的音标一样；
<meter>可以用它做一些测量结果的显示与投票结果的显示（现在的问题是浏览器对它的支持不好）；
<progress>同样的一个进度条的显示，可以用做一些很好的与用户交互的效果，问题是浏览器的兼容现在也不好。

5. HTML5中<address>、<figure>、<time>标签的正确用法与注意事项有哪些是你不知道的?

<address>这个标签是新的，所以用他的人很少。至于正确的用法当然也很少有人去研究它，下面简单的总结一下：

  1. <address>是用来定义与HTML页面或页面一部分有关的作者、相关人员或组织的联系信息，通常位于页面底部或相关部分内；
  2. 大多数时候，联系信息是作者的电子邮件或是指向联系信息页的链接，这个是正确的，不能用来标记“联系我们”中的办公地点，这是错误的用法；
  3. 提供的信息要准确，不是说电子邮件的地址的正确性，而是说需要对应上提供信息的人，如果一个页面中有好多相关的人，那么提供信息的时候一定要确定信息准确性，不要张冠李戴；
  4. <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

其实作为新的标签，它们的用法还有很多，这里只是说了一些最基础的东西，不过我认为用会上面所有的东西就可以说是入门了。

5. 关于<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>标签表示一块不同于其它文字的文字，具有不同的语态或语气，用于：分类名称，技术术语，外语中的惯用词等等。

6. 如何使用ARIA提升可访问性？

语义真的有那么重要么？通过语义又怎么提高访问性与增加SEO的搜索的呢？因为现在一些SEO与浏览器或是屏幕阅读器（一个给残障人士用的文章阅读器）都在根据HTML5的新标准做一些新的功能，他们会跟具新的语义直接与自身的功能相对应。如果网页的开发者也是这么做的，那么你的网站的应用性会大大的增加。
上面又强调了一下语义的重要性，下面告诉大家一个更好的增强语义的小窍门，一定要好好看哦，因为这个小窍门朋友们不一定知道的：

概念介绍：WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications)无障碍网页倡议之可访问的富互联网应用，简称ARIA，他就是一种技术规范。他在HTML提供的语义的基础之上，他会使用属性来填补一些语义上的空白。

ARIA的用法：

  • 正确运用ARIA中的地标角色：

    1. role ="banner"(横幅)
    2. role="navigation"(导航)
    3. role="main"(主体)
    4. role="complementary"(补充性内容)
    5. role="contentinfo"(内容信息)
      > 小提示：地标角色只是ARIA规范中的一种，如果你感兴趣可以去官网阅读一下（地址：http://www.w3.org/TR/wai-aria/ ）
  • 将屏幕阅读器测试列入你的日常开发中；（因为他是最能直接反映出你的网站语义写的好不好的东西）；
  • 正确的为标签制定id与类（语义性一定要明显）；
  • 正确使用class类以及他提供的微格式；

关于class的微格式，因为有很多人都知道或是认为class的属性是只能为一组元素应用CSS样式，其实并不是这样的，其实他还可以在不引用额外的标签下来增强语义，这就是微格式，微格式是使用约定的class名称来标示一块HTML从而来增强与应用程序、智能搜索与搜索机器人的交互。关于微格式的使用可以看看这个网址：http://microformats.org

7. 你想到过网页文件的命名会影响你网站的体验么？

这个一听第一感觉就是不靠谱，一个文件的名字还会影响到网站的体验？
正确的答案确实是：是的！
如：文件名： Html_First_Blog.htm 与 html-first-blog.html
这个两个文件名不管是在用户的体验上与搜索引擎上都第二个完胜第一个。是不是有人会问为什么 ？？
下面我就说一下有如下几点是需要我们注意的：

  1. 文件名需要用小写字母：
    应用场景就是最简单的输入地址吧，你认为下面哪种写起来更方便，这个请自己体会吧：

  2. 用短横线分隔单词：
    大家一定会认为，用"_"挺好，其实这是做C开发时候的写法，也可以说是习惯，但是在网站中“-”是搜索引擎更喜欢的style；
  3. 使用标准的扩展名：
    现在用好多的网站都是用.htm的扩展名，这个浏览器也不会报错，但是标准的扩展名就是.html的所以大家以后写的时候就不要省时间少写一个字母“l”了。

记住以上几点才是正确的写网页文件的命名方法哦，不要把写其它语言的方法放进来。

参考文章：

http://blog.csdn.net/lihui130135/article/details/45033967
http://blog.csdn.net/lihui130135/article/details/45150501
http://blog.csdn.net/lihui130135/article/details/44748415


Twitter Facebook Google+