1

I saw an interesting navigation list example as below (css omitted),

<nav class="navigation">
    <ul>
        <li><a href="#">Profile</a></li><!--
        --><li><a href="#">Settings</a></li><!--
        --><li><a href="#">Notifications</a></li><!--
        --><li><a href="#">Logout</a></li>
    </ul>
</nav>

At first glimpse, I thought the <!-- and --> between <li> tag might be left by mistake. Author just forgot to clear the comment.

enter image description here

But when I left them out, the navigation bar didn't look the same. Seems they were added on purpose.

enter image description here

Since I'm not an expert for HTML, anyone can explain? Is that a common trick?

user2864740
  • 60,010
  • 15
  • 145
  • 220
shen
  • 933
  • 10
  • 19

3 Answers3

6

It's a trick to remove newlines that manifest as space between inline elements.

ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
ol > li {
  display: inline-block;
  background: blue;
  color: white;
  padding: 0.5em;
}
Without &lt!-- --&gt;
<ol>
  <li>ONE</li>
  <li>TWO</li>
  <li>THREE</li>
</ol>
<br>
With &lt!-- --&gt;
<ol>
  <li>ONE</li><!--
  --><li>TWO</li><!--
  --><li>THREE</li>
</ol>

It makes the newline character a comment, so in the end there is nothing between the closing and the next opening tag (</li><li>).

Alternatively you could put the opening tag immediately after the closing tag on the previous line.

<ol>
  <li>ONE</li><li>
  TWO</li><li>
  THREE</li>
</ol>

or use float: left;, but that also needs clear: both; after it.

But those are old tricks. Nowadays you can just use display: flex;.

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
ol > li {
  background: blue;
  color: white;
  padding: 0.5em;
}
<ol>
  <li>ONE</li>
  <li>TWO</li>
  <li>THREE</li>
</ol>
gre_gor
  • 6,669
  • 9
  • 47
  • 52
4

The <!-- --> is a html comment.

In this case it basically removes the implicit whitespace between the closing li (</li>) and the next opening li (<li>).

This prevents the spacing you see when you remove it as it makes the elements physically adjacent with no whitespace (everything in between is ignored comment).

There's a pretty thorough explanation of how whitespace is handled on the Mozilla dev network website in the article How whitespace is handled by HTML, CSS, and in the DOM

Ben
  • 20,737
  • 12
  • 71
  • 115
0

There is no reason for it and can be removed as they are normally just basic HTML comments. They provide no usefulness to the code

as for the formatting difference, you will need to better style them, that's all.

MysticSeagull
  • 206
  • 2
  • 10
  • How to explain the white space between each button when I deleted the ``? I'm quite confused. – shen Jan 26 '22 at 04:59
  • * I am not fully sure, but my guess is that there is enough whitespace between the 2 that just pushes whitespace in between ??? that's my best guess as whitespace in the document matter. – MysticSeagull Jan 26 '22 at 05:00
  • 4
    @shen The whitespace is actually coming from the whitespace in your HTML document. I assume you want to display those list items as blocks rather than whatever is there now, and the outer `ul` as like flex or something, and then you won't have this problem. – Brad Jan 26 '22 at 05:00
  • @Brad I've double-checked my code, there's no space. – shen Jan 26 '22 at 05:04
  • I mean, end of the day it doesn't matter. more so the comments are not needed and should be properly styled as such to keep your page in tact and keep to the standards etc.. – MysticSeagull Jan 26 '22 at 05:05
  • When I put the whole list in one single line ``, the problem solved. – shen Jan 26 '22 at 05:12
  • @MysticSeagull Seems my VSCode editor automatically add a space every time when I start a new line. Now I understand these `` is used to prevent editor add some extra `space`, `tab` or `\n` between two `
  • ` tag. Thanks for your quick response!
    • – shen Jan 26 '22 at 05:16
  • 1
    @shen Newline characters are whitespace characters. – Brad Jan 26 '22 at 05:33