Bootstrap HTML5文档大纲算法

Question

我正在尝试使用bootstrap和本机HTML5标记构建一个网站。但是，我遇到了几个问题。

以this website为例。如果您使用Google Chrome浏览器Outliner查看此内容，则可以看到有两个无标题内容：

这是由以下HTML引起的：

<!-- Navigation
==========================================-->
<nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="index.html">Spirit8</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#tf-home" class="page-scroll">Home</a></li>
        <li><a href="#tf-about" class="page-scroll">About</a></li>
        <li><a href="#tf-team" class="page-scroll">Team</a></li>
        <li><a href="#tf-services" class="page-scroll">Services</a></li>
        <li><a href="#tf-works" class="page-scroll">Portfolio</a></li>
        <li><a href="#tf-testimonials" class="page-scroll">Testimonials</a></li>
        <li><a href="#tf-contact" class="page-scroll">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

但是这个网站是使用Bootstrap构建的，并使用默认的bootstrap markup。

这里发生了什么以及如何调整代码以生成正确的轮廓？ Bootstrap不需要<header>或<nav>内的标题，那么为SEO目的生成正确大纲的正确行为是什么？

Answer 1

您没有标题元素来标题这些部分。这就是他们被列为“无题”的原因。如果您在正文或导航栏中放置<h1>Headline</h1>，您会看到更改。