使用 SPRY 时在哪里放置 HTML 5 元素？答案

【问题标题】：Where to place HTML 5 elements when using SPRY?使用 SPRY 时在哪里放置 HTML 5 元素？
【发布时间】：2011-06-10 14:18:25
【问题描述】：

我正在使用 HTML 5 标记构建网站，但遇到了关于放置 NAV 元素的问题 - 因为我使用的是 SPRY '用于导航和内容的选项卡式面板：

<header>
 <div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
   <li class="TabbedPanelsTab" tabindex="0">Home</li>
   <li class="TabbedPanelsTab" tabindex="0">Profile/li>
   <li class="TabbedPanelsTab" tabindex="0">Contact</li>
  </ul>
 <div class="TabbedPanelsContentGroup">
  <div class="TabbedPanelsContent">Content 1</div>
  <div class="TabbedPanelsContent">Content 2</div>
  <div class="TabbedPanelsContent">Content 3</div>
 </div>
 </div>

我认为插入 NAV 元素的最佳位置是包装 UL 元素，但这会破坏 SPRY 选项卡式面板（也许我可以通过更改 CSS 中的某些文件路径？）。

此外，似乎网站的主要内容将保存在选项卡式面板的“内容”区域中，我想知道构建这个网站的最佳方法是什么，关于 NAV 和 ARTICLE 等，所以这在语义上是正确的吗？

也许我的方法不对？

【问题讨论】：

标签： html semantics spry

【解决方案1】：

我不熟悉 SPRY，但您可能是正确的，如果您希望拥有更多语义标记，则需要编辑 CSS。

假设每个“标签”都是它自己的文章，这就是我将如何标记它：

<div id="TabbedPanels1" class="TabbedPanels">
    <nav>
        <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Home</li>
            <li class="TabbedPanelsTab" tabindex="0">Profile/li>
            <li class="TabbedPanelsTab" tabindex="0">Contact</li>
        </ul>
    </nav>
    <div class="TabbedPanelsContentGroup">
        <article class="TabbedPanelsContent">Content 1</article>
        <article class="TabbedPanelsContent">Content 2</article>
        <article class="TabbedPanelsContent">Content 3</article>
    </div>
</div>

这不是一个大的变化，但它至少为标记添加了一些更好的语义，同时仍然保持大部分结构完好无损，因此不需要对SPRY 框架代码。

【讨论】：