html5 中对话框元素内的页眉、页脚或主要元素

Question

在 Html5 的对话框组件中使用页眉、页脚或主要元素在语义上是否正确？

我想构建一个复杂的模式视图，其中包含主页内容中文章的选项。我想知道使用 html5 是否正确，如下所示

  <dialog> 
    <header>
      <h1>Title</h1>
      <button> Save </button>
    </header>
    <main>
        <!--modal view options-->
    </main>

  </dialog>

Answer 1

太;博士

在元素中使用header,footer或来描述此对话框的内容在语义上不正确。maindialog

关于header和footer

仅分段内容元素（或主体）定义应用于header和 的语义范围footer。dialog不是分段内容（来源）。因此，header放置footer在其中的dialog将描述最接近的切片内容或主体，而不是其dialog本身。

关于main元素

main使用element ( source )时需要记住 3 个重要规则：

1. 它应该仅用于表示文档的主要内容（dialog的内容不太可能是主要内容），
2. 网页上同时只能有一个main没有属性的元素（这意味着您需要在通用页面元素上添加属性），hiddenhiddenmain
3. main元素祖先只能是html、body、div或form没有可访问名称的元素。main不能包含在其他任何内容中，包括自主自定义元素。

因此，第三点使得不可能在 a 内部使用maindialog元素。第一个和第二个让它变得非常困难。

解决方案

在这种情况下，好的解决方案是要么放弃使用这些元素，要么用能够提供语义和 的元素dialog包装 的内容。sectionheaderfooter

  <dialog>
    <section>
      <header><!-- header content --></header>
      <div>
        <!-- modal content -->
      </div>
      <footer><!-- footer content --></footer>
    </section>
  </dialog>

Answer 2

只有<main>标签不应该在那里。

从 W3schools 复制：

header 元素表示介绍性内容或一组导航链接的容器。

和：

一个文档中可以有多个标题元素。

这适用于标题和页脚。

但还有这样的：

一份文档中不得有多个主要元素。主要元素不能是文章、aside、footer、header 或 nav 元素的后代。

所以，简短地说：

您可以在文档中使用多个<header>and<footer>标签，但最好使用 a<div>而不是<main>