Question

好吧，我有一个网站和全新的HTML5标签来制作语义网页。但是，所有的信息都在脑海中搞砸了。

我的网站有：

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

嗯，我知道，主导航应该位于<nav>中的<header>，标题中 - <footer>，页脚 - <section>。

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

接下来的头痛是标题。好吧，我想网站标题（位于<h1>标签中的横幅广告）应为<h1>。但是如何处理部分？如果每个标签有一个部分，则会有多个相同级别的标题，并且将它们设为<h2>是不正确的，因此它们将变为<h1> s。但是没有banner标题的部分是否正确？

接下来的事情 - ARIA的角色。我应该为页眉，内容和页脚（contentinfo，main，{{1}}），导航编写角色吗？

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>个？

显示您的内容无关紧要（例如标签）;这取决于你的实际内容。

考虑将页面内容放在文字处理器文件中，而不进行任何布局。现在你需要对它进行构造，以便在文档的开头获得一个漂亮的大纲或TOC。此结构/大纲由标题（h1 - h6）和分段元素（section，article，nav，aside）表示HTML5（仅限HTML 4.01中的标题）。

带有标题（h1 - h6）+相应内容的所有内容都可以包含在section中（或者更具体article / {{1 } / aside，如果它与它们的定义匹配）。请参阅my answer to a related question。

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

如果<nav>代表该标签部分的导航，并且该部分包含在该部分中，则可以使用nav。直观的例子是文章中的目录（例如维基百科文章）。作为nav的孩子，网站范围内的导航为body。文章范围的导航（= TOC）是nav的{{1}}的孩子。

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

使用<h1>是不正确的。

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

我应该为页眉，内容和页脚（banner，contentinfo，main），导航编写角色吗？

某些HTML5元素与default WAI-ARIA roles映射。对于支持WAI-ARIA但不支持HTML5的用户代理，或者尚未实现最新角色映射的用户代理，您可能希望明确添加这些已映射的角色。

更正网站的HTML5大纲

2 个答案: