<bdi> 和 <span dir= "auto" > 之间的区别



在下面的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>为什么存在?

来自 MDN:

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

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

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

最新更新