Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Claudio Gomes
Claudio Gomes
8,872 Points

Bootstrap 4 Navbar: <li> vs class when to use either one?

On the Bootstrap 4 basics course - navbar Gui uses a snippet for the navbar component extracted from the Bootstrap 4 documentation site

He chose the <li> snippet version instead of the class version (see below).

The class version seems more readable to me. Why should I use the <li> version?

<li> version
<nav class="navbar navbar-light bg-faded">
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
</nav>
class version
<nav class="navbar navbar-light bg-faded">
  <div class="nav navbar-nav">
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link" href="#">About</a>
  </div>
</nav>

1 Answer

Stuart Elmore
Stuart Elmore
84 Points
Stuart Elmore
Stuart Elmore
84 Points

Using LIs (List Items) are more semantic than just using A (Anchor) tags. When creating a list of links for navigation; remember this is a list of items. Semantically that suggests that it should by default be displayed as either an Ordered or Unordered List. The other thing to remember is the way that it will be displayed if the CSS wasn't included. This is important for screen readers and for accessibility. If you render the page without the CSS then you'll see that the A tags are displayed inline, whereas the LIs are displayed as 'block level elements', making it easier to distinguish between the items.

For more information on semantics, you might like to read: