什么是语义化良好的网页
因为CSS很强大,所以无论有没有按照语义选择标签,我们都可以通过css实现需要的设计。但这也是把双刃剑,如果使用不当,容易使我们陷入css布局的一个误区----只要不是table布局,只要是通过css布局的,就是对的,就是符合web标准的。如果只是考虑最终视觉效果,而不考虑标签语义,其实又走上了table布局的老路。正确做法是先确定HTML,确定语义的标签,再来选用合适的css。
判断网页标签语义化是否良好的一个简单方法是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。
同样的设计图,不同的HTML标签可以通过不同的CSS实现同样的页面,但语义不好的CSS布局和语义良好的CSS布局在去掉样式后的表现却可能截然不同。(在Firefox浏览器中Web Developer插件中可以禁用网页中的css)
除了去样式后的可读性外,值得重点提及的还有h标签。h标签的含义是“标题”,搜索引擎对这个标签比较敏感,尤其是h1和h2。一个语义良好的页面,h标签应该是完整有序没有断层的,也就是说,要按照h1,h2,h3,h4这样依次排列下来,不要出现类似h1,h3,h4,漏掉h2的情况。
当页面内标签无法满足设计需要时,才会适当添加div和span等无语义标签来辅助实现。
语义化标签应注意的一些其他问题
1,尽可能少地使用无语义标签div和span。
2,在语义不明显,既可以用p也可以用div的地方,尽量用p,因为p默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利。
3,不要使用纯样式标签,例如b,font,和u等,改用css设置。语义上需要强调的文本可以包在strong或em标签里,strong和em有“强调”的语义,其中strong的默认样式是加粗,而em默认样式是斜体。