正确的网站 HTML5 大纲

Question

嗯，我有一个网站和全新的 HTML5 标签来制作语义网页。然而，所有的信息都在我的脑海里一团糟。

我的网站有：

• 带有横幅和导航的标题；
• 带有标签和标签标题的内容块（一些促销文本由小标题分隔）（单个标签中可能有多个标签标题）
• 页脚

嗯，我明白了，主导航应该在 <nav> 块中，页眉 - 在 <header>，页脚 - 在 <footer>。

标签应该是什么？是<section> 吗？或者一个标签的<section>s 与标签标题一样多？选项卡选择面板应该使用哪个标签？它只是一个<div> 还是另一个<nav>？

下一个令人头疼的问题是标题。好吧，我想网站标题（在带有横幅的<header> 标签中）应该是<h1>。但是如何处理部分？如果每个选项卡有一个部分，则会有多个相同级别的标题，将它们设为<h1>s 是不正确的，因此它们将变为<h2>s。但是部分没有<h1> 标头是否正确？

接下来是 ARIA 角色。我应该为页眉、内容和页脚（banner、contentinfo、main）、导航编写角色吗？

Answer 1

HTML5 语义标签与 Div 标签没有什么不同。它们只是看起来更语义化。所以可以像导航和徽标一样将所有内容保存在标题部分。

<header>
<nav>
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
    </ul>
</nav>
</header>

至于您选择的部分，我通常使用一个部分作为我网站的一部分，如果我将其分解为子部分，我会使用标签或侧边栏。

您仍然需要像使用 DIv 一样使用 CSS 设置这些格式，但更容易理解。

希望这是有道理的

Answer 2

标签应该是什么？是<section> 吗？或者一个标签的<section>s 和标签标题一样多？

如何显示你的内容并不重要（例如标签式）；这取决于您的实际内容。

考虑将您的页面内容放在文字处理器文件中，而无需任何布局。现在您需要对其进行结构化，以便在文档的开头获得一个漂亮的大纲或 TOC。这个结构/大纲在 HTML5 中用标题 (h1-h6) 和分段元素 (section, article, nav, aside) 表示（并且标题仅在 HTML 4.01 中）。

具有标题 (h1-h6) + 相应内容的所有内容都可以包含在 section 中（如果匹配，则可以包含在更具体的 article/aside/nav 中他们的定义）。见my answer to a related question。

标签选择面板应该使用哪个标签？它只是一个<div> 还是另一个<nav>？

如果 nav 代表该选项卡部分的导航，并且它包含在该部分中，则可以使用它。一个直观的例子是文章中的目录（例如维基百科文章）。站点范围的导航是 nav 作为 body 的子级。文章范围的导航（= TOC）是 nav 作为 article 的子级。

如果每个选项卡有一个部分，则会有多个相同级别的标题，将它们设为<h1>s 是不正确的，因此它们将变为<h2>s。但是部分没有<h1> 标头是否正确？

使用h1 并没有错。

所有分段元素（section、article、nav、aside）以及分段根（例如 body）“有”一个标题（如果您没有明确提供一个标题，它将是无标题的）。使用最高级别的标题。所以你可以在每个部分使用h1，或者你可以调整标题级别，使其与计算出的大纲相对应（除非你需要超过6个级别）。

我应该为页眉、内容和页脚（横幅、内容信息、主）、导航编写角色吗？

一些 HTML5 元素映射到 default WAI-ARIA roles。对于支持 WAI-ARIA 但不支持 HTML5 的用户代理，或尚未实现最新角色映射的用户代理，您可能需要显式添加这些已映射的角色。