<li> vs <span> in navigation menu

I wanted to ask when should we use li in navigation menus vs span.

In Davie’s Burgers project ‘span’ is used for the navigation menu.

    <img src="https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" />
    <span><a href="#">MENU</a></span>
    <span><a href="#">NUTRITION</a></span>
    <span><a href="#">ORDER</a></span>
    <span><a href="#">LOCATIONS</a></span>

In the Terminal lesson li is used to achieve a similar, vertical navigation menu.

<nav class="navigation">
      <li class="logo">THE TERMINAL</li>
      <li class="donate">DONATE</li>

What is the benefit of using span? Is there any more specific reason it was used in this project?

thanks :slight_smile:

The second example is mostly always preferred. We can configure a list to be horizontal, too (inline-block).


Think of <span> just like <div> but instead span is an inline element whilst div is a block-level element.

In terms of the comparison <li> & <span>, on the bottom example you are creating a list which is basically most commonly used for navigation bars whilst, on the first one, you are creating multiple “divs” and adding a hyperlink in there.

1 Like

Ok, so <span> can be used as an alternative to <div> for inline elements.
Nice, thanks :slight_smile: