en.javascript.info/2-ui/5-widgets/3-widgets-markup/2-markup-errors/solution.md

• Самая главная ошибка: классы без префиксов. Это означает, что если внутри содержимого будет что-либо с классом `.headers`, то стили оформят это как заголовок таба. Что, конечно же, будет неверно.
• Класс `selected`, соответствующий "текущей" выбранной вкладке, находится на ссылке:

   <li><a href="#tabs-3" class="selected">Открытая вкладка</a></li>
  

  ...Но состояние "выбранности" относится к заголовку LI целиком. Для его нормального отображения класс должен быть на LI.

• В использовании `.tabs > div` особо криминала нет, но нужно учесть, что добавить `DIV` с другим функционалом на этот уровень будет затруднительно. Иначе говоря, такая вёрстка усложняет расширение виджета. Лучше использовать для вкладки класс с префиксом `
  ` и, соответственно, селектор `.tabs-tab`.

Правильный вариант:

<div id="tabs" class="tabs">
  <ul class="*!*tabs-headers*/!*">
    <li><a href="#tabs-1">Вкладка 1</a></li>
    <li><a href="#tabs-2">Вкладка 2</a></li>
    <li *!*class="tabs-selected"*/!*><a href="#tabs-3">Открытая..</a></li>
  </ul>
  <div *!*class="tabs-tab"*/!* id="tabs-1">Содержимое...</div>
  <div *!*class="tabs-tab"*/!* id="tabs-2">Содержимое...</div>
  <div *!*class="tabs-tab"*/!* id="tabs-3" class="*!*tabs-selected*/!*">
    Посетитель видит содержимое третьей вкладки.
  </div>
</div>