FLEXBOX LAYOUT: проблемы с навигацией

Question

<header class="main-header">
  <h1 class="name"><a href="#">Best City Guide</a></h1>
    <ul class="main-nav">
      <li><a class="main-navA" href="#">ice cream</a></li>
      <li><a class="main-navA" href="#">donuts</a></li>
      <li><a class="main-navA" href="#">tea</a></li>
      <li><a class="main-navA" href="#">coffee</a></li>
    </ul>

^how i am used to writing html code

<header class="main-header">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <div><a class="main-navA" href="#">ice cream</a></div>
        <div><a class="main-navA" href="#">donuts</a></div>
        <div><a class="main-navA" href="#">tea</a></div>
        <div><a class="main-navA" href="#">coffee</a></div>
</header><!--/.main-header-->

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

Как вы думаете, лучше не использовать элементы UL для навигации, чтобы облегчитьвыровнять ваши flex-элементы css?Вместо элементов li возможно использовать элементы div?или вы, ребята, думаете, что это плохо, потому что это не семантический HTML?

Answer 1

Это мой предпочтительный способ, если я не хочу использовать ul и li's

<header class="main-header">
    <div class="logo"><a href="#"></a></div>
    <div class="nav">
        <a href="#" class="main-navA1">ice cream</a>
        <a href="#" class="main-navA2">donuts</a>
        <a href="#" class="main-navA3">tea</a>
        <a href="#" class="main-navA4">coffee</a>
    </div>
</header>

Все еще использует div, чтобы заблокировать вещи, но очистить, чем список.