<li> vs <span> in navigation menu

Language Help HTML
1

Hi,
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.

<nav>
    <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>
  </nav>

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

<nav class="navigation">
    <ul>
      <li>LOCAL</li>
      <li>NATIONAL</li>
      <li class="logo">THE TERMINAL</li>
      <li>GLOBAL</li>
      <li>OPED</li>
      <li class="donate">DONATE</li>
    </ul>
  </nav>

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

thanks :slight_smile:

2

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

3 Likes
3

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
4

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