Семантика текущего пункта меню?

Question

[Borodean]

Предлагаю поговорить о «метафизике» — семантике html-верстки.


Давайте предположим, что на неком сайте есть такой блок навигации:

<nav>
  <li><a href='/cards/'>Карты</a></li>
  <li><a href='/money/'>Деньги</a></li>
  <li><a href='/two-barrels/'>Два ствола</a></li>
</nav>

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

Вопрос — как семантически верно сверстать такой пункт меню?


Яндекс предлагает такой вариант:

<li><b class='active'>Деньги</b></li>

Хабрахабр — такой:

<li><a href='/money/' class='disabled'>Деньги</a></li>

Первый вариант «плох» тем, что использует «грязный» прием в виде элемента b, второй — тем, что оставляет пункт меню рабочей ссылкой.

Answer 1

[Анатолий]

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

Comments

[Borodean]

Зачем кликать по ссылке, ведущей на эту же страницу?

[Анатолий]

За тем же зачем люди нажимают Ф5 или кнопку «обновить» в браузере. Я мышью пользуюсь.

[tick]

я вот сейчас нахожусь на habrahabr.ru/qa/11689/, в меню вижу пункт q&a, который является ссылкой на индекс раздела. при этом в html коде написано
[li class="current"]
[a href="http://habrahabr.ru/qa/"] Q&A [/a]
[/li]

норм. вариант по-моему.

[Анатолий]

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

Answer 2

[habrauser]

Никогда не задумывался, нравится когда вот так:

<li><span>Деньги</span></li>

Comments

[girichev]

<li class='disabled'>Деньги</li>

Answer 3

[dom1n1k]

Я делаю так:

<li class="active">Главная</li>
<li><a href="/products/">Продукты</a></li>
...

Просто, понятно и эффективно.

Иногда внутрь добавляется ещё один span или div — если нужна дополнительная технологическая обертка для каких-то визуальных эффектов. Но это лишь при необходимости, в общем случае без.

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

Comments

[Borodean]

Согласен на счет того, что «нет никакой катастрофы». Именно для этого в начале вопроса я сыронизировал, назвав семантичность «метафизикой». Это всё just for fun.

Answer 4

[bezumkin]

Можно менять вот так:

<li><a href='javascript:void(0)' class='active'>Деньги</a></li>

Comments

[bezumkin]

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

Для выделения активной ссылки нужно добавить только одну строчку в css, типа:

.menu a {color: green;} /* Обычная ссылка*/
.menu a.active {font-weight: bold; color: black;} /* Активная, отключенная ссылка */

Answer 5

[Павел Мышкин]

(согласно правилам хорошего тона)

- тогда еще при наведении на эту "уже не ссылку" сделайте подсказку, мол [Вы, сударь, уже тут]

Но что-то мне кажется это действительно из метафизики и к реальности непременимо (кроме активной страницы XK) ... хотя если так будет делать многие - то пользователи привыкнут.

Comments

[Максим Тимофеев]

а в футере ссылка "сударь, может быть вернемся на верх страницы в один клик? Что б Вам не в падлу было листать скролом?"
Вообще очень культурный сайт получится

Answer 6

[Илья Плотников]

Уберите тег , class active лучше назначить элементу , а в css писать li.active {}
Не думаю, что onclick в ссылке подходит, потому что я могу перейти по ссылке с помощью клавиатуры.
Может быть вообще href="#"?

Comments

[Илья Плотников]

тэг

[Илья Плотников]

все теги a съело. Забыл, что они здесь учитываются