Navbar Coding using Bootstrap 3/Responsive Design - html

Question

Hello I have been given two examples when for coding a navbar in bootstrap3. I am not sure what the difference is I know example 1 is fixed and responsive but ex 1 is in a <div> and ex 2 is set in a header. Confusing as they both work, but which is better.
Example 1
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">COMPANY</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Welcome</li>
<li>Create</li>
<li class="dropdown">
lorem<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header"> lorem</li>
<li class="dropdown-header">lorem</li
<li class="divider"></li>
<li class="dropdown-header">lorem</li>
<li class="dropdown-header">lorem</li>
<li class="divider"></li>
<li class="dropdown-header">lorem</li>
<li class="dropdown-header">lorem</li>
</ul>
</li>
<li>Dashboard</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Example two:
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img"></div>
</a>
<div class="navbar-brand">
<h1>David Chu's China Bistro</h1>
<p>
<img src="images/star-k-logo.png" alt="Kosher certification">
<span>Kosher Certified</span>
</p>
</div>
</div>
</div>
</nav>
</header>

Answer 1

The difference is quite clear. Second snippet of code belongs to a simple Navbar using bootstrap. Whereas the first one is the fixed Navbar that you'd mostly seen on top of websites. It includes dummy navigational data in the form of list items.
You can use online editors like jsfiddle and plnkr for practicing and viewing results of these examples.
Read more and in detail about bootstrap navbar here.

Answer 2

In example one, it is more advanced and complex, it has bunch of lists that appears to the viewer of the website, so it has more options than example two.
In example two, there are just bunch of images and links and some space for a logo. It just looks like a header of the page, I mean the very top of it.
The first example tho, looks like a content which can either be the header, or the descriptive part that comes after header. So it can either be placed in body part or header part, depends on how the coder wants to put it as. Sorry it is kind of confusing.
Remember, a content being in a header or a body tag doesn't change anything specifically, it just divides the code into parts and makes it easier to understand.