Где разместить элементы HTML 5 при использовании SPRY?

Question

Я создаю веб-сайт с использованием разметки HTML 5, но столкнулся с проблемой, касающейся того, где разместить элемент NAV - потому что я использую SPRY ' Tabbed Panel' для навигации и содержимого:

<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 и т. Д., Так что это семантически правильный?

Возможно, я иду по этому пути неправильно?

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>

Это не большое изменение, но оно добавляет, по крайней мере, лучшую семантику в разметку, оставляя при этом большую часть структуры нетронутой, так что нет необходимости вносить МАСИВНЫЕ изменения в код инфраструктуры SPRY.