1

Well, I've got a site and brand new HTML5 tags to make semantic web pages. However, all the info is messed up in my head.

My site has:

  • a header with banner and navigation;
  • contents block (some promo-text separated by small headers) with tabs and tab headers (could be more than one tab header in a single tab)
  • footer

Well, I see, the main navigation should be in the <nav> block, header — in the <header>, footer — in the <footer>.

What should be a tab? Is it a <section>? Or one tab has as much <section>s as tab headers? Which tag should be used for the tabs selection panel? Is it just a <div> or another <nav>?

The next headache is headers. Well, I suppose the site header (which is in the <header> tag with banner) should be <h1>. But what to do with sections? If I have one section per tab, there will be more than one equal level headers and it would be incorrect to make them <h1>s, so they'll become <h2>s. But is it correct for section not to have a <h1> header?

The next thing — the ARIA roles. Should I write roles for page header, content and footer (banner, contentinfo, main), navigation?

4

2 回答 2

1

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

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

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

具有标题 ( h1- h6) + 相应内容的所有内容都可以包含在 a section(resp. in a 更具体的article/ aside/nav中，如果它与它们的定义匹配)。请参阅我对相关问题的回答。

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

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

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

使用它不会是不正确的h1。

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

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

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

于 2013-10-07T01:02:48.320 回答
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 格式化这些，但更容易理解。

希望这是有道理的

于 2013-10-06T12:52:25.307 回答