<cite>与<dfn>标签的区别解析：为何显示效果相似？

别被默认的斜体样式骗了，这俩标签的本质区别完全在语义用途上，浏览器只是刚好给它们设了一样的默认样式而已：

• <cite> 专门用来标记作品的标题，比如书籍、论文、歌曲、电影、画作这类创作成果的名字。举个例子：

  I re-read <cite>To Kill a Mockingbird</cite> last month.
  

  它的语义是告诉搜索引擎、屏幕阅读器等工具：“这是一个作品的标题”，而非普通文本。

• <dfn> 是用来标记术语的定义实例——就是当你第一次介绍并定义某个专业词汇、特定概念时用它。比如：

  A <dfn>CSS preprocessor</dfn> is a tool that extends CSS with features like variables and mixins.
  

  它的语义是标注“这里是一个被定义的术语”，辅助工具会识别这个标记，帮用户（比如视障用户）快速定位术语的定义位置。

简单说，一个管“作品标题”，一个管“定义术语”，样式只是表象，语义才是它们存在的意义——让机器能读懂内容的结构和含义，这也是为啥要做两个看似样式相同的标签。

内容的提问来源于stack exchange，提问作者Tanishka Yadav