<bdi>与<span dir="auto">的区别

Question

在以下HTML中，<bdi>和<span dir="auto">的行为似乎都是一样的：

​

<p dir="auto">
<bdi>ABC תתת DEF</bdi>
אבג דהו.
</p>

<p dir="auto">
<span dir="auto">ABC תתת DEF</span>
אבג דהו.
</p>

​

我找不到他们行为不同的任何情况，所以我的问题是：

他们之间有什么区别吗？有理由使用<bdi>而不是dir="auto"吗？特别是如果我想将它应用于HTML中已经存在的元素，例如<a>

​

<p dir="auto"><a href="http://example.com" dir="auto">http://example.com</a> טקסט טקסט</p>
<p dir="auto"><bdi><a href="http://example.com">http://example.com</a></bdi> טקסט טקסט</p>

​

带有<bdi>的版本有一些不必要的嵌套。

如果dir="auto"完成了同样的事情，那么为什么<bdi>会存在？

Answer 1

来自MDN

在<span dir="auto">中嵌入字符与使用<bdi>具有相同的效果，但语义不太清楚。

规范还确认：通过在这两种条件下分组相同的算法(dir="auto"属性或<bdi>元素)，行为是相同的。

换句话说:如果您要应用dir="auto"的元素是一个短语元素，它不是一个<span>，并且已经具有自己的语义(例如您的示例中的<a> )，那么最好使用该属性来节省<bdi>元素的嵌套开销。如果它是一个<span>，一个本身没有语义意义的元素，那么最好使用专用的<bdi>元素。原则上，这与更喜欢<main>而不是<div role="main">，或者<nav>比<div role="navigation">更好。