Если вы сделаете linkList2 section, тогда ваша семантика будет выглядеть так: «вот навигация по этому разделу». Обратите внимание, что nav уже разделяет контент, поэтому обертывание его в section было бы несколько излишним.
Также обратите внимание, что спецификация говорит:
Не все группы ссылок на странице должны находиться в элементе навигации — этот элемент в первую очередь предназначен для разделов, состоящих из основных блоков навигации.
Нет необходимости помещать каждый набор ссылок в nav просто так. Я думаю, что ваш подход к созданию linkList2 в nav был бы лучшим, хотя я бы не слишком беспокоился о создании дочерних элементов section:
<nav id="linkList2">
<div id="lselect">
<h1 class="select"><span>Select a Design:</span></h1>
<ul>
<!-- Links -->
</ul>
</div>
<div id="larchives">
<h1 class="archives"><span>Archives:</span></h1>
<ul>
<!-- Links -->
</ul>
</div>
<div id="lresources">
<h1 class="resources"><span>Resources:</span></h1>
<ul>
<!-- Links -->
</ul>
</div>
</nav>
Как я уже упоминал выше, nav — это разделы контента, поэтому все заголовки должны быть действительно h1, поскольку все они являются заголовками самого высокого уровня в соответствующих разделах (я изменил их выше). Однако я думаю, что с практической точки зрения все еще допустимо оставлять их как h3, если в разметке им предшествуют заголовки h2 и h1.
Другой подход, который был бы хорош:
<div id="linkList2">
<nav id="lselect">
<h1 class="select"><span>Select a Design:</span></h1>
<ul>
<!-- Links -->
</ul>
</nav>
<nav id="larchives">
<h1 class="archives"><span>Archives:</span></h1>
<ul>
<!-- Links -->
</ul>
</nav>
<nav id="lresources">
<h1 class="resources"><span>Resources:</span></h1>
<ul>
<!-- Links -->
</ul>
</nav>
</div>
Как я упоминал ранее, не заворачивайте в section (или article), достаточно nav.
И последнее, поскольку ваш вопрос касается семантики. Я знаю, что вы работаете над разметкой CSS Zen Garden, поэтому смысл, вероятно, в том, чтобы элементы на вашей новой странице соответствовали всем старым, чтобы все таблицы стилей по-прежнему работали, но вы должны знать, что это не< /em> пример хорошей «семантической разметки». Вот некоторые вещи, о которых вы должны знать:
- Эта разметка была создана в 2003 году, поэтому она никогда не станет отличным примером того, что мы в настоящее время считают хорошей семантической разметкой.
- Разметка в CSS Zen Garden должна оставаться неизменной — это демонстрация CSS, а не HTML.
- Потому что в 2003 IE6 был доминирующим браузером, и никто другой так далеко не продвинулся с В любом случае, в CSS3 эта разметка содержит множество ненужных дополнительных элементов, которые используются для стилизации. В частности, все элементы
span в заголовках и (более вероятно) дочерние элементы div lselect, larchives и lresources.
- Помимо отсутствия OOOCSS, эта разметка демонстрирует classitis — нет необходимости везде иметь несколько атрибутов
id и class . Например, нет необходимости иметь как id из lselect, так и class из select, вместо этого вы можете просто использовать селектор #lselect h1.
- Наконец,
linkList2 семантически ужасное id. Он не входит в связанный список, и будет ли он вторым, зависит от всей остальной разметки. Используемые имена ids и class также являются частью семантической разметки.
person
robertc
schedule
31.12.2012
