Question

我知道div元素没有任何语义含义，但是它们是否将任何使用上下文传递给子元素？换句话说，以下2个示例在语义上是否等价？

示例1：

<article>
  <div>
    <header></header>
  </div>
  <section></section>
</article>

示例2：

<article>
  <header></header>
  <section></section>
</article>

Answer 1

是的，它们在您的示例中是相同的。

<div>只会对语义/可访问性产生任何影响，只有您通过aria等赋予其语义。

要反转答案，您可以为任何元素赋予与<div>和role="presentation"相同的语义（无语义）。

就您的示例而言，为清晰起见，就屏幕阅读器而言，<article>元素是<header>和<section>元素的父元素。它可能会在可访问性树中列出<div>，但它没有属性（因此将被忽略）。

您可以在该元素内嵌套100个<divs>，并且屏幕阅读器会对其进行完全相同的处理（尽管有充分的理由显然不这样做！）

作为“纯”容器，该元素并不固有地表示 。相反，它用于对内容进行分组，因此很容易使用class或id属性设置样式，标记以其他语言编写的文档（使用lang 属性），等等。