html标签 - 如何才算是语义化标签
问题描述
我一直在思考,如何才能算是真正语义化标签.
举例来说,页面的按钮一定要用button标签吗,我看过a元素做的按钮,div做的按钮.span做的按钮.
而且,css是如此灵活,块元素可以转换行内元素,行内元素可以转换成块元素.
似乎无论什么需求,div一直套下去都可以.
一个经典的技巧是用li元素做导航菜单.那么我们还要不要用语义化的nav标签做导航菜单?
某个项目里面的按钮你是用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文档很重要！！！
这篇关于html标签 - 如何才算是语义化标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
