Плохая верстка блока?

Question

[string001]

Добрый!

Есть блок:


Вот разметка:

<section class="sort">
	<span class="sort__title">сортировать:</span>
	<ul class="sort-item">
		<li><a href="#">по цене</a></li>
		<li><a href="#">по типу</a></li>
		<li><a href="#">по функционалу</a></li>
	</ul>
	<div class="sort-btn">
		<a href="#" class="icon-down-dir"></a>
		<a href="#" class="icon-up-dir"></a>
	</div>
</section>

Мне кажется она ужасна!
Как сверстать его лучше?

Answer 1

[Сергей delphinpro]

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

<section class="sort">
  <span class="sort__title">сортировать:</span>
  <span class="sort__items">
    <a class="sort__item" href="#">по цене</a>
    <a class="sort__item" href="#">по типу</a>
    <a class="sort__item" href="#">по функционалу</a>
  </span>
  <span class="sort__controls">
    <a href="#" class="sort__direction sort__direction_down icon-down-dir"></a>
    <a href="#" class="sort__direction sort__direction_up icon-up-dir"></a>
  </span>
</section>

Comments

[sim3x]

Идеально, заменить section на div

[Сергей delphinpro]

sim3x: да, верно. section тоже тут не к месту.

Answer 2

[Сергей Брава]

Используйте ul если это действительно должно быть списком объектов\методов\элементов. Вся суть семантики в нативных принадлежностях.

Т.е.

если это список, то <ul>
если это параграф, то <p>
если это боковая панель, то <aside>
если это навигация, то <nav>

Сергей все верно написал, но я бы добавил HTML5

<NAV class="sort">
  <span class="sort__title">сортировать:</span>
  <span class="sort__items">
    <a class="sort__item" href="#">по цене</a>
    <a class="sort__item" href="#">по типу</a>
    <a class="sort__item" href="#">по функционалу</a>
  </span>
  <span class="sort__controls">
    <a href="#" class="sort__direction sort__direction_down icon-down-dir"></a>
    <a href="#" class="sort__direction sort__direction_up icon-up-dir"></a>
  </span>
</NAV>

Мораль: перед тем как выбрать тег, произнесите у себя в голове:
"Что это за элемент\часть элемента?"

Comments

[Ankhena]

С nav я бы поспорила и оставила бы div. Все таки фильтр не навигация. Да и ссылки скорее всего не ссылки, а span с функциональностью по js.

[Сергей Брава]

Ankhena W: А что такое навигация в веб и что такое фильтр в веб? Попробуйте поразмыслить "машинным языком".

[Ankhena]

Сергей Брава: Навигация - переход, фильтр - нет.

[Сергей Брава]

Все очень тонко. Если на макете это единственный фильтр и он не работает через AJAX, то я 100% оберну его в nav. Так как поисковику придется переходить по $_GET ссылкам. А если же это, скажем, аля SPA фильтр, то да, соглашусь на все 100%, оставлю div и все переделаю a в button .