Создание семантической разметки. Кейс 3: сложная навигация в «подвале»

Курсы
1

Здравствуйте!

Решаю третий кейс из навыка «Создание семантической разметки» и меня возник вопрос по разметке сложной навигации в «подвале» сайта.

Футер сайта на макете
Футер сайта на макете3986×696 77.2 KB

Авторы предоставляют следующий вариант разметки (я убрал блок с иконками социальных сетей и ссылкой на обратную связь, оставив только навигацию):

Эталонная разметка футера 
<footer class="main-footer">
  <dl class="main-footer-navigation">
    <div>
      <dt>О нас</dt>
      <dd>
        <ul class="about-list">
          <li class="about-item">
            <a href="#">О компании</a>
          </li>
          <li class="about-item">
            <a href="#">Реквизиты</a>
          </li>
          <li class="about-item">
            <a href="#">Контакты</a>
          </li>
        </ul>
      </dd>
    </div>
    <div>
      <dt>Сервис</dt>
      <dd>
        <ul class="services-list">
          <li class="services-item">
            <a href="#">Доставка</a>
          </li>
          <li class="services-item">
            <a href="#">Оплата</a>
          </li>
          <li class="services-item">
            <a href="#">Возврат</a>
          </li>
        </ul>
      </dd>
    </div>
    <div>
      <dt>Дополнительно</dt>
      <dd>
        <ul class="advanced-list">
          <li class="advanced-item">
            <a href="#">Скидочная карта</a>
          </li>
          <li class="advanced-item">
            <a href="#">Бонусы</a>
          </li>
        </ul>
      </dd>
    </div>
  </dl>
</footer>

Мои вопросы такие:

  1. Почему <dl>? Это действительно самый подходящий вариант с точки зрения семантики?
  2. Каждая группа является пустым <div> без класса. Это хорошая практика?
  3. Каждый список с навигацией (и их элементы) имеют разные классы. Разве это корректно? На макете они выглядят идентично. Нельзя ли использовать один класс для списков и один класс для элементов списка?

Также буду рад комментариями по моему варианту разметки.

Мой вариант разметки футера 
<footer class="main-footer">
    <ul class="footer-nav">
        <li class="footer-nav-category">
            <h3>О нас</h3>
            <ul class="footer-nav-list">
                <li class="footer-nav-item">
                    <a href="#">О компании</a>
                </li>
                <li class="footer-nav-item">
                    <a href="#">Реквизиты</a>
                </li>
                <li class="footer-nav-item">
                    <a href="#">Контакты</a>
                </li>
            </ul>
        </li>
        <li class="footer-nav-category">
            <h3>Сервис</h3>
            <ul class="footer-nav-list">
                <li class="footer-nav-item">
                    <a href="#">Доставка</a>
                </li>
                <li class="footer-nav-item">
                    <a href="#">Оплата</a>
                </li>
                <li class="footer-nav-item">
                    <a href="#">Возврат</a>
                </li>
            </ul>
        </li>
        <li class="footer-nav-category">
            <h3>Дополнительно</h3>
            <ul class="footer-nav-list">
                <li class="footer-nav-item">
                    <a href="#">Скидочная карта</a>
                </li>
                <li class="footer-nav-item">
                    <a href="#">Бонусы</a>
                </li>
            </ul>
        </li>
    </ul>
</footer>
2

Добрый день!
Привожу вам комментарии авторов по данным вопросам.

  1. dl - для групп ссылок в этом случае наиболее подходящий вариант, обоснованием является - спека по тегу (https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element) , то есть это список из пар название и расшифровка , название группы ссылок (О нас, Сервис …) - это dt , расшифровка - dd список ссылок в группе.
  2. Дополнительный див разрешено использовать по спеке (есть пример в разделе с описанием тега). Див в дальнейшем пригодится для построения сеток, div без класса - упущение, хотя больший упор делается на разметку. Не все классы добавлены, а лишь те которые отвечают за смысловое наполнение. Тут div - просто контейнер для колонки.
  3. По поводу разных названий классов у ссылок - верное замечание, да, в этом случае стили идентичны и один класс на все ссылки - лучшее решение. Поправим.

Ваш вариант имеет право на жизнь, но не совсем корректен с семантической стороны. Заголовки лучше использовать внутри полноценных разделов, вроде article/section. Здесь же информации на полноценный раздел не набирается.
Подробнее о заголовкам можно почитать здесь. Эти элементы представляют заголовки для своих разделов.
Семантика и значение этих элементов определены в разделе заголовков и разделов.

3

Спасибо!
Очень полезные комментарии.

4

При этом в 5 кейсе, где тоже расшифровка по сути, используется ul. Где логика хз. Видимо делают разные авторы, и у каждого свое решение. А нам подгонять надо под них)))

1 лайк
5

Приветствую! Однозначно с вами согласен! Очень жалею, что приобрёл этот навык… Действительно, по факту приходиться подгонять решение под их “эталонное” решение… Вот, что я писал по этому поводу: Кейс 3. семантическая верстка. вопросы. - #2 от пользователя Dm70