0

我一直在思考,如何才能算是真正语义化标签.
举例来说,页面的按钮一定要用button标签吗,我看过a元素做的按钮,div做的按钮.span做的按钮.
而且,css是如此灵活,块元素可以转换行内元素,行内元素可以转换成块元素.
似乎无论什么需求,div一直套下去都可以.
一个经典的技巧是用li元素做导航菜单.那么我们还要不要用语义化的nav标签做导航菜单?

查看全部 4 个回答

0

已采纳

某个项目里面的按钮你是用div或span做的,并在上面用事件委托的形式绑定了一些点击事件,你自己测试的时候都好好的,然后就出包部署到测试环境了。突然,测试人员跑过来找你,说:“为什么按钮点击没有任何反应啊???”惊不惊喜?意不意外?

可能大部分前端还没碰到过这种问题,可能心里会暗想:傻*,是你手机坏了吧?老子写的代码怎么会有问题,一个点击事件而已,我都测试了几百回...

然后测试小伙伴又说了:“其他浏览器都没问题,就Safari浏览器不行...”感觉到有点不安了吧,意识到测试还是很牛叉的了吧!!!

然后你苦思冥想、埋头苦干,各种百度、谷歌,熬夜到凌晨三点半,终于,找到了原因,Safari他娘的还真有点问题:像div、span这种标签,Safari浏览器不认为它是可以产生交互的元素,如果又没有在这些元素上直接绑定事件,得了,那些用事件委托绑定的事件就嗝屁了...MDN - Safari Mobile的一个bug

这种bug遇见过没?为什么会出现这样的bug呢?因为你没有用语义化的标签去写按钮啊!如果你严格要求自己,做一个有理想的前端,写HTML文件的时候都是按照w3c提倡的语义化,用button或者a或者input去写一个按钮的话,这种bug你是没有机会碰到了。

上面只是用一个不常见但又很重要的bug来说明一下语义化的重要性!按照语义化的规范去写HTML文档,有很多必要性和重要性:

  • 页面结构清晰,可读性强

  • 支持更多设备,对有视觉障碍的用户更加友好:屏幕阅读器会完全根据你的标记来“读”你的网页

  • 有利于爬虫抓取更多的有效信息,SEO的效果会大大增强

  • 便于团队开发和维护:一个项目毕竟不是一个人来完成的,大家在一块合作,不要甩给别人满篇都是div的HTML文档啊,谁也受不了

  • ……

所以,理解语义化并遵循语义化写HTML文档很重要!!!