<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>具有相同的效果，但是其语义不太清楚。

The spec also confirms通过在两种情况下（dir="auto"属性或<bdi>元素）对相同算法进行分组来使行为相同。

换句话说：如果您要应用dir="auto"的元素是不是<span>且已经带有其自身语义（例如<a>在您的示例中），最好使用属性来节省<bdi>元素的嵌套开销。如果它是一个<span>元素，它本身没有语义，那么最好改用专用的<bdi>元素。原理上与在<main>上胜过<div role="main">或在<nav>胜过<div role="navigation">一样。