Flexbox 导航栏、容器和语义答案

【问题标题】：Flexbox navbar, container and semanticsFlexbox 导航栏、容器和语义
【发布时间】：2019-09-16 20:37:11
【问题描述】：

这是我在 stackoverflow 上的第一个问题。如果我没有相应地格式化或询问这个，请提前原谅我。

所以，我看到人们以多种方式构建导航栏，特别是使用 flexbox，因此，我知道这个话题之前被多次提及，但是，如果有人可以澄清一下：

为了 SEO 目的，我网站上的品牌/徽标是否必须位于任何其他标题标签的 <h1> 标签内？
将品牌/徽标留在<nav> 标签之外是否正确？

display: flex;

<ul>

非常感谢您抽出宝贵时间阅读本文，如果这是一个老话题，我深表歉意。我正在尝试更好地组织我的代码并了解最佳实践。

<body>
    <header>
        <div class="container">
            <a href="" class="brand">
                Brand
            </a>

            <nav>
                <ul>
                    <li><a href="#" class="nav-link">services</a></li>
                    <li><a href="#" class="nav-link">about</a></li>
                    <li><a href="#" class="nav-link">location</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>

【问题讨论】：

标签： html css flexbox navigation navbar

【解决方案1】：

就 SEO 而言，您可以通过多种方式获得更好的评分。 H1 可能是最好的，但您可以使用任何标题标签，并强调粗体、斜体等内容。该区域还有元标记，例如

<meta name="keywords" content="your keywords here">

在整个页面中使用关键字也很有帮助。人们在他们的页面上大获成功的方法之一是将名称添加到链接中。就像您在网上看到的文章一样，它们将是 /name_of_the_article.html，这对搜索引擎很有帮助。

对于品牌/徽标，最好将其放在导航标签之外。您可能希望将其放在自己的 div 中或将它们都包装在 div 树中，以便您可以更轻松地定位它。但是，如果您希望品牌/徽标与导航栏一起出现，那么您也可以在那里。

对于容器部分，如果没有看到 css，我会说如果它们具有相同的样式，那么一定要把它们放在一起。但是，除非这都是非常简单的东西，否则最好给它们自己的类作为一件东西的样式，可能不适合另一件。

如果你可以制作一个 jsfiddle 或 codepen，那么你就可以更容易地了解你想要的关于类 css 的具体内容。

【讨论】：

嗨史蒂夫，谢谢你回答我。我做了一个 codepen 项目来更好地说明它。以一种简单的方式，我的意思是通过使其在语义上准确，似乎我最终不得不使用更多的标签。例如，为了使整个 flexbox 工作，我必须将它应用到容器 div。例如，如果我需要在一个部分中再次重用它，它将以我无法重用它的方式进行配置。它的链接是codepen.io/danielkip/pen/LYPJvVm
通过一些更改，我保持了相同的样式，但释放了容器类，以便可以通用。它可能可以清理得更好一点，但这是一个快速的模式。 codepen.io/Foregotten/pen/QWLVeJp
史蒂夫，非常感谢您的帮助和关注。顺便说一句，我尝试过并且效果很好的解决方案之一是使用具有通常 margin: 0 auto; 和 max-width: 的容器类，并使用我需要达到“浮动”效果所需的所有 flex 规范对其应用和标识.这样我就可以在整个页面中重用容器类。
没有问题。很高兴我能帮上忙。 :-) 我也在学习。太有趣了。