Xpoint
   [напомнить пароль]

"Хлебные крошки": список или нет?

Метки: [без меток]
2011-04-11 03:30:54 [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]

В очередной раз зашел спор с коллегами на вечную тему семантики: как более правильно (идеологически и практически) размечать строку навигации aka "хлебные крошки" — так:

<p class="breadcrumbs">
   <a href="/">Главная</a> / <a href="/section/">Важный раздел</a> / <a href="/section/subsection/">Интересный подраздел</a> / Какая-то страница
</p>

или так:

<ul class="breadcrumbs">
   <li><a href="/">Главная</a></li>
   <li><a href="/section/">Важный раздел</a></li>
   <li><a href="/section/subsection/">Интересный подраздел</a></li>
   <li>Какая-то страница</li>
</ul>

со стилями а-ля

.breadcrumbs li { display: inline; list-style: none; }
.breadcrumbs li:before { content: ' / '; }
.breadcrumbs li:first-child:before { content: ''; }

Как всегда, есть существенные аргументы в пользу обеих позиций. Сразу скажу, что мне ближе первая (могу аргументировать, но хочу выслушать все резоны).

Интересуют любые соображения уважаемых знатоков на темы: 1) есть ли принципиальная разница и 2) если да, то где она проявляется и как всё-таки лучше? :)

спустя 8 часов [обр] Евгений Седов aka KPbIC(5/176)[досье]
За второй вариант. Крошки являются упорядоченным списком (массивом) и к ним, по идее, можно применить все функции, применяемые к массивам (pop, push, доступ по индексу, и т.п). Но я не практик.
спустя 8 часов [обр] Marat Tanalin(4/78)[досье]
сообщение промодерировано
Разумеется, список — список URL-адресов страниц, составляющих путь от главной страницы к текущей. Разве что, возможно, не UL, а OL (упорядоченный список). Лично я обычно использую UL таким образом:
<dl>
   <dt>Вы находитесь здесь:</dt>
   <dd><ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/services/">Услуги</a></li>
      <li>Создание сайтов</li>
   </ul></dd>
</dl>
спустя 1 час 14 минут [обр] Павел Карасёв(1/14)[досье]
Я не понимаю прикола семантики. По-моему это придуманый способ обмана, когда нужно обосновать сложность верстки, а следовательно дороговизны. Использую первый вариант и не парюсь.
Зы. В поисковом продвижении это не сказывается.
спустя 4 часа 54 минуты [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]

Евгений Седов aka KPbIC[досье]

Крошки являются упорядоченным списком (массивом) и к ним, по идее, можно применить все функции, применяемые к массивам

Для программы — да. Но это слабый аргумент (предельно утрируя, в PHP любая строка является упорядоченным массивом символов, но это не повод оборачивать каждую букву в li). Ниже я разворачиваю тезис.

Marat Tanalin[досье]
Часто пишут, что оценить семантичность страниц можно по их виду при отключенных стилях (на эту тему была целая инициатива CSS Naked Day, да и не только). В порядке мысленного эксперимента попробуем сравнить из-под какого-нибудь Линкса следующие варианты строки навигации: №1

Вы здесь:
  1. Главная
  2. Важный раздел
  3. Интересный подраздел
  4. Какая-то страница

№2

Вы здесь:
  • Главная
    • Важный раздел
      • Интересный подраздел
        • Какая-то страница

и №3

Вы здесь: Главная / Важный раздел / Интересный подраздел / Какая-то страница

Какая из них наиболее очевидна, а какая - наименее? На мой взгляд, самая очевидная — вторая, похожая на мини-карту сайта. Третья наглядно представляет путь, который нужно пройти от корня сайта к текущему месту (подобно тому, как файловый путь содержит в себе пути всех своих родительских директорий) — тоже понятно с первого взгляда. А вот в первой структуре юзер почему-то видит какое-то странное меню-оглавление, в котором разделы, подразделы и страницы оказались отчего-то на одном уровне, будто это последовательные главы. И, чтобы найти среди этих разделов текущий выделенный (точнее, единственный невыделенный, да еше в самом низу), приходится присмотреться и напрячься. А первая мысль юзера при виде такого меню — "ну и где именно я среди этой кучи?". Хотели сделать структуру более ясной, а получилось — наоборот запутали. Почему?

Имхо, всё дело в том, что простое последовательное перечисление никак не отражает действительно главной особенности "крошек" — иерархичности, подчиненности последующего элемента предыдущему. В терминах структур данных это описывается не массивом, а "связным списком" (знакомый всем список смежности). Прямого аналога такой структуре в HTML нет, единственный способ выразить ее там — честно воспроизвести эту иерархию (пример №2). В обычной строке этого отношения нет в явном виде, но неявно оно легко воспроизводится благодаря устоявшемуся паттерну (привычный вид и наглядная аналогия с файловыми путями) как человеком, так и машиной (понятие "строка навигации" доступно обоим, даром что это лишь строка!). А вот проецирование этой структуры на плоский список однородных элементов убивает информацию об этом отношении начисто. И не добавляет ровно ничего взамен, потому что последовательность — тривиальное чисто внешнее свойство строки навигации, которая и без явного подчеркивания никуда не денется.

Со стороны машин это подтверждает Гугл, недвусмысленно дающий понять, что последовательность в "крошках" ему и так очевидна (дополнительно "разжевывать" ни к чему, не настолько он тупой бот). А вот иерархичность — не всегда. И именно ее в некоторых случаях подчеркнуть не мешало бы — микроданными или RDFa на базе вложенной, а не списочной, структуры... :)

Павел Карасёв[досье], всё не так однозначно, во многих случаях "семантизация" разметки действительно делает вечный школьный вопрос "что этим хотел сказать автор" более легким и для человека, и для машины :). Но вот списки, на мой взгляд, обросли избытком мифов, и их "прирожденная" семантичность сильно переоценена. Поспешное "осписковывание" всего, что плохо лежит, вместо отражения реальных смысловых связей зачастую вносит лишь тавтологию, и прибавляет не больше смысла, чем замена слова "уборщица" на "клининг-менеджер" :). Я считаю (аргументы выше), что строка навигации — как раз такой случай. Но на всякий случай хочется разобраться до конца :)

спустя 1 час [обр] Marat Tanalin(4/78)[досье]

Илья Cтpeльцын aka SelenIT[досье]
Вид страницы без стилей — хороший способ оценки качества структурной разметки страницы. Однако ставить саму семантику в жёсткую зависимость от того, чтобы страница хорошо смотрелась без стилей, — выплёскивание ребёнка с водой.

HTML-семантика — всегда компромисс между реальной структурой и средствами её описания, имеющимися в стандарте. Это данность. Список — структурный элемент HTML, достаточно уместный для разметки навигационного списка (списка!) «хлебные крошки» и гораздо более уместный, чем безликая строка ссылок, связанных друг с другом неизвестно каким образом (без использования дополнительного слоя в лице, например, микроформатов — но ведь те же микроформаты можно с таким же успехом навесить и на UL/OL-список).

спустя 1 час 34 минуты [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]
ставить саму семантику в жёсткую зависимость от того, чтобы страница хорошо смотрелась без стилей, — выплёскивание ребёнка с водой.

Не спорю. Но, на мой взгляд, если "как бы супер-пупер-семантичное" решение на поверку очевидно проигрывает "вроде бы несемантичному" — это первый звоночек, чтобы задуматься: а там ли мы ищем семантику? ;)

Список — абстрактный, очень гибкий структурный элемент HTML, уместный для очень многого, с минимальным натягом — практически для всего. Например, есть мнение, что структурные части страницы (header, content, footer) непременно должны быть элементами упорядоченного списка, "потому как они, в отличие от div'ов передают иерархию и связи, которые присутствуют между элементами". Продолжая ту же мысль, можно придти к утверждению, что главы в книге — набор однородных элементов со значимой для смысла последовательностью, для смысла, поэтому каждую главу тоже нужно обернуть в <li>, а всю книгу — в <ul> (логично же?). А там дойдет и до каждого абзаца, затем слова, буквы... На каком-то месте с этого пути пора свернуть, не правда ли? ;)

HTML — язык разметки пусть и гипер-, но всё же текста, и львиная доля смысла документа выражается именно его текстовой составляющей, разметка служит ей лишь подпорками (и то если правильная). Слова в предложении не надо оборачивать в <li>, хотя абстрактно они являются однотипными объектами с существенной для смысла порядковой зависимостью. Станции в названии поезда "Париж — Берлин — Варшава — Москва" прекрасно описывают маршрут его следования без всяких списков, благодаря пунктуации и общепринятой логике естественного человеческого языка. Элементы файлового пути тоже никогда не оборачиваются в <li>, хотя по своей сути файловый путь является таким же списком узлов древовидной структуры. Чем же лучше/хуже узлы выбранной ветви дерева сайта?

Выражение "навигационный список" я вижу чуть ли не впервые, с "хлебными крошками" оно у меня никак не ассоциируется. А "строка навигации" — устойчивое выражение, почти общепринятый термин. То, что это именно строка, ее линейность — важный характерный признак для узнавания этой навигационной структуры (в отличие, например, от другой популярной навигационной структуры — списка соседних подразделов;), а значит, в какой-то мере часть ее семантики. По крайней мере, для человека. Но ведь и сайты мы делаем в первую очередь для людей, а боты пусть подстраиваются...

С точки зрения же навешивания микроданных между строкой спанов со ссылками и набором LI-шек с теми же ссылками, действительно, разницы нет никакой. А вот такое существенное (в т.ч. для расширения микроформатами) свойство "крошек", как иерархическая соподчиненность, ни "безликая" строка, ни еще более абстрактный и обезличенный список, выразить не могут. Выразить его может только настоящая вложенность элементов (особенно для машины, которую не обманешь стилевой видимостью). Так в чем же принципиальная "крутизна" списков, зачем, если не видно существенной смысловой разницы в главном, зачем идти более сложным (с точки зрения стилизации) и менее надежным (менее понятным для человека при опред. условиях) путем? Неужели только ради слепой догмы а-ля "так надо, и точка!"?

спустя 6 минут [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]
  • в обоих постах выше вместо <ul> подразумевался <ol>, конечно же... надо ж было так очепятаться два раз подряд... прошу прощения за этот досадный ляп!
спустя 4 часа 27 минут [обр] Jared(0/26)[досье]
Ни разу не слышал аргументов в пользу семантической верстки, говорящих о ее практической пользе. Понятно, что информация, структурированная хорошо лучше, чем структурированная плохо. И применение разнообразных списков, таблиц и прочих возможностей HTML для верстки контента, требующего определенного отображения - это необходимость. Но менюшки-крошки и прочие элементы подобного плана - суть утилитарные компоненты страницы. И откровенно говоря, мне кажется что заворачивание того же меню в <ul> это излишество.
спустя 3 часа 52 минуты [обр] Павел Карасёв(1/14)[досье]
Илья Cтpeльцын aka SelenIT[досье]
Вам не кажется что современные страницы уже совсем не обычные документы?
Они давно ушли в совсем другую вселенную... имя этой новой вселенной Приложение.
Мы же не верстаем настольные приложения по принципам семантики, а ведь в приложениях часто наличиствуют объемные руководства в документном виде, наряду с остальными элементами (мультимедиа, интерактив). Поэтому, семантика, в применении к современным страницам - это по меньшей мере странно...
спустя 11 часов [обр] Marat Tanalin(4/78)[досье]

Илья Cтpeльцын aka SelenIT[досье]
Навигация на веб-страницах — это списки ссылок. И если мы говорим о том, какая стандартная семантическая структура HTML (не отрицая смысла структурной разметки как таковой) лучше всего подходит для навигации, то это списки — вне зависимости от того, идёт речь о горизонтальной навигации (по соседним разделам) или вертикальной (вверх-вниз по иерархии).

Что касается явной разметки списков по сравнению с подразумеваемой и иногда, возможно, кажущейся очевидной связью следующих друг за другом ссылок: таковые вовсе не обязательно представляют собой список. Например, следующая фраза — совсем не список:

Firefox является браузером.

Если же говорить о целесообразности семантической разметки в целом (безотносительно навигации) — этот вопрос каждый для себя решает сам либо на основании принятых в конкретной команде соглашений.

спустя 26 минут [обр] Евгений Седов aka KPbIC(5/176)[досье]

Илья Cтpeльцын aka SelenIT[досье]

Если заменить "Вы здесь" на что-нибудь в духе "Ваши шаги" или "Удаление от главной" (что, на мой взгляд, больше соответствует ситуации), то смотрится иначе. Не правда ли?

Если бы навигация была представлена как распустившееся дерево, допустим, с выделенным путем, то иерархия налицо. Но как только вы убираете дерево, для меня вся подчиненность пропадает. Так же, как пропадает и списочный контекст, в котором находится каждый пройденный элемент.

спустя 16 часов [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]
сообщение промодерировано

Павел Карасёв[досье]
Приложения и их семантика — отдельная большая тема (одно возвращение/перерождение <menu> в ЖHTML чего стоит). Нам бы пока хотя бы со статикой разобраться... :)

Marat Tanalin[досье]

Навигация на веб-страницах — это списки ссылок.

Как правило, да. Но не обязательно. Вот один из примеров навигации из текущей спеки ЖHTML:

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

И человеку, и поисковику этот фрагмент ничего не говорит о взаимоотношениях ссылок друг с другом, зато прекрасно понятен смысловой контекст каждой из них. Но что для человека и поисковика важнее — структура или контекст, ассоциации?

Поэтому правило "набор навигационных ссылок — список" хорошее, но не универсальное. Нужно смотреть не только на внешний вид ссылок или программную структуру, представляющую их (напр. массив). Нужно смотреть и на содержание, суть и окружающий контекст. Чтоб отражающая всё это итоговая разметка была действительно семантической, а не просто структурной ;)

Евгений Седов aka KPbIC[досье]
Согласен, смотрится иначе. Забавно смотрится :) Как запись физического адреса, вместо привычной формы, следующей инструкцией:

  1. Приезжайте в город Мусохранск.
  2. Найдите Семантический переулок.
  3. Идите до дома 56.
  4. Постучите в квартиру 5.

Юзер, с вероятностью за 2 сигмы, не "шагал" от главной по всем этим разделам, ему абсолютно незачем считать "шаги удаления от главной". А вот ориентироваться в контексте, в котором находится страница, куда его забросил поисковик — не помешало бы. Точно так же, как в адресе юзера, вероятнее всего, интересует не последовательность действий по нахождению конкретной двери в конкретном доме на конкретной улице, а возможность моментально прикинуть местонахождение в уме: "Ба, да это ж в двух шагах от моей работы!" или "Ой, это ж на другом конце города, да еще в промзоне... ну его, поищу чего поближе..."

Но как только вы убираете дерево, для меня вся подчиненность пропадает. Так же, как пропадает и списочный контекст, в котором находится каждый пройденный элемент.

Именно так — с точки зрения программного движка сайта и программиста, который с ним работает. Но не с точки зрения юзера, который пытается на этом сайте ориентироваться. Для него то, что раздел, к примеру, "Утюги" подчинен разделу "Бытовая техника", остается существенным (и что если он ищет зеленый утюг вместо синего, то надо кликнуть вторую ссылку справа, а если вообще не утюг, а кофеварку — то на третью). Т.е. человек неявно достраивает этот пропавший "списочный контекст" в уме. Убивая эту подчиненность, мы лишаем набор ссылок строки навигации их важной смысловой, логической составляющей, как минимум не менее важной, чем упорядоченность.

По большому счету, "крошки" являются именно что выбранной ветвью дерева, т.е. вырожденным до одной ветви на уровне, но всё равно деревом. И семантически (в машиночитаемом виде) это можно передать в HTML лишь вырожденным аналогом многоуровневого меню — вложенным списком с единственным элементом на уровне (или вообще не списком, но всё равно вложенной структурой — как в тех примерах Гугла). Обычный список, как и обычная строка, этой ключевой особенности крошек ни человеку, ни машине не передают (хотя строка с разделителями, выступающими в этом случае аналогами служебных слов и пунктуации, всё-таки какие-то подсказки для человека сохраняет).

Я согласен, что простой список — удобный и стандартный способ структурной разметки, и в огромном числе ситуаций служит отличным выражением набору альтернатив, на которые можно перейти с данной страницы — т.е. разделам навигации. Но вот семантике (а не просто программной структуре) "хлебных крошек" он не соответствует, увы.

спустя 7 часов [обр] Евгений Седов aka KPbIC(5/176)[досье]
сообщение промодерировано

Во-первых, не обязательно использовать нумерованный список.

Во-вторых, я не уловил, почему использованы инструкции вместо:

  • Мухосранск
  • Семантический переулок
  • дом 56
  • квартира 5

В-третьих, чтобы помочь пользователю мысленно достроить дерево, можно к каждому шагу вместо буллета прицепить метку (мы же ее знаем?). То есть, вместо (вместе) того, чтобы по значению угадывать имя и назначение параметра, просто назвать сам параметр:

  • город: Мухосранск
  • улица: Семантический переулок
  • дом: 56
  • кваритра: 5

Что-то я совсем запутался с "семантикой" и "структурной разметкой". Если семантика относится к замыслу уровня приложения, то обозначить ее, IMHO, можно только классами. Теги же в любом случае описывают структуру (представления?) и к семантике никакого отношения не имеют.

спустя 18 часов [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]

Если не использовать нумерованный список, путаница еще увеличится — вместо последовательности "шагов от корня сайта" получится неупорядоченная куча равнозначных (с виду) альтернатив.

Но "крошки" семантически не являются и такой последовательностью шагов (вернее, могут являться, но это их вторичный, а вовсе не определяющий, признак). Адрес в виде пошаговой инструкции приведен в качестве аналогии этому, слегка утрированной.

С метками, да, контекст восстанавливается и список сразу обретает смысл. Но не в каждой ситуации можно найти столь же ясную и однозначную подпись для уровня ("раздел/подраздел/подподраздел"?). И самое главное: которая структура является более семантичной сама по себе — та, что нуждается в пояснительных метках, или та, что обходится без них?

Насколько я понимаю, семантическую разметку и семантические теги придумали именно для выражения замысла уровня приложения. В примере из классической статьи Вадима Макеева

<dl>
    <dt>Семантика</dt>
    <dd>совокупность смысловых отношений.</dd>
</dl>

именно выбор тегов дает машине подсказку, что "совокупность смысловых отношений" является определением термина "Семантика" (на мой взгляд, тут еще и <dfn> внутри <dt> был бы уместен). Другое дело, что выразительных возможностей у тегов маловато, поэтому для выражения сложных смысловых зависимостей не обойтись без более высокого уровня (зарезервированные классы или добавочные атрибуты — те же микроформаты, RDFa и т.п.). Но и теги кое-что могут. Поэтому, я полагаю, при семантической верстке нужно стремиться, чтобы выбранные теги выражали (насколько это возможно) именно смысловые отношения уровня предметной области между элементами, а не уровня программного представления. Иначе такая разметка недалеко уходит от табличной — намного ли выражение массива "семантики" однотипных записей из базы списком осмысленнее выражения "семантики" колонок одинаковой высоты ячейками?..

спустя 18 дней [обр] Евгений Седов aka KPbIC(5/176)[досье]
Крошки, ведь, могут и не быть сслыками? Их основное назначение в предоставлении ориентации в пространстве, а не в навигации. И тогда, никаких "альтернатив" нет, и равнозначность элементов оправдана одинаковым расстоянием между соседними элементнами (один клик), а список равнозначных элементов все равно остается упорядоченной структурой, никак в "кучу" не превращаясь.
спустя 17 часов [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]
основное назначение в предоставлении ориентации в пространстве, а не в навигации
С этим я согласен. Но поэтому же говорить о "расстоянии в кликах" в общем случае, имхо, не приходится. И не могу я согласиться с "равнозначностью" самих объектов "крошек" (не ссылок/названий в их представлении). Всё равно определяющее (с точки зрения "ориентации в пространстве") отношение в каждой паре соседних элементов в "крошках" — это "что во что вложено". Поэтому семантику крошек в разметке может выразить (и человеко-, и машиночитаемым образом) только вложенная структура (что и пытаются делать примеры rich snippet-ов от Гугла). А представить-то "крошки", конечно, можно и списком, и таблицей. Вот только "семантической разметкой" такое их представление, имхо, не будет — и человек, и машина едва ли смогут выудить из такой разметки какую-либо добавочную полезную информацию об этой структуре...
спустя 6 часов [обр] Marat Tanalin(4/78)[досье]

Илья Cтpeльцын aka SelenIT[досье]

определяющее (с точки зрения "ориентации в пространстве") отношение в каждой паре соседних элементов в "крошках" — это "что во что вложено". Поэтому семантику крошек в разметке может выразить (и человеко-, и машиночитаемым образом) только вложенная структура

Хлебные крошки существуют не в вакууме, а в привязке к текущей странице, и представляют собой список родительских страниц текущей страницы в порядке от корневой к текущей — в этом и состоит семантика хлебных крошек. Вложенность как таковую здесь показывать нужды нет: родительская страница является родительской вне зависимости от её удаления от текущей, а взаимоотношения хлебных крошек друг с другом второстепенны и в достаточной степени иллюстрируются их порядком, учитывая что последним элементом является текущая страница.

спустя 4 часа 19 минут [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]
взаимоотношения хлебных крошек друг с другом ... в достаточной степени иллюстрируются их порядком

По моему обдуманному мнению, такая логика определенно восходит к презентационному подходу в разметке. Во времена HTML4- верстальщики часто думали не о фактических (а значит, находящихся за пределами "логики представления страницы" — с ее точки зрения, практически "в вакууме") отношениях между описываемыми разметкой сущностями, а лишь о взаимоотношениях самих элементов разметки (представления). Правда, в ранних HTMLях реальные иерархические структуры вообще нечасто встречались (разве что многоуровневые меню да иногда те же карты сайта, пожалуй). Но если те HTMLи, действительно, больше походили на "условную схему описания" структуры данных, то текущие стандарты явно развиваются в сторону их "функциональной модели", что в плане машинного разбора гораздо удобнее. Создание иерархической структуры вложенных неявных секций по разноуровневым заголовкам ("document outline") в HTML5-парсере — имхо, того же поля ягода.

В конечном итоге, естественный смысл "крошек" — иерархическая "лесенка", я считаю. И единственный способ выразить семантику этой иерархичности в разметке (так, чтоб это поняла и машина, т.е. чтобы сама разметка стала семантичной) — это вложенная, рекурсивная структура ("вырожденное дерево"). Что нам и рекомендует Гугл. Как минимум, для случая, когда в машинном анализе иерархических связей возможна неоднозначность (в простейшем-то однозначном случае, да, естественного порядка в коде хватает для выяснения "кто чей папа", причем и без дополнительного подчеркивания порядковой зависимости соотв. спецтегом).

Поэтому я не вижу существенных причин отказываться от явного отображения иерархии в разметке там, где иерархичность уместна по семантике и может помочь машине ("крошки", имхо — как раз такой случай). Если же всё равно разворачивать такую структуру в линейную развертку (тем самым лишая машину информации о иерархичности как таковой), то явных семантических преимуществ у списочного варианта такой развертки не видно (вся семантика, у нее остающаяся — не выражение иерархии, а лишь ее отображение, т.е. представление... так за что боролись?;). А если (машине) не видно разницы — нужно ли усложнять там, где всё просто (причем ценой явного ухудшения читаемости для некоторых пользователей-людей)?

Дисклеймер: я признаю, что семантика — вещь гибкая и местами сильно субъективная, так что на "Единственно Верную Истину™" не претендую. Но по-моему всё логично :)

спустя 35 минут [обр] Marat Tanalin(4/78)[досье]

Илья Cтpeльцын aka SelenIT[досье]

вся семантика, у нее остающаяся — не выражение иерархии, а лишь ее отображение, т.е. представление

Список родительских страниц является таковым как для графического браузеров, так и для голосового. При чём здесь представление?

А если (машине) не видно разницы — нужно ли усложнять там, где всё просто (причем ценой явного ухудшения читаемости для некоторых пользователей-людей)?

Насколько я понимаю, вам для спокойствия просто не хватает HTML-элемента, предназначенного именно для разметки хлебных крошек. Например:

<breadcrumbs>
<a href="/">Главная</a>
<a href="/services/">Услуги</a>
</breadcrumbs>

Тогда у машины точно не было бы сомнений в том, что перед ней хлебные крошки, и мыслей о дополнительном отражении иерархии путём избыточной вложенности (равно как и о ненужности списочности как таковой) не возникало бы в принципе.

Но такого элемента нет, зато есть списки; а насколько углубляться в «семантизацию» — каждый решает сам. ;-)

спустя 12 часов [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]
Список родительских страниц является таковым как для графического браузеров, так и для голосового.

Именно! Для любого машинного разбиратора он остается лишь списком разделов, а не отражением места в их структуре.

Тогда у машины точно не было бы сомнений в том, что перед ней хлебные крошки, и мыслей о дополнительном отражении иерархии путём избыточной вложенности

Как показывает практика и примеры гугловых сниппетов, не всегда эта вложенность избыточна (конкретно — в случае, когда структура сайта не древовидная, а сетевая, и построить иерархию можно несколькими способами). Без явной передачи вложенности машина в таком случае запутается.

В принципе, с ролью "недостающего элемента специально для крошек" неплохо справляется микроразметка. А вот списочность там именно что слегка избыточна (хотя машинам и не мешает, но и не помогает особо).

спустя 2 месяца 27 дней [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]

На другом форуме в похожей теме кинули ссылку на актуальную спеку, которую я сам как-то прозевал:

This specification does not provide a machine-readable way of describing bread-crumb navigation menus. Authors are encouraged to just use a series of links in a paragraph. The nav element can be used to mark the section containing these paragraphs as being navigation blocks.

Не список всё-таки! :)

спустя 15 часов [обр] Marat Tanalin(4/78)[досье]
Илья Cтpeльцын aka SelenIT[досье]
Ключевой фразой является первая. Спецификация просто не регламентирует этот вопрос, и конкретную разметку хлебных крошек определяет веб-разработчик.
спустя 2 часа 7 минут [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]
Имхо, эта первая фраза говорит, что в стандарте за крошками не закреплено никакой особой крошечной (сорри за каламбур) семантики, ради которой стоило бы бы городить какие-то добавочные огороды с переопределением привычного поведения элементов и т.п. А раз так, то веб-разработчикам советуют не усложнять себе жизнь и размечать крошки самым простым и интуитивным вариантом. Хотя права на осознанное усложнение себе жизни спецификация у разработчиков, конечно, не отнимает...
спустя 4 часа 2 минуты [обр] Евгений Седов aka KPbIC(5/176)[досье]

Как-то давно я делал крошки в виде туриста, вышедшего из дома. Из рюкзака у него что-то сыпалось. На правом конце он оглядывалсяя назад и удивленно смотрел на свой путь. Имеет такая реализация право на жизнь? Последняя страница, на которой находится турист, ссылкой не является. Первый элемент (дом) всегда отображается картинкой дома. То есть, при отрисовывании прохода для нас важны первая и последняя крошка. Теперь представим, что вместо выпадающих из рюкзака вещей он оставлял бы следы - левый-правый, левый-правый... в зависимости от четности индекса. Ну чем не классический список?

Если вернуться к вложенным спискам — а кто вообще сказал, что крошки должны быть иерархией? Разве нельзя забыть о вложенности разделов и показывать историю реального пути по сайту?

спустя 52 минуты [обр] LookeR(9/1069)[досье]

Это не всегда реальный "путь" по сайту... это, как правило, текущее местонахождение в заранее известной структуре (в т.ч. и иерархической ).

Яркая иллюстрация - интернет-магазины.
Как организована структура на конкретном сайте - такую строку и получите:
Мелкая бытовая техника > Тостеры > производители
Мелкая бытовая техника > Производитель > Тостеры > конкретная модель
Производитель > мелкая бытовая техника > Тостеры > конкретная модель

и показывают крошки совсем не пройденный путь, т.к. зачастую ткнул в часто покупаемую/рекомендуемую модель и заплутал, т.к. возвращаясь по крошкам в Тостеры влетаешь в дикое количество изделий и зачастую без возможности фильтрации на этой стадии. Приходится формировать поисковый запрос к базе и т.д. и т.п.

Так что название и "хлебные крошки" и "турист" это неправда.
Дом - спорит с пиктограммой "сделать домашней страницей в браузере". (сам я никогда на "дом" не нажимаю).
То, что называется крошками по сути - текущее положение согласно структуры сайта. Зачастую с индивидуальным навигационным функционалом (часто в интернет-магазинах это какой-то очередной бестолковый запрос к базе без учета уже имеющихся фильтров)...

Как правило, я делаю "крошки" заголовком какого-нибудь 4-5-6 уровня (в зависимости от заложенного числа заголовков в дизайне).
Для меня это больше дополнительный заголовок на странице (аналогичен Title - есть, но почти никто не читает и не пользуется).
Городить же список... список меню, список крошки, списки в тексте, списки в доп.навигации... как-то мне кажется избыточно это для структуры страницы и немного нелогично. Да, у этого элемента есть навигация, но на сложных сайтах бесполезная. Да, он отражает иерархию, но зачастую "виртуальную", а не реальную. Да, это вроде список, но не перечисление и не нумерованный, а вложенный (хотя на каждом уровне всего по одному пункту) и если отражать его реальную структуру - слишком много лишней разметки, НМВЗ.

И еще я всегда задаю себе вопрос когда наталкиваюсь на идеологию разметки: а как бы это прочёл вслух браузер "для слепых"?
Сам никогда не видел и не ставил такого браузера, но надо видимо заиметь...

спустя 33 минуты [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]
Тоже придерживаюсь мнения, что "крошки" — не путь, а местонахождение, всегда так их и воспринимаю. Как адрес файла в файловой системе или "мимикрирующий" под него иерархический URL (неспроста давным-давно "дизайнер-которого-нельзя-называть-по-имени" обозвал эту навигацию "дублирующей"). Реальный путь по сайту (который сидит в history браузера) может быть запутанным до ужаса, с кучей самопересечений, и не факт, что он вообще затронет т.н. "главную страницу", отобразить-то его можно, но лично я смысла в этом не вижу (разве что для статистики).
спустя 1 месяц 8 дней [обр] Евгений Седов aka KPbIC(5/176)[досье]
сообщение промодерировано

Оставим крошки как реальный путь. Я немного не то хотел сказать, приводя ример с туристом и домом. Если вам не нравится, можете заменить на дерево или на ступеньки в подвал, чтобы исключить аналогию с реальным путем по сайту и оставить только путь от главной до текущей.

Смысл в том, что первый и последний элемент могут выделяться из общего множества элементов, что характерно именно для списка. Только у списка есть голова и хвост, у множества равнозначных элементов этих атрибутов нет.

Кроме того, имеет же значение в каком порядке расположены элементы? Вы не можете перемешать их, подобно тому, как вы переставляете слова в предложении в русском языке.

спустя 5 дней [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]
Только у списка есть голова и хвост, у множества равнозначных элементов этих атрибутов нет.

Именно! Но у того списка, который "связный список" как структура данных. А HTMLный список из структур данных скорее соответствует обычному массиву. Который по сути именно что множество равнозначных элементов, без головы и хвоста, и упорядоченность для него — лишь вариант представления. Тогда как в связном списке она не обязана присутствовать явно, но тривиально получается сама при обходе по указателям.

На примере русского языка: фраза "Авраам родил Исаака" сохраняет семантику и в виде "Исаака родил Авраам" — сказуемое-указатель "родил" указывает с Авраама на Исаака независимо от порядка в представлении (хотя первое выглядит естественнее). А вот в виде списка "1) Авраам, 2) Исаак" — этой семантики уже нет, даром что порядок не нарушен. Даже если явно задать контекст, что речь о родословном древе, сходу определить место Исаака в нем уже нельзя (сын он Аврааму или младший брат?). А уж в отрыве от контекста — и подавно.

Имхо, привычные разделители в "крошках" — что слеш, как традиционный разделитель файловых путей в *nix, что стрелка, как еще более традиционная метафора указателя — как раз и играют роль такого "сказуемого", выражающего характер связи между пунктами (для человека). HTMLный список же эту связь никак не выражает. А штатного средства выразить семантику связного списка для машины в HTML, к сожалению, нет (вложенность — не идеальное, но, пожалуй, наилучшее приближение). Поэтому авторы спеки и остановились на варианте с абзацем — как на наименьшем зле, "наименее неподходящем" варианте. Семантически нейтральная разметка, сама по себе не выражающая (почти) ничего, явно лучше разметки, выражающей семантику принципиально другой структуры данных...

спустя 13 дней [обр] Marat Tanalin(4/78)[досье]

Кстати, вот как свёрстаны хлебные крошки на addons.mozilla.org:

<nav id="breadcrumbs">
   <ol>
      <li><a href="/ru/firefox/" class="home" title="Дополнения Firefox">Дополнения Firefox</a></li>
      <li><a href="/ru/firefox/extensions/">Расширения</a></li>
      <li><span>UsableHomeButton</span></li>
   </ol>
</nav>

Упорядоченный навигационный список. ;-)

спустя 2 часа 16 минут [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]

Примеров можно привести много, на любой вкус :). На сайте самого W3C (!), например, список почему-то НЕупорядоченный (!!), с разделителями в контенте:

<div id="w3c_crumbs">
       <div id="w3c_crumbs_frame">
        <ul class="bct"> <!-- .bct / Breadcrumbs -->
          <li class="skip"><a tabindex="1" accesskey="2" title="Skip to content (e.g., when browsing via audio)" href="#w3c_content_body">Skip</a></li>

          <li><a href="/">W3C</a>&#xA0;<span class="cr">&#xBB;</span>&#xA0;</li>
          <li><a href="/standards/">Standards</a>&#xA0;<span class="cr">&#xBB;</span>&#xA0;</li>
          <li class="current">Web Design and Applications</li>
        </ul>            
     </div>
    </div>

А на вышеупомянутой справке Гугла — сплошной абзац ссылок, совсем по WHATWG-шному. Я же не утверждаю, что верстать крошки списком нельзя, я защищаю тезис, что в этом нет особого смысла... :)

спустя 36 минут [обр] Илья Cтpeльцын aka SelenIT(3/171)[досье]

P.S. Оказывается, как обычно, в забугорнете всё "украдено" за 7 лет до нас...

If semantic purity is your goal, then nested lists may be the way for you — if simplicity is what you’re after, something like Method A might work.

"Метод А" у них — это ссылки сплошняком, а-ля Гугл/WHATWG :)

Powered by POEM™ Engine Copyright © 2002-2005