Many semantic elements (e.g. footer, header, etc.) aren't that much different from a div CSS-wise. So, you can certainly customize them straight away without wrapping them.
I guess (mostly based on A11Y guides I've read through & axe output) that nesting doesn't really matter. It's to say, mostly a footer and a footer wrapped into a div are equivalent.
It depends on context for sure, there are elements (e.g. table, ul) that can only have children of certain types. Nesting in those contexts could lead to invalid (and not a11y-friendly) markup.
In the wild, I've mostly seen that people consider it "clean" to maintain the "top-level" markdown (header, nav, menu, main, section, article, footer) unwrapped (partially, because it's quite easy to achieve, I think, since you don't normally have a lot of CSS attached to those) & wrap all the rest as needed since "down there" on lover levels, the markup tends to get way less structured anyway. All this however, seems to be rather a matter of preference.
Tokenizing: The browser converts strings of characters into distinct tokens—as specified by the W3C HTML5 standard for example, "<html>", "<body>"—and other strings within angle brackets. Each token has a special meaning and its own set of rules.
Here it is worth paying attention to the phrase "Each token has a special meaning and its own set of rules". Now let's check the rule for <div> from HTML5 standard:
The div element has no special meaning at all.
The div element is not a semantic element, and in this, it differs from semantic elements.
If you want to style the div element, then this may also not be a winning trick for constructing the Object Model. Styles have the task of presenting content to the user. When building the CSS Object Model (CSSOM), styles are tightly bound by rules to HTML elements (tokens). This brings us back to the semantics of HTML elements (tokens).
So your question is related to understanding the semantics of tokens (HTML elements). I would venture to suggest that the Accessible Rich Internet Applications (WAI-ARIA) standard is largely intended to add semantics to non-semantic HTML elements, including the HTML element <div>.
Summary: The use of semantic HTML elements makes it easier to understand the structure of the content, including users with disabilities.
发布评论
评论（2）
许多语义元素（例如
页脚，header等）与divcss-wise没有太大不同。因此，您当然可以立即自定义它们而无需包装它们。我猜（主要是基于我阅读的A11Y指南真的没关系。可以说，主要是 a
页脚和页脚包裹在div中是等效的。可以肯定地取决于上下文，其中有元素（例如
表，ul），只能有某些类型的孩子。在这些情况下筑巢可能导致无效（而不是对A11Y友好的标记）。在野外，我主要看到人们认为“清洁”以维护“顶级”标记（
header，nav，菜单代码>，main，节，Article，footer）未包装（部分，因为它很容易实现，我认为，既然您通常没有很多CSS，则）＆amp;自从在情人级别上“下降”以来，将所有其余的都包裹起来，无论如何，标记往往会变得降低结构。然而，所有这些似乎是偏爱的问题。
Many semantic elements (e.g.
footer,header, etc.) aren't that much different from adivCSS-wise. So, you can certainly customize them straight away without wrapping them.I guess (mostly based on A11Y guides I've read through & axe output) that nesting doesn't really matter. It's to say, mostly a
footerand afooterwrapped into adivare equivalent.It depends on context for sure, there are elements (e.g.
table,ul) that can only have children of certain types. Nesting in those contexts could lead to invalid (and not a11y-friendly) markup.In the wild, I've mostly seen that people consider it "clean" to maintain the "top-level" markdown (
header,nav,menu,main,section,article,footer) unwrapped (partially, because it's quite easy to achieve, I think, since you don't normally have a lot of CSS attached to those) & wrap all the rest as needed since "down there" on lover levels, the markup tends to get way less structured anyway.All this however, seems to be rather a matter of preference.
可能值得查看 创建文档对象模型（dom） 是为了理解的：
在这里，值得关注“每个令牌都有特殊含义及其自己的规则集”一词。现在，让我们检查
＆lt; div＆gt;的规则，来自 html5标准 ：DIV元素不是语义元素，在此中，它与语义元素不同。
如果您想设置DIV元素，那么这也可能不是构建对象模型的获胜技巧。样式的任务是向用户展示内容。构建 CSS对象模型（CSOM） ，样式被规则紧密绑定到HTML元素（令牌）。这使我们回到了HTML元素（令牌）的语义。
因此，您的问题与理解令牌的语义（HTML元素）有关。我敢建议 可访问的丰富互联网应用程序（Wai-aria） Strong>标准主要旨在将语义添加到非语义HTML元素中，包括HTML元素
＆lt; div＆gt;。摘要：语义HTML元素的使用使您更容易理解内容的结构，包括残疾用户。
It's probably worth checking out how the Document Object Model (DOM) is created to understand:
Here it is worth paying attention to the phrase "Each token has a special meaning and its own set of rules". Now let's check the rule for
<div>from HTML5 standard:The div element is not a semantic element, and in this, it differs from semantic elements.
If you want to style the div element, then this may also not be a winning trick for constructing the Object Model. Styles have the task of presenting content to the user. When building the CSS Object Model (CSSOM), styles are tightly bound by rules to HTML elements (tokens). This brings us back to the semantics of HTML elements (tokens).
So your question is related to understanding the semantics of tokens (HTML elements). I would venture to suggest that the Accessible Rich Internet Applications (WAI-ARIA) standard is largely intended to add semantics to non-semantic HTML elements, including the HTML element
<div>.Summary: The use of semantic HTML elements makes it easier to understand the structure of the content, including users with disabilities.