Question

我正在使用 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 Tabbed面板（也许我可以通过改变CSS中的一些文件路径？）。

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

也许我会以错误的方式解决这个问题？

Answer 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>

这不是一个很大的改变，但它至少为标记添加了一些更好的语义，同时仍然保留了大部分结构的完整性，因此不需要将MASIVE更改为SPRY框架代码。

使用SPRAY时放置HTML5元素的位置？

1 个答案: