(HTML)HTML标签语义化总结

今天开始了一个新的移动端项目的开发。每次一涉及到移动端开发,我都特别愿意先考虑Html5的新标签。但是对于不同标签的语义不是很了解,使得我在开发的时候老是为了选择哪个标签而纠结。相信你也遇到过类似的时刻,于是就在网上搜索了一下相关内容,这里做个小的学习总结,其中借鉴了很多人的分享。

为什么要语义化

这个问题是我阅读了一些内容之后,自己又思考了一下。我能想到的有这两点:

  1. 我希望自己开发的网页能够给用户很好的体验,即使css 尚未加载,也能够优雅降级。同时语义化标签能够和用户有很好的互动,如我们熟悉的 img 标签的 title,alt 属性等。

  2. 我希望我开发的页面,如果后面由其他同事来维护的话,他能够觉得页面结构简洁明了,这样便于减轻他阅读我代码的负担。(这点做的还不太好,要继续努力)

其他还有几点,也是非常重要的一些方面,大家可是参考这篇文章,理解HTML语义化。它介绍的非常详细,我这里就不做过多介绍了。

语义标签总结

对这次学习的一个总结,因为自己之前并不是很了解

  1. b,i 标签都是纯样式类型的标签,只有为了加粗才加粗,为了斜体才斜体的时候,他们才派上用场。更狠的解释还是来自 w3c school, 它建议我们不用这两种标签,使用css 来实现就好。相关链接 Html b 标签

  2. strong,em都拥护强调。那么我们要强调的一些内容的时候用什么呢?我原来老是忘记使用的 em 标签,它的强调作用弱于strong,但是我们一般的强调都可以用它就可以。strong 标签的强调更加重要,不过这两种标签感觉都不怎么建议多用。w3c 形容 em 如果是大声喊叫,那 strong 就是尖叫了,这解释的真是形象,佩服。相关链接 Html strong 标签

  3. div,span 减少使用,别滥用。原来看到我的同事一个页面 90% 都用的 div。诚然,这两个都是容器元素,自身不带语义。再诚然(读者:你这诚然的够多的啊。。。)我们可以用 id, class 来修饰,但这并不是 id class 们的主业啊,最好还是 html 标签自带语义。

关于这一点,还好Html5给了我们很多新的语义化标签,比如表示章节,区块的 section;代表一整块内容的article;表示导航的nav;以及表示页面标题和结尾的 header,footer等等。

这里还是给大家推荐几篇不错的介绍文章:

HTML5语义化标签

理解HTML语义化

HTML 5的革新——语义化标签(一)

HTML 5的革新——语义化标签(二)

接下来

除了继续坚持语义化编写页面之外,即使经历了今天的学习和总结,我觉得后面我还是会遇到纠结使用哪个标签的情形,这里就把这次遇到的记录下,以便后面解决,也希望看文章的你,可以给我些建议:

  1. 页面中小的 icon 用什么标签合适? 比如 一个小的 X关闭按钮,或者小的 提示气泡。我现在通常用 span 或者 i,可能这部分也不怎么涉及语义,所以用起来随便些?

  2. 页面不同部分的容器,它用来划分各个部分,现在用的 section 结合 div,但如何区分 section,article 以及 div?

先记录这么多吧,其实写到这里我突然有种感觉,也不怪我纠结标签的使用。。。因为,本身标签的语义就是外国人来制定的。他们的页面布满了英语,自然什么斜体啊,加粗啊能拿来就用。而至少我们使用的时候,并没有他们想的那样,某个标签就理所当然。我国中文汉字这方面和他们并不太相同。所以只能在使用中去加深理解,但前提是,要多去使用语义化标签。