update

2-ui/5-widgets/3-widgets-markup/1-semantic-menu/solution.md

@@ -0,0 +1,33 @@
+Несмотря на то, что меню более-менее прилично отображается, эта вёрстка совершенно не семантична. 
+
+Ошибки:
+<ol>
+<li>Во-первых, меню представляет собой *список элементов*, а для списка существует тег `LI`.
+
+**Семантический подход -- это когда теги используются по назначению.** Для элементов списка `<li>`, для адреса `<address>`, для заголовка таблицы `<th>` и т.п.
+</li>
+<li>Во-вторых, класс `rounded-horizontal-blocks` показывает, что содержимое должно быть *оформлено* как скругленные горизонтальные блоки. Любой класс, отражающий оформление, несемантичен.
+
+**Правильно -- чтобы класс был *смысловым***. Например, `<ul class="menu">` будет говорить о том, что смысл элемента -- "меню".</li>
+<li>В-третьих, элемент `.vertical-splitter`. Здесь класс вполне семантичен, этот элемент списка является вертикальным разделителем, так что здесь всё в порядке. Но на этот раз несемантичность -- в содержимом. 
+
+**Мы, по возможности, стараемся, чтобы HTML содержал именно информацию, а символ вертикальной черты`|` выполняет чисто оформительскую функцию.**
+
+Поэтому от него следует либо вообще избавиться, либо переместить в CSS при помощи `::before`.</li>
+</ol>
+
+И, наконец, это не обязательно и не ошибка, но обычно элементы, которые являются ссылками или кнопками, оформляют в `<a>` или `<button>`. 
+
+Вариант ниже -- семантичен:
+
+```html
+<ul class="menu">
+  <li class="item"><a href="#">Главная</a></li>
+  <li class="vertical-splitter"></li>
+  <li class="item"><a href="#">Товары</a></li>
+  <li class="item"><a href="#">Фотографии</a></li>
+  <li class="item"><a href="#">Контакты</a></li>
+</ul>
+```
+
+[edit src="solution"]Полное меню со стилями[/edit]