Хлебные крошки

psywalker · April 10, 2011

Добрый день камрады!

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

Так всё таки друзья, список или...

Serlutin · April 10, 2011

Посмотрим внешне, что такое "Хлебный крошки".

По виду это обычная полоска, но не список.

Поэтому оформлять лучше просто ссылками, а обернуть всё это можно в <p> (какой-никакой, а всё-таки параграф).

Так, например, организована справка в Google.

Однако, если используются не обычный вид ссылок, а стилизованный. Например, для каждой ссылки требуется несколько фоновых рисунков, то можно использовать и список. Так как по разметке он будет выглядеть лучше, чем простые теги, типа <span> или других.

s0rr0w · April 10, 2011

Абсолютно пофиг. Если спискозадрот, делай списками. Иначе делай обычными ссылками

swetlana · April 10, 2011

А ведь не список!

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

А ведь это именно строка навигации. И этим всё сказано.

Можно провести аналогию с файловой системой: список может быть файлов, но адрес каждого файла — это именно строка.

psywalker · April 10, 2011

Абсолютно пофиг. Если спискозадрот, делай списками. Иначе делай обычными ссылками

А допустим я НЕспискозадрот, но тогда возникает вопрос: А как ты смотришь на контейнеры, которыми являются LI и которыми легче управлять, нежели с разными элементами без родителя? Ведь намного проще оперировать одним блоком, и добавлять тупо контейнер LI и не париться или я попутал?

А ведь это именно строка навигации. И этим всё сказано.
Можно провести аналогию с файловой системой: список может быть файлов, но адрес каждого файла — это именно строка.

Вот тебе то легче в этом плане, ты можешь свободно побросать ссылки с палками в элемент <nav> и не париться, а вот нам уже труднее определиться.

Serlutin · April 10, 2011

В Google <p class="breadcrumbs"> и они тоже не парятся. А вот на w3c сделано с помощью списков. Значит и тот, и другой вариант имеет право на существование. Всё зависит от того, насколько это обосновано.

SelenIT · April 10, 2011

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


<figure role="breadcrumbs">
	<!-- figure изолирует outline крошек от основного outline страницы,
	role="breadcrumbs" сейчас не существует и приведено просто для примера "было бы хорошо, если..." -->
	<figcaption>Вы здесь:</figcaption>
	<section>
		<h6><a href="/">Главная</a></h6>
		/
		<section>
			<h6><a href="/section/">Важный раздел</a></h6>
			/
			<section>
				<h6><a href="/section/subsection/">Интересный подраздел</a></h6>
				/
				<section>
					<h6>Какая-то страница</h6>
				</section>
			</section>
		</section>
	</section>
</figure>

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

Еще я подумал, что для иерархических отношений между ссылками просто обязано существовать специательное значение атрибута rel, но, похоже, с этим атрибутом вообще какая-то свистопляска (были какие-то предложения еще в HTML4, но от них, судя по всему, давно отказались, потом в HTML5 хотели сделать по-другому — и о5 не сделали). А жалко — по-моему, семантике отношений между ссылками в крошках в этом атрибуте как раз самое место...

А как ты смотришь на контейнеры, которыми являются LI и которыми легче управлять, нежели с разными элементами без родителя? Ведь намного проще оперировать одним блоком, и добавлять тупо контейнер LI и не париться или я попутал?

Имхо, вся прелесть обычных ссылок в строке — что ими и управлять практически не надо, они сразу ведут себя как нужно . К тому же ссылка — сама по себе контейнер, а концевой элемент можно обернуть чем-нибудь слабосемантично-выделяющим, типа b/i. Общий контейнер, конечно, будет — например, p, как предлагает Serlutin. И стиль этого контейнера будет определять вид разделителей.

С Li-шками же эти разделители сразу становятся источниками проблем. Между Li-шками их не всунуть, вставлять внутрь — непонятно с какой стати, плюс разделители становятся ассиметричными, что сразу усложняет стилизацию, генерировать CSS-ом — все те же проблемы плюс костыли для браузеров...

А вот на w3c сделано с помощью списков

Причем ваще неупорядоченных. Они там точно того...

psywalker · April 10, 2011

SelenIT

Спасибо за развёрнутый ответ, очень убедительно изложил, я почти сломался в пользу строки, но всё же есть вопросы:

1. Объясни плиз, почему ты тут сделал именно так? Каждую строчку прям.

<figure role="breadcrumbs">
        <!-- figure изолирует outline крошек от основного outline страницы,
        role="breadcrumbs" сейчас не существует и приведено просто для примера "было бы хорошо, если..." -->
        <figcaption>Вы здесь:</figcaption>
        <section>
                <h6><a href="/">Главная</a></h6>
                /
                <section>
                        <h6><a href="/section/">Важный раздел</a></h6>
                        /
                        <section>
                                <h6><a href="/section/subsection/">Интересный подраздел</a></h6>
                                /
                                <section>
                                        <h6>Какая-то страница</h6>
                                </section>
                        </section>
                </section>
        </section>
</figure>

2.

Еще я подумал, что для иерархических отношений между ссылками просто обязано существовать специательное значение атрибута rel, но, похоже, с этим атрибутом вообще какая-то свистопляска (были какие-то предложения еще в HTML4, но от них, судя по всему, давно отказались, потом в HTML5 хотели сделать по-другому — и о5 не сделали). А жалко — по-моему, семантике отношений между ссылками в крошках в этом атрибуте как раз самое место...

Да, я тоже слышал об этом, и мне кажется, что так как вещь очень важная, то должны сделать в итоге.

3.

С Li-шками же эти разделители сразу становятся источниками проблем. Между Li-шками их не всунуть, вставлять внутрь — непонятно с какой стати, плюс разделители становятся ассиметричными, что сразу усложняет стилизацию, генерировать CSS-ом — все те же проблемы плюс костыли для браузеров...

Да, тоже весомый аргумент кстати.

В Google <p class="breadcrumbs"> и они тоже не парятся. А вот на w3c сделано с помощью списков. Значит и тот, и другой вариант имеет право на существование. Всё зависит от того, насколько это обосновано.

На w3c по моему мнению вообще нельзя полагаться и брать пример. Они себе сами не хозяева давно уже.

s0rr0w · April 10, 2011

А допустим я НЕспискозадрот, но тогда возникает вопрос: А как ты смотришь на контейнеры, которыми являются LI и которыми легче управлять, нежели с разными элементами без родителя?

Не вижу никакого "легче управлять". С точки зрения темплейтирования, чем больше лишних тегов, тем хуже.

Ведь намного проще оперировать одним блоком, и добавлять тупо контейнер LI и не париться или я попутал?

Так и ссылку точно так же легко добавить.

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

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

psywalker · April 10, 2011

Не вижу никакого "легче управлять". С точки зрения темплейтирования, чем больше лишних тегов, тем хуже.

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

Да, и ты не мог бы рассказать поподробнее про темплейтирование

Так и ссылку точно так же легко добавить.

Ну а ещё ж и палка после ссылки?

s0rr0w · April 10, 2011

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

Ээээ


<div class="breadcrumbs">
 <a href="#">Main</a>
 /
 <a href="#">Page1</a>
</div>

Что тут нельзя закинуть или где париться?

Да, и ты не мог бы рассказать поподробнее про темплейтирование

Темплейтирование - это процесс натягивания "html-шкурки" на серверный код. Фактически, это превращение шаблона и данных в готовый html код.

psywalker · April 10, 2011

Ээээ
<div class="breadcrumbs">
 <a href="#">Main</a>
 /
 <a href="#">Page1</a>
</div>
Что тут нельзя закинуть или где париться?
Темплейтирование - это процесс натягивания "html-шкурки" на серверный код. Фактически, это превращение шаблона и данных в готовый html код.

Спасибо, я немного понял кажется, а вот ответь тогда, вот такая например ситуация:

Во тут есть блок новостей в левой колонке, внизу http://testhost1-ru.1gb.ru/first-layout/index.html , а вот его код:

<div class="news_body">
					<div class="news_block">
						<h5>31.12.2002</h5>
						<p>To use flash and navi gate, 
						fully customizab i syst add 
						discussing andby topic oro
						alliscussing andy.</p>
					</div>
					<div class="news_block">
						<h5>31.12.2002</h5>
						<p>To use flash and navi gate, 
						fully customizab i syst add 
						discussing andby topic oro
						alliscussing andy.</p>
					</div>
					<div class="news_block">
						<h5>31.12.2002</h5>
						<p>To use flash and navi gate, 
						fully customizab i syst add 
						discussing andby topic oro
						alliscussing andy.</p>
					</div>
				</div>

Вопрос: В данной ситуации человек правильно сделал, что обернул каждую новость в див <div class="news_block"> ?

SelenIT · April 10, 2011

psywalker,

Объясни плиз, почему ты тут сделал именно так?

Практически от балды

. Моей идеей было, чтобы для HTML5-парсера получилась примерно такая outline:


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

изолированная от основной outline страницы. Код чисто иллюстративный. Это не значит, что я рекомендую именно такую схему для реальных проектов, скорее наоборот .

s0rr0w,

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

Да, всё так: проекция на одну ось, банальный одномерный массив. Но это одно измерение — именно глубина, а не ширина. И, на мой взгляд, для крошек это существенно. Простой список этого не передает совсем. А передать очень хочется...

s0rr0w · April 10, 2011

Вопрос: В данной ситуации человек правильно сделал, что обернул каждую новость в див <div class="news_block"> ?

С логической точки зрения - абсолютно верно. Он отделил контент одного элемента от другого.

Да, всё так: проекция на одну ось, банальный одномерный массив. Но это одно измерение — именно глубина, а не ширина. И, на мой взгляд, для крошек это существенно. Простой список этого не передает совсем. А передать очень хочется...

Поворот на 90 градусов делает глубину шириной

Если очень сильно хочется, но не получается, то спасут кастом-теги


<c:breadcrumbs>
 <a href ...>
</c:breadcrumbs>

rash · April 10, 2011

Ну все, судя по тому, что тут уже наговорили, готовлюсь отбиваться от гнилых помидоров

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

ИМХО все-таки список. Да, список элементов иерархии. Список уровней, если переформулировать. В идеале, конечно, показать иерархию (но не реализовывать иерархически, потому что сами пункты — всего лишь названия, ссылки на элементы в иерархии). Атрибуты rel для этого бы чудесно подошли, но не положено Поэтому — список. Одномерный список уровней. Поскольку уровни определенным образом вложены, и в другой последовательности не имеют смысла, то список просто обязан быть упорядоченным.

s0rr0w · April 10, 2011

ИМХО все-таки список.

Тогда вот такой текст, по логике спискозадротов, правильно оформлять так:


Несколько стран подписало ратифицировало договор. Среди них <ul><li>Германия, </li><li>Франция, </li><li>Испания</li></ul>. Готовятся ратифицировать следующие страны: <ul><li>Англия, </li><li>Польша, </li><li>Португалия</li></ul>.

Визуально он должен выглядеть вот так:


Несколько стран подписало ратифицировало договор. Среди них Германия, Франция, Испания. Готовятся ратифицировать следующие страны: Англия, Польша, Португалия.

SelenIT · April 10, 2011

ИМХО все-таки список. Да, список элементов иерархии. Список уровней, если переформулировать. В идеале, конечно, показать иерархию (но не реализовывать иерархически, потому что сами пункты — всего лишь названия, ссылки на элементы в иерархии). Атрибуты rel для этого бы чудесно подошли, но не положено Поэтому — список. Одномерный список уровней.

В теории, да, как-то так. Но... смотрим окончание подписи нашей неподражаемой Светланы и пытаемся обрести просветление. Итак, типа IT-коан: молодой послушник из обычной индийской деревни, не обучавшийся в универститетах страшным наукам типа "семантика", зато с прекрасной бытовой логикой "здравого смысла", заходит на сайт некоего учителя, чтобы обрести знание об истинной сути вещей. А админ этого сайта накануне хорошо отметил CSS Naked Day (кстати, поздравляю всех с прошедшим!) и спьяну забыл включить стили обратно . И видит наш простой индийский паренек примерно следующее:

Вы здесь:
Главная
Важный раздел
Интересный подраздел
Какая-то страница
...или здесь:
Главная >
Важный раздел >
Интересный подраздел >
Какая-то страница
...а может, здесь:
Главная
> Важный раздел
> Интересный подраздел
> Какая-то страница
...или здесь:
Главная > Важный раздел > Интересный подраздел > Какая-то страница
...или вообще здесь:
Главная
Важный раздел
Интересный подраздел
Какая-то страница

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

rash · April 10, 2011

Тогда вот такой текст, по логике спискозадротов, правильно оформлять так:

Иногда и так делается, только вот тут уж совсем не понять, зачем.

«Спискозадротство» иногда объясняется очень банально: это достаточно удобная структура для оформления. Подходит ли она по семантике — дело десятое. Вот и получается список на списке.

psywalker · April 10, 2011

С логической точки зрения - абсолютно верно. Он отделил контент одного элемента от другого.

Погоди, а ссылка с палкой разве не является контентом одного элемента? Объясни поподробнее эту тонкую грань и объясни пожалуйста в чём разница?

s0rr0w · April 10, 2011

Иногда и так делается, только вот тут уж совсем не понять, зачем.

Этот пример - классика жанра. Спискозадроты не видят в нем ничего военного, их ничего не раздражает в этом примере. Потому что они не могут отказаться от одного заблуждения, что все что перечисляется, должно быть <ol/> или <ul/>. Не подверженный вирусу списка головного мозга разработчик отчетливо видит абсурдность примера.

«Спискозадротство» иногда объясняется очень банально: это достаточно удобная структура для оформления. Подходит ли она по семантике — дело десятое. Вот и получается список на списке.

Семантика списков такова, что они вообще не подходят для оформления. Откуда вообще взялись списки? Из оформления документов, статей, короче, из печатного мира. Они органично выглядят в теле статьи. Интерактивная суть HTML требовала заполнить пустоту интерфейсных потребностей и плюшек, как то меню, навигация, тулбары и прочее, и, чье-то воспаленное сознание додумалось применить для этого списки. Это настолько укоренилось в сознании последователей, что никто теперь не видит ошибки логики, что оформление должно быть оформлением, а контент - контентом.

Погоди, а ссылка с палкой разве не является контентом одного элемента? Объясни поподробнее эту тонкую грань и объясни пожалуйста в чём разница?

Я не вижу твоей проблемы. Может она надумана? Что тебя беспокоит?

psywalker · April 10, 2011

* смотрю мнения расходятся, поэтому создал опрос

s0rr0w

Погоди, а ссылка с палкой разве не является контентом одного элемента? Объясни поподробнее эту тонкую грань и объясни пожалуйста в чём разница?
Я не вижу твоей проблемы. Может она надумана? Что тебя беспокоит?

Я просто не могу понять, ссылка с палкой разве не контент одного элемента?

Может и надумана, просто запутался

Не подверженный вирусу списка головного мозга

Редкая болезнь

Семантика списков такова, что они вообще не подходят для оформления. Откуда вообще взялись списки? Из оформления документов, статей, короче, из печатного мира. Они органично выглядят в теле статьи. Интерактивная суть HTML требовала заполнить пустоту интерфейсных потребностей и плюшек, как то меню, навигация, тулбары и прочее, и, чье-то воспаленное сознание додумалось применить для этого списки. Это настолько укоренилось в сознании последователей, что никто теперь не видит ошибки логики, что оформление должно быть оформлением, а контент - контентом.

А что делать? Какова правильная замена этой поголовной ведомости на твой взгляд?

SelenIT · April 10, 2011

ссылка с палкой разве не контент одного элемента?

А с которой из палок — той, что после, или той, что перед?

Имхо, если всё-таки рассматривать крошки как список, то палка в контент никак не попадает, это чистой воды оформление, как у обычного UL-списка маркер. На ее месте с тем же успехом может быть |, ::, > (как на этом форуме и у гугла), » (как на W3C), а то и вообще рисованная пиксельная стрелка — на семантике списка ссылок такая замена никак не отразится.

Проекция имеет простое перечисление, это банальный одномерный массив.

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

Serlutin · April 10, 2011

Я просто не могу понять, ссылка с палкой разве не контент одного элемента?

Если очень хочется, то палку можно обернуть в <span class="separator"> (так реально советуют). Смысл в этом есть только один, если нужно задать палке, кавычкам, стрелочке и т. д. красивый отступ справа и слева. Да и то, лучше задать отступ ссылкам, чем добавлять лишние элементы.

SelenIT · April 11, 2011

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

psywalker · April 11, 2011

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

Дружище, спасибо за ссыль, и есть вопросы:

1.

Если данные навигации размечены в основной части веб-страницы,

Что это значит, где эта основная часть, что он имеют ввиду?

2.

Строка навигации может содержать ряд различных свойств, которые размечаются с помощью микроданных или RDFa. Google распознает следующие свойства строки навигации.
Свойство Описание
title Название элемента навигации.
url URL элемента навигации.
child Следующий элемент навигации в иерархии. Дочерний элемент также должен быть элементом навигации.

А ты не мог бы привести пример, где правильно задействованы все эти свойства.

3. Т.е. из этого описания смело можно делать вывод, что Хлебные крошки - это строка, и никак НЕ список?

Sign In

Хлебные крошки

Хлебные крошки 20 members have voted

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

s0rr0w

s0rr0w

SelenIT

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information

Хлебные крошки
20 members have voted