update

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

@@ -0,0 +1,29 @@
+<ul>
+<li>Самая главная ошибка: классы без префиксов. Это означает, что если внутри содержимого будет что-либо с классом `.headers`, то стили оформят это как заголовок таба. Что, конечно же, будет неверно.</li>
+<li>Класс `selected`, соответствующий "текущей" выбранной вкладке, находится на ссылке:
+
+```html
+ <li><a href="#tabs-3" class="selected">Открытая вкладка</a></li>
+```
+
+...Но состояние "выбранности" относится к заголовку `LI` целиком. Для его нормального отображения класс должен быть на `LI`.</li>
+<li>В использовании `.tabs > div` особо криминала нет, но нужно учесть, что добавить `DIV` с другим функционалом на этот уровень будет затруднительно. Иначе говоря, такая вёрстка усложняет расширение виджета. Лучше использовать для вкладки класс с префиксом `<div class="tabs-tab">` и, соответственно, селектор `.tabs-tab`.</li>
+</ul>
+
+Правильный вариант:
+
+```html
+<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>
+```
+

2-ui/5-widgets/3-widgets-markup/2-markup-errors/task.md

@@ -0,0 +1,44 @@
+# Ошибки в вёрстке
+
+[importance 5]
+
+Посмотрите на вёрстку "табов" (вкладок). Какие ошибки вы в ней видите? Как правильно?
+
+```html
+<div id="tabs" class="tabs">
+  <ul class="headers">
+    <li><a href="#tabs-1">Вкладка 1</a></li>
+    <li><a href="#tabs-2">Вкладка 2</a></li>
+    <li><a href="#tabs-3" class="selected">Открытая вкладка</a></li>
+  </ul>
+  <div id="tabs-1">Содержимое в первой вкладке.</div>
+  <div id="tabs-2">Содержимое во второй вкладке.</div>
+  <div id="tabs-3" class="selected">
+    Посетитель видит содержимое третьей вкладки.
+  </div>
+</div>
+```
+
+
+
+```css
+.tabs .headers { 
+  /* стиль для заголовков вкладок */ 
+}
+
+.tabs .headers .selected {
+  /* стиль для заголовка выбранной вкладки */
+}
+
+.tabs > div {
+  /* стиль для обычной вкладки */
+}
+
+.tabs > div.selected {
+  /* стиль для выбранной вкладки */
+}
+```
+
+Примерный внешний вид:
+
+<img src="tabs-example.png">