diff --git a/components.html b/components.html
index 27bd81ccb61182e0e206933eb31a744d21ab790f..8a10b21f845371a013a2d188be35f0bba0b154cb 100644
--- a/components.html
+++ b/components.html
@@ -1179,7 +1179,7 @@ base_url: "../"
     <h3 id="navbar-fixed-top">Fixed to top</h3>
     <p>Add <code>.navbar-fixed-top</code>.</p>
     <div class="bs-example bs-navbar-top-example">
-      <div class="navbar navbar-fixed-top">
+      <nav class="navbar navbar-fixed-top">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
           <ul class="nav navbar-nav">
@@ -1188,7 +1188,7 @@ base_url: "../"
             <li><a href="#">Link</a></li>
           </ul>
         </div>
-      </div>
+      </nav>
     </div><!-- /example -->
 {% highlight html %}
 <nav class="navbar navbar-fixed-top" role="navigation">
@@ -1303,7 +1303,7 @@ body { padding-bottom: 70px; }
             </ul>
           </div><!-- /.nav-collapse -->
         </div><!-- /.container -->
-      </div><!-- /.navbar -->
+      </nav><!-- /.navbar -->
     </div><!-- /example -->
 {% highlight html %}
 <nav class="navbar" role="navigation">
@@ -1337,7 +1337,7 @@ body { padding-bottom: 70px; }
     <h2 id="navbar-scrollable">Scrollable responsive navbar</h2>
     <p>For instances where you have too many items in your navbar to fight within the viewport of a small device, add <code>.nav-collapse-scrollable</code> to your navbar's <code>.nav-collapse</code> to set a <code>max-height</code> and smooth scrolling.</p>
     <div class="bs-example">
-      <div class="navbar">
+      <nav class="navbar">
         <div class="container">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-scroll-collapse">
             <span class="icon-bar"></span>
@@ -1360,10 +1360,10 @@ body { padding-bottom: 70px; }
             </form>
           </div><!-- /.nav-collapse -->
         </div><!-- /.container -->
-      </div><!-- /.navbar -->
+      </nav><!-- /.navbar -->
     </div><!-- /example -->
 {% highlight html %}
-<div class="navbar">
+<nav class="navbar">
   <div class="container">
 		...
 
@@ -1372,7 +1372,7 @@ body { padding-bottom: 70px; }
     </div><!-- /.nav-collapse -->
 
   </div><!-- /.container -->
-</div><!-- /.navbar -->
+</nav><!-- /.navbar -->
 {% endhighlight %}
 
 
diff --git a/javascript.html b/javascript.html
index 04b9d59459a8a4622c0cbf6563ffa20b0272a29a..2533018077df1961b149c647e207fb89486e467f 100644
--- a/javascript.html
+++ b/javascript.html
@@ -401,7 +401,7 @@ $('#myModal').on('hidden.bs.modal', function () {
             </ul>
           </div><!-- /.nav-collapse -->
         </div><!-- /.container -->
-      </div> <!-- /navbar-example -->
+      </nav> <!-- /navbar-example -->
     </div> <!-- /example -->
 
     <h3>Within tabs</h3>
@@ -494,25 +494,23 @@ $('.dropdown-toggle').dropdown()
     <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
     <div class="bs-example">
       <nav id="navbar-example2" class="navbar navbar-static" role="navigation">
-        <div class="navbar-inner">
-          <div class="container" style="width: auto;">
-            <a class="navbar-brand" href="#">Project Name</a>
-            <ul class="nav navbar-nav">
-              <li><a href="#fat">@fat</a></li>
-              <li><a href="#mdo">@mdo</a></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                <ul class="dropdown-menu">
-                  <li><a href="#one">one</a></li>
-                  <li><a href="#two">two</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#three">three</a></li>
-                </ul>
-              </li>
-            </ul>
-          </div>
-        </nav>
-      </div>
+        <div class="container" style="width: auto;">
+          <a class="navbar-brand" href="#">Project Name</a>
+          <ul class="nav navbar-nav">
+            <li><a href="#fat">@fat</a></li>
+            <li><a href="#mdo">@mdo</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#one">one</a></li>
+                <li><a href="#two">two</a></li>
+                <li class="divider"></li>
+                <li><a href="#three">three</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </nav>
       <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
         <h4 id="fat">@fat</h4>
         <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>