Заголовок подменю, h1 или span / другое

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

Примеры

С размахом

<nav>
  <ul>
    <li>
      <span class="hover-me-for-submenu">Submenu Title</span>
      <ul class="submenu">
        <li><a>Link One</a></li>
        <li><a>Link Two</a></li>
        <li><a>Link Three</a></li>
      </ul>
    </li>
  </ul>
</nav>

С h1

<nav>
  <ul>
    <li>
      <h1 class="hover-me-for-submenu">Submenu Title</h1>
      <ul class="submenu">
        <li><a>Link One</a></li>
        <li><a>Link Two</a></li>
        <li><a>Link Three</a></li>
      </ul>
    </li>
  </ul>
</nav>

Спасибо


html css semantic-markup
person Matt    schedule 25.10.2016    source источник
comment
Это все содержание _1 _ / _ 2_? Если нет, не могли бы вы показать / описать, как выглядит полный список навигации?   -  person unor    schedule 26.10.2016

Ответы (3)


arrow_upward
1
arrow_downward

Из этих двух я лично использовал бы span, потому что h1 обычно используется для заголовков разделов, а иногда даже рекомендуется использовать только один раз для каждого документа в качестве основного заголовка сайта (хотя это спорно).

Другой вариант, который я использовал раньше, - вообще не добавлять никаких дополнительных элементов и сделать сам li перемещаемым:

<nav>
  <ul>
    <li class="hover-me-for-submenu">
      Submenu Title
      <ul class="submenu">
        <li><a>Link One</a></li>
        <li><a>Link Two</a></li>
        <li><a>Link Three</a></li>
      </ul>
    </li>
  </ul>
</nav>
person Andii    schedule 25.10.2016

arrow_upward
1
arrow_downward

Я бы не советовал использовать <h1> в качестве его технически "наиболее важного "тег заголовка (от 1 до 6). Я думаю, что заголовок подходит, но что-то более незначительное будет иметь больше смысла. Для получения дополнительной информации ищите семантический HTML. Это важно, потому что это может повлиять на ваше SEO и удобство использования программ чтения с экрана.

person Pat    schedule 25.10.2016

arrow_upward
0
arrow_downward

Я думаю, что рекомендуется использовать диапазон, поскольку он считается встроенным. Также без проблем с использованием h1

person Sai Bhasker Raju    schedule 25.10.2016