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

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

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

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

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

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


    6й кейс

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

1 лайк

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

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

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

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

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

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

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

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

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


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

2 лайка

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

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

Да, тут или таблицей можно сделать, или 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 и как Академия рекомендует поступать.

2 лайка