提问人：Rick Vellinga 提问时间：11/16/2023 更新时间：11/16/2023 访问量：10
这是正确的语义html吗？
Is this proper semantic html?
问：
我正在为一个网站制作一个组件，我需要制作一个包含不同 W3C 指南的清单。我目前使用表单作为父元素，其中包含一篇文章和不同的细节/摘要元素，但我觉得这不是正确的语义 HTML。在组件之外，我已经使用了 <h1> 和 <h2>所以我不担心。我只是觉得我使用<形式>和<article>元素是错误的。
<form action="">
{#each principe.richtlijnen as richtlijn}
<article>
<div>
<span>Richtlijn {richtlijn.index}</span>
<h3>{richtlijn.titel}</h3>
</div>
{#each richtlijn.succescriteria as succescriterium}
<details>
<summary>
<label>
<div>
<span>Criteria {succescriterium.index} ({succescriterium.niveau})</span>
<h4>{succescriterium.titel}</h4>
</div>
<input
type="checkbox"
checked={checkedSuccescriteria.find((e) => e.id === succescriterium.id)}
/>
</label>
</summary>
<div>{@html richtlijn.uitleg.html}</div>
</details>
{/each}
</article>
{/each}
</form>
这是组件的当前实时链接：https://dry-checklist-vervoerregio.vercel.app/（由于学校项目，它只有组件实时）。
谁能帮我使我的代码更具语义性 HTML？
答：
0赞
Sean
12/21/2023
#1
以下是一些建议。有些是对语义的部分主观解释，有些则更客观。
形式
仅当提交数据时才使用表单元素。 表单元素用于“提交信息”。如果表单中的信息未发送到任何地方或以某种方式进行处理，则不需要表单元素（可能也不应使用）。输入元素不必是表单元素的子元素。
部分与文章
每个标准都有意义，可以标记为一篇文章。 文章元素适用于“旨在独立分发或可重复使用”的“独立组合”。W3C 可访问性清单中的每个标准都可以作为独立、独立分发的内容独立存在。
使用部分元素作为准则。虽然标准本身是文章元素的良好候选者，但指南大多只是将它们分组和组织为“文档的通用独立部分”的模式，因此部分元素似乎最适合它们。
事实上，W3C 本身就是这样在他们的 How to Meet WCAG（快速参考）指南中标记的：标准的文章元素，指南的章节元素。
摘要元素中的标题和输入元素
虽然根据 HTML 规范将标题和输入元素放在摘要元素中是有效的，但在实践中可能会有问题。
摘要元素中的标题可能会导致辅助功能问题。MDN HTML 元素参考警告：
由于该元素的默认角色为 button（从子元素中剥离所有角色），因此此示例不适用于辅助技术（如屏幕阅读器）的用户。将删除其角色，因此不会被视为这些用户的标题。
<summary>
摘要元素中的输入也是如此。同样，由于摘要元素的作用类似于按钮，因此在其中放置另一个交互式元素（如复选框输入）可能会给辅助技术用户和普通用户带来问题，具体取决于他们的浏览器。
这些元素最好放在摘要和详细信息元素之外。
标题组
考虑使用 hgroup 作为补充标题。最近未弃用的标题组元素“允许将标题与任何次要内容（例如副标题、替代标题）分组”。这是一种比在 div 中用跨度标记补充标题更具语义的方法。 请注意，hgroup 中的补充标题应该用段落标记，这不是很直观。有关详细信息，请参阅使用说明。
例
以下是采用上述建议的替代方法：
{#each principe.richtlijnen as richtlijn}
<section>
<hgroup>
<p>Richtlijn {richtlijn.index}</p>
<h3>{richtlijn.titel}</h3>
</hgroup>
<ol>
{#each richtlijn.succescriteria as succescriterium}
<li>
<article>
<hgroup id={succescriterium.id}>
<p>Criteria {succescriterium.index} ({succescriterium.niveau})</p>
<h4>{succescriterium.titel}</h4>
</hgroup>
<input aria-labelledby={succescriterium.id} type="checkbox" checked={checkedSuccescriteria.find((e) => e.id === succescriterium.id)} />
<details>
<summary>Beschrijving van {succescriterium.titel}</summary>
<div>{@html richtlijn.uitleg.html}</div>
</details>
</article>
</li>
{/each}
</ol>
</section>
{/each}
评论