Создание семантической разметки по макету. Кейс 11. Вопросы

Добрый день @Eleven , @juwain !
В ходе прохождения 11го кейса возникло несколько вопросов и замечаний.

  1. Блок навигации

    На протяжении предыдущих 10 кейсов нас приучали, что отмеченные ссылки не включаются в блок <nav>, однако в этом кейсе “эталонное решение” предлагает наоборот. Можно пояснить почему?
  1. Показатели по городам.
    И в методике, и в перечне ошибок, и в статьях, Академия предупреждает об ошибке, когда табличные данные размечаются как “нетабличные”.
    мне кажется, что в данном случае мы как раз имеем дело с таблицей распределения пользователей по диапазонам возрастов. Однако предлагается размечать это как параграфы. Почему?

    Предлагаемая разметка:
  1. Раздел “Почему вам стоит купить рекламное место на нашем сайте?”
    Не будет ли более уместным с семантической точки зрения разметить перечень преимуществ
    “Более 100 000 посетителей в месяц

    Более 200 000 Крупных городов РФ”
    как обычный немаркированный список?
    или есть какие-то неизвестные подводные камни, которые не позволяют сделать такой выбор?
  1. Списки определений (dl/dt/dd)
    в прошлых кейсах списки были сверстаны таким образом, что значение параметра находилось в теге dt, а описание значения в теге dl.
    Например, в 6м кейсе. В этом же кейсе сделано наоборот, хотя в разделе “Почему стоит
    купить…” макет списка выглядит аналогично 6му кейсу. Какие “подводные камни” привели к такому выбору?
    11й кейс:


    6й кейс

Заранее спасибо за ответы и комментарии.

2.1
Еще заметил:
таблица “Возраст пользователей” заключена в секцию, а последующий “список определений” - нет. Но если подумать над логикой работы макета этот список тоже, наверняка “привязан” к городу. И если предполагалось, что при выборе другого города будет заменяться вся section , то список тоже надо бы внести в section.

  1. таблица “рейтинг рекламных площадок”
    признаки падения или роста показателя имеет смысл вынести отдельно т.к. в дальнейшем теоретически возможна сортировка и т.п.

Коллеги, подскажите, пожалуйста.
В эталонном решении применяется вот такая конструкция:
<span class="measure-decrease">
<span class="visually-hidden">Падение показателя</span>
</span>

Мне интересно, а в каких случаях создают такое вложение? А почему не один span c двумя классами?

внешний спан - для декора, стрелка вверх вниз, а внутренний спан - для читалок и он доступно скрыт, совместить наверное будет проблематично)

Кажется, дошла до меня идея :slight_smile: Прикольно. Спасибо за подсказку!

Добрый вечер.

Вы не могли бы подсказать, разметка прогресса в данном случае делается так?Скриншот 11-11-2020 21_00_11

Добрый день!
Я сначала делал так, но посмотрел решение, прочитал спеку и понял, что ошибся.
progress показывает состояние какого-то процесса (динамику выполнения), а у нас не динамика, а просто показатель.
для нашего случая,наверное, лучше использовать <meter>
Академия предлагает такой вариант разметки для каждого показателя,


хотя я считаю, что весь этот блок в макете, по сути своей, это таблица распределения пользователей по возрастам…

Спасибо за подсказку!

Да, это явное несоответствие, сделаем, единообразно, спасибо!

Да, тут или таблицей можно сделать, или dl dt dt тоже, так как показывается соответствие одно другому. Поправим.

Можно и обычным списком. Но с dl информация дополнительно разделяется ещё и на пары «определение—значение», чего нет в обычных пунктах ul.

В 6 кейсе ошибка, в dt находится сам термин, который мы затем описываем в dd. Поправим.

Взяли на заметку, проверим :+1:

Посмотрим и проверим, спасибо!

нашла пример в спецификации
<dl>
<div>
<dt> Last modified time
<dd> 2004-12-23T23:33Z
</div>
<div>
<dt> Recommended update interval
<dd> 60s
</div>
<div>
<dt> Authors
<dt> Editors
<dd> Robert Rothman
<dd> Daniel Jackson
</div>
</dl>
выходит что вариант когда число обернуто в тег dd правильнее (https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element)

@juwain @id477401
тогда надо будет пройтись по всем кейсам, потому что до 11го кейса применяется другой подход.
но вот что. подумалось:
с точки зрения меня, как обычного человека только-только начавшего задумываться над семантикой оба варианта использования dt/dd взрывают мозг…
с одной стороны привычнее видеть короткий термин и более развернутое определение:
42 (что это?) - Ответ на главный вопрос жизни, вселенной и всего такого
с дрогой стороны если задуматься что считать термином, а что определением, то допустим и такой вариант:
Ответ на главный вопрос жизни, вселенной и всего такого (какой?)- 42

Методика такие ситуации не рассматривает и при прохождении кейсов мы становимся заложниками “настроения” автора эталонного решения без объяснения “почему”.

Может быть стОит в методике рассмотреть такие случаи (хотя бы в примечании) и с проблемными “рекламными” примерами из кейсов и объяснить логику выбора что dt, а что dl и как Академия рекомендует поступать.