Web | 为什么两个标签实现作用一样，但没有被替代

在看Bootstrap文档时，发现了有些HTML标签实现的是一样的效果，如<del>和<s>，<ins>和<u>。作用效果相似，但却分成了两个标签。
（注：使用时建议先查一下支持情况，如<s> <u>已经不推荐使用）
上述标签主要体现在表示的语义不同

这和一道经典面试题很相近：什么是Web语义化，有什么好处

---

Web语义化

语义化主要指使代码包含含义，不仅仅是表示外观，利于机器理解。
体现在CSS上，为有含义的类名
体现在HTML上，为使用语义元素来表示文档结构

好处

1. 便于搜索引擎收录，提高页面搜索排名（SEO），提供更准确的搜索结果
2. 屏幕阅读器可以将其用作路标，以帮助视障用户浏览页面
3. 页面代码结构清晰，易于查找
4. 有利于团队代码维护

---

使用

用得对 > 不用 > 用错
使用时主要是为传达意义，尽量避免只记住显示的样式而错用的情况
具体问题具体分析，集中精力解决主要矛盾，兼顾次要矛盾

常用的HTML语义化结构
文档查阅传送门
常用语义元素的具体使用场景参见： 我的HTML会说话——从实用出发，谈谈HTML的语义化
大体框架可参考：【译】停止滥用div! HTML语义化介绍

---

个人感受

回到最初的问题，抛开被弃用的因素，如果名字分得清，记得住对应的含义，在实践过程中是会试着用的。但在实际应用中，大多数时候还是<div>一把梭，因为记不住太多语义元素，加之变大于不变，最多大的页面结构使用，里面就…（菜是原罪）

参考

MDN-Semantics
Why Use Semantic HTML?