理解语义化很多人都从标签去入手,没错,但是我们要明白这个“语义化”并不仅仅是我们开法者阅读也不仅仅是搜索引擎阅读,甚至有可能是盲人阅读。我想表明的一个观点是,前端开发在做一个页面的时候,最好是先写Html,写出的html要能足够地体现产品设计的意图,至少要保证全部文字信息都能在页面中体现,特别需要注意的是某些信息会被设计师放到图片里面去,或是作为图片显示或是背景显示,这个时候我们也不能放弃图片上的文字信息,一样写进html!

裸写html的意义何在?

我也常常思考是为内容而写html还是为呈现来写,无论怎样两者都要兼顾总是好的。在某些设计中,该用<h1>标签的内容可能会在页面的中部,这个时候我们应该在代码内将该标签提到前面,这个算是为内容而写html。我们通常见到的导航都是横向的,很多人都会不加思索地套上ul、li,当然这个并不是错误,扩展性也还可以,但是在代码越来越昂贵的今天,我们完全可以通过a标签顺序罗列,但是这样在裸奔CSS的时候是紧紧挨着的,所以如果考虑这个情况的话,在<a>标签之间加上空格是个不错的办法。也许有人会问怎样写样式?有两个办法,让a标签float和让a标签inline-block,我自己是推崇inline-block的写法的,尽管inline-block会带来元素间多出半个文字长度的空隙,或许这个空隙正也是我们需要的,如果真不需要也可以设置margin来解决,现在我们已经节省了ul和li标签了,而语义你能说比不上li 吗?同样的道理即便是list列表我们也并不是非得要Li,我们同样可以使用<a>配合<br />来完成,当然具体还要考虑扩展。

标签的语义化是要为了增加可阅读性和可使用性的,前面都是说了阅读性,那么使用性了?举个例子吧,我们也经常做一些非常漂亮的提交按钮,而且value为空,那么假如在无css和js的情况下,你看到的按钮就是那么一小块甚至看不到,谁又知道那是提交还是取消呢?