Стоит ли использовать несколько nav в футере?

Question

[Genri_Rus]

Вот пример меню в футере:

<footer>
	<nav>
		<h3>Меню 1</h3>
		<ul>
			<li><a href="#">Ссылка 1</a></li>
			<li><a href="#">Ссылка 2</a></li>
			<li><a href="#">Ссылка 3</a></li>
			<li><a href="#">Ссылка 4</a></li>
		</ul>
	</nav>
	<nav>
		<h3>Меню 2</h3>
		<ul>
			<li><a href="#">Ссылка 1</a></li>
			<li><a href="#">Ссылка 2</a></li>
			<li><a href="#">Ссылка 3</a></li>
			<li><a href="#">Ссылка 4</a></li>
		</ul>
	</nav>
</footer>

Comments

[Ankhena]

Стоить ли использовать несколько nav в футере?

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

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

[Genri_Rus]

Ankhena, проблема в том, что там мало дублей

Есть много новых ссылок

P.S. У меня ваша ссылка почему-то не открывается

[Ankhena]

Genri_Rus, не вижу никакой проблемы.
Просто список со ссылками.

[Genri_Rus]

Ankhena, а почему nav в футере нельзя ?

Я читал эту статью: https://www.aditus.io/patterns/multiple-navigation...

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

[Ankhena]

Genri_Rus, я не говорила, что нельзя.
Выводы из всего прочитанного вы можете делать самостоятельно. Тем более, что только вы знаете что там в этих ссылках и почему они, такие важные, засунуты в самый низ страницы. И только вы видели макет и знаете почему в эти два списка не объединяются в один ul и один nav (если он там всё таки нужен).

[Genri_Rus]

Ankhena, т.е. вы считаете что так будет правильнее ?

<footer>
  <nav>
    <h3>Меню 1</h3>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
      <li><a href="#">Ссылка 3</a></li>
      <li><a href="#">Ссылка 4</a></li>
    </ul>
    <h3>Меню 2</h3>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
      <li><a href="#">Ссылка 3</a></li>
      <li><a href="#">Ссылка 4</a></li>
    </ul>
  </nav>
</footer>

А H3 во что обрамлять ?

[Ankhena]

Genri_Rus,

т.е. вы считаете что так будет правильнее ?

Давайте я проявлю терпение и напишу третий раз: я считаю, что с вероятностью 95% у вас в футере НЕ основная навигация.

А H3 во что обрамлять ?

Чтобы что?

[Genri_Rus]

Ankhena, так будет правильнее ?

<nav>
    <h3>Меню 1</h3>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
      <li><a href="#">Ссылка 3</a></li>
      <li><a href="#">Ссылка 4</a></li>
    </ul>
    <h3>Меню 2</h3>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
      <li><a href="#">Ссылка 3</a></li>
      <li><a href="#">Ссылка 4</a></li>
    </ul>
  </nav>

Но тогда h3 придётся так обрамлять ?

<nav>
   <div>
		<h3>Меню 1</h3>
		<ul>
		  <li><a href="#">Ссылка 1</a></li>
		  <li><a href="#">Ссылка 2</a></li>
		  <li><a href="#">Ссылка 3</a></li>
		  <li><a href="#">Ссылка 4</a></li>
		</ul>
   </div>
	<div>
		<h3>Меню 2</h3>
		<ul>
		  <li><a href="#">Ссылка 1</a></li>
		  <li><a href="#">Ссылка 2</a></li>
		  <li><a href="#">Ссылка 3</a></li>
		  <li><a href="#">Ссылка 4</a></li>
		</ul>
    </div>
 </nav>

[Ankhena]

Genri_Rus, если эти div зачем-то нужны, то ок.

[Genri_Rus]

Ankhena, если div не будет, то h3 висят

И разве в тег nav можно div вкладывать ?

[Ankhena]

Genri_Rus,

И разве в тег nav можно div вкладывать ?

Валидатор https://validator.w3.org/nu/
Спецификация (второй раз в одном вопросе) https://html.spec.whatwg.org/multipage/#toc-semantics

[Genri_Rus]

Ankhena, покажите ваш вариант, как вы бы сделали

Возможно я что-то неправильно понимаю

[Ankhena]

Genri_Rus,
1. Покажите макет.
2. Сделайте песочницу с кодом.
3. Укажите, что у вас не выходит.

[Genri_Rus]

Ankhena, вы просто могли бы показать пример как правильно, вон ниже человек привел неплохой пример )

[Ankhena]

Genri_Rus, еще раз медленно:
не видя макета, дивы в которые вы хотите оборачивать ссылки с заголовками вообще не нужны.

вон ниже человек привел неплохой пример

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

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

[Genri_Rus]

Ankhena, у меня вот такое меню:

[Ankhena]

Genri_Rus,

у меня вот такое меню:

ну да, сам Озон не заморачивается на семантику.

Размышлять можно так:
1. Вложенный список хорошо, не нужно оправдывать лишние обертки ради заголовков, если не используете гриды.
2. С другой стороны, не так удобно делить на 5 столбцов. Но в данном случае без разницы, потому что они все равно разной ширины, если я правильно вижу.
3. Нужны ли эти ссылки большинству целевой аудитории. Я бы считала, что нет, если обратного не сказано в ТЗ. nav делать бы не стала.

[Genri_Rus]

Ankhena, а если в этом меню еще есть категории товаров ?

[Ankhena]

Genri_Rus,

а если в этом меню еще есть категории товаров ?

И они не дублируются где-то наверху, то дизайнер идиот )))

[Genri_Rus]

Ankhena, дублируются )

[Genri_Rus]

Ankhena, получается если есть повтор, то лучше сделать так ?

<ul class="nav-list">
    <li>
      <h3>About</h3>
      <ul>
        <li><a href="#">name</a></li>
        <li><a href="#">name</a></li>
      </ul>
    </li>
    <li> 
      <h3>Test</h3>
      <ul>
        <li><a href="#">name</a></li>
        <li><a href="#">name</a></li>
      </ul>
    </li>
  </ul>

[Ankhena]

Genri_Rus, да, я за такой вариант

Answer 1

[Froggyweb]

наверное лучше превратить это во вложенные списки

Comments

[Genri_Rus]

Вот так ?

<footer>
  <ul>
    <h3>Меню 1</h3>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
      <li><a href="#">Ссылка 3</a></li>
      <li><a href="#">Ссылка 4</a></li>
    </ul>
  </ul>
  <ul>
    <h3>Меню 2</h3>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
      <li><a href="#">Ссылка 3</a></li>
      <li><a href="#">Ссылка 4</a></li>
    </ul>
  </ul>
</footer>

[Froggyweb]

Genri_Rus, нет у ul дочерним может быть только li

<nav>
  <ul class="nav-list">
    <li>
      <h3>About</h3>
      <ul>
        <li><a href="#">name</a></li>
        <li><a href="#">name</a></li>
      </ul>
    </li>
    <li> 
      <h3>Test</h3>
      <ul>
        <li><a href="#">name</a></li>
        <li><a href="#">name</a></li>
      </ul>
    </li>
  </ul>
</nav>

[Genri_Rus]

Froggyweb, т.е. так семантически будет правильнее ?

Чем множественная вложенность nav'ов ?

[Froggyweb]

nav- это главная навигация по сайту вложенные главные навигации не айс, хотя никто на самом деле не знает как пользоваться новыми тегами.
очень хороший вариант по се ментике это слушать как озвучивается сайт читалками. Это и Макеев говорит, а ему я верю. Да и в остальных случаях новые теги никаких преимуществ не дают кроме визуального.

Answer 2

[Евгений Залецкий]

Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки.

Comments

[Genri_Rus]

Не совсем понятно, что вы имели ввиду

Один nav на все ul ?