html5主要标签和树结构有关

标签 html program-entry-point

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

心中的疑问

#1

如果我们稍后将“角色”添加到“div”标签,我们是否支持相同的功能?同样的特殊情况也适用吗?

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

#2

一个<main>的内容元素对于文档应该是唯一的。除非搜索表单是页面的主要功能,否则不应包含在一组文档或文档部分(如侧边栏、导航链接、版权信息、站点 Logo 和搜索表单)中重复的内容。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>

既然我在 main 标签之后使用了 form 元素,这是一种不正确的用法吗?

我的项目页面树的截图 Screenshot of my project page tree

这是一个着陆页,表单是一个注册操作“Special for this document”。那么现在 googlebot 读取它的集体网站形式“像一个搜索形式”,最终创造了一个负面的场景?

我的意思是说主标签的内容只能由纯文本组成?消息来源完全是个谜!

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

Youtube

Youtube 使用 role="main"

enter image description here

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

因此:

For example, If I have a search engine page and I am including the search form after the main tag;

Scenario 1: I made a violation of the rules in a strict manner and the undesired motion was negatively affected by the seo, the tree making is wrong.

Scenario 2: It is not an obvious violation of the rules, but an undesirable aspect of the advice. Googlebot etc. it will not be a negative situation for seo because it can not detect whether the violation is valid (because it is affecting the main content, perhaps using it).

有什么好的idea或者技术支持吗?

最佳答案

与大多数 HTML 语义一样,大量的实用主义是有帮助的。 WAI-ARIA 中主要角色的碎片化是可能的,但强烈不喜欢,因此对 <main> 无效元素。这意味着主要元素应该是容纳页面主要内容的最小容器。如果在树结构允许的情况下顺便包含一些应该放在主要元素之外的东西,那应该被认为是对理想的必要偏离。

关于html5主要标签和树结构有关,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51313352/

相关文章:

javascript - 如何访问上传的 JSON 文件的数据?

html - 避免容器 div

javascript - DOM 加载和纯 HTML 附加

c - POLINK :error: Unresolved external symbol. 佩莱斯 C

javascript - 内容左侧的 CSS3 垂直文本横幅

css - 你如何强制一个无序列表和一个带有表格的 div 并排?

java - public static int[] main (int[] ) 将返回什么以及在哪里?

java - 如何使用 JFrame 类作为主类?

java - eclipse 找不到主类

java - 运行使用 Gradle 构建的 JAR 文件时“没有主要 list 属性”