Nested ul and ol closing tag placement

Question

I have seen this done in two different ways:

the first way

<ul>
  <li>first item</li>
  <!-- No closing li tag in next line -->
  <li>second item
    <ul>
      <li>first subitem of second item</li>
    </ul>
  <!-- li closing tag in next line -->
  </li> 
</ul>

the second way

<ul>
  <li>first item</li>
  <!-- Closing li tag in next line like normal -->
  <li>second item</li>
  <ul>
    <li>first subitem of second item</li>
  </ul>
</ul>

Both of these are identical in terms of how they render, but is one of them better practice than the other?

look the dependency : in first case ul of li sub is child of li second item. — Mister Jojo, Dec 19 '20 at 23:36

score 1 · Answer 1 · answered Dec 20 '20 at 00:28

It depends on what want to achieve (including your JS as well). Examples for using each way:

The first way (multi-level dropdown - nested list):
W3schools example.
Stackoverflow example

The second way example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 10px;
  overflow-x: hidden;
}

header {
  background-color: #f88752;
  position: relative;
  height: 50px;
  width: 100%;
}

nav {
    height: 100%;
}

.first-list,
.second-list {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.first-list {
  height: 100%;
}

.first-list .list1-item {
  margin: 0 10px;
  cursor: pointer;
  color: #f1f1f1;
  font-size: 1.3rem;
}

.second-list {
  position: absolute;
  flex-direction: column;
  left: -100%;
  transform: translate(-50%, 0);
  top: 65px;
  background-color: #f88752;
  width: 400px;
  height: 70px;
  border-radius: 5px;
  transition: all 0.2s;
}

.second-list .list2-item {
  font-size: 1.2rem;
}

#myBtn:hover ~ .second-list {
  left: 50%;
}

<header>
  <nav>
    <ul class="first-list">
      <li class="list1-item">Home</li>
      <li class="list1-item">Gallery</li>
      <li class="list1-item">About</li>
      <li class="list1-item" id="myBtn">Contact</li>
      <ul class="second-list">
        <li class="list2-item">+123456789</li>
        <li class="list2-item">example@hotmail.com</li>
      </ul>
    </ul>
  </nav>
</header>

score 0 · Answer 2 · answered Dec 20 '20 at 00:06

Even though the html might look the same, there are some difference that make the first method the better choice.

First of all, semantically: you can find a discussion and some articles here

Second, DOM manipulation. With the first method, the nested ul is clearly a child of the second li. If you decided for example to remove the second li in you js, the ul will also get deleted. With the second method, it looks like the nested ul is a child, but it's actually not. So if you decided to remove the second li, you would still have the nested ul, without its parent, which wouldn't make much sense.

Third, styling. The two methods looks the same only if no particular style is applied. If you want to change something, things might start to look different. For example, let's say that you want to add some padding to your li. Take a look at this snippet:

  li{
    padding-left: 30px;
  }

<ul>
  <li>first item</li>
  <!-- No closing li tag in next line -->
  <li>second item
    <ul>
      <li>first subitem of second item</li>
    </ul>
  <!-- li closing tag in next line -->
  </li> 
</ul>

<ul>
  <li>first item</li>
  <!-- Closing li tag in next line like normal -->
  <li>second item</li>
  <ul>
    <li>first subitem of second item</li>
  </ul>
</ul>

You can see that the first method still looks good, while the second starts to look wrong.

So in conclusion, while they might seem the same, go for option 1 =)

Nested ul and ol closing tag placement

2 Answers2