HTML内联元素无内容

Question

很长一段时间以来，我一直试图通过在线教程（包括Youtube和Google）单独研究HTMl，我不断遇到一个特定的问题，有些人会编写代码但留一些div并关闭无需在两者之间放入任何东西 下面的代码中考虑了span元素

<div class="wait overlay">
<div class="loader"></div>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">   
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data- 
 toggle="collapse" data-target="#collapse" aria-expanded="false">

看看下面的元素，它们只是封闭着，它们之间没有任何东西。

                <span class="sr-only">navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">website name</a> 
   </div>

我已经尝试了很多搜索，但是似乎我无法获得确切的关键字来引导我真正满足好奇心的事物。