Html5主要标签和树结构有关答案

【问题标题】：Html5 main tag and tree structure concerningHtml5主要标签和树结构有关
【发布时间】：2018-12-21 03:21:43
【问题描述】：

HTML <main> 元素 表示文档、文档的一部分或应用程序的 <body> 的主要内容。主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。 Quote Mozilla Dev.

我心中的问题

如果我们稍后在“div”标签中添加“角色”，我们是否支持相同的功能？同样的特殊情况也适用？

<div role="main"> == <main> ?

<main> 元素的内容对于文档应该是唯一的。除非搜索表单是页面的主要功能，否则不应包含在一组文档或文档部分（例如侧边栏、导航链接、版权信息、网站徽标和搜索表单）中重复的内容。Quote Mozilla Dev.强>

这确实是一种特殊情况，或者说是一种相对特殊的情况。一个相对的解释。

我理解的唯一具体的东西（树结构）

例如。错误用法

<header>..</header>
<article>
    <main></main>
</article>
<aside>..</aside>
<footer></footer>

例如。正确使用

<header>..</header>
<main>
    <article>..</article>
</main>
<aside>..</aside>
<footer></footer>

其实我心中的问题就从这里开始。

    <header>..</header>
    <main>
        <article>
             <form>
                 <input type="text" name="user_name" />
                 ....
                 ....
             </form>
        </article>
    </main>
    <aside>..</aside>
    <footer></footer>

既然我在主标签后面使用了表单元素，这是不是用错了？

我的项目页面树的屏幕截图

这是一个登录页面，并形成一个注册操作“特别针对此文档”。所以现在 googlebot 为集体网站表单读取它“像一个搜索表单”，最终创造了一个负面的场景？

我的意思是主标签的内容只能由纯文本组成？来源完全是个谜！

如果我们举一个更具体的例子

Youtube

Youtube 使用 role="main"

我的评论：标签，包括搜索表单和导航菜单。因为 youtube 的搜索表单主要特征...

因此：

例如，如果我有一个搜索引擎页面，并且我在主标签之后包含了搜索表单；

场景 1：我以严格的方式违反了规则，并且不受欢迎的运动受到了 seo 的负面影响，树的制作是错误的。

场景 2：这不是明显违反规则，而是建议的不良方面。 Googlebot等不会对seo造成负面情况，因为它无法检测违规是否有效（因为它正在影响主要内容，可能正在使用它）。

有什么好的想法或技术支持吗？

【问题讨论】：

标签： html main

【解决方案1】：

与大多数 HTML 语义一样，适当的实用主义是有帮助的。 WAI-ARIA 中主要角色的碎片化是可能的，但非常不受欢迎，因此对<main> 元素无效。这意味着主要元素应该是最小的容器，可以容纳页面主要内容的所有内容。如果其中包含在树结构允许的情况下将放置在主要元素之外的内容，则应将其视为与理想的必要偏差。

【讨论】：