difference between <bdi> and <span dir="auto">

Question

In the following HTML, both <bdi> and <span dir="auto"> seem to behave the same:

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

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

I could not find any case where they behave differently, so my question is:

Is there any difference between them? Is there ever a reason to use <bdi> over dir="auto"? Especially if I want to apply it to an element that already exists in my HTML, for example <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>

The version with <bdi> has some unnecessary nesting.

If dir="auto" accomplishes the same thing, then why does <bdi> exist?

Answer 1

From MDN:

Embedding the characters in <span dir="auto"> has the same effect as using <bdi>, but its semantics are less clear.

The spec also confirms that the behavior is the same by grouping the same algorithm under both conditions (dir="auto" attribute or <bdi> element).

In other words: If the element to which you're applying dir="auto" is a phrasing element that isn't a <span> and already carries its own semantics (such as the <a> in your example), it's better to use the attribute to save the nesting overhead of a <bdi> element. If it's a <span>, an element that has no semantic meaning on its own, you're better off using the dedicated <bdi> element instead. It's the same in principle as preferring <main> over <div role="main">, or <nav> over <div role="navigation">.