Css 语义标记&；响应性设计&x2013；在这种特殊情况下如何进行？

我正在使用移动优先的方法建立一个小网站，这意味着我从一个小屏幕开始，然后逐渐变大。为了保存位置，我在页面上显示/隐藏一些信息，或者根据屏幕大小替换这些信息。虽然这看起来很酷，但让我头疼的是如何尽可能保持标记的语义。
让我们开始吧，这就是我到目前为止所做的：

HTML

<header>
    <nav role="navigation">
        <a href="#navlist">☰</a>
        <a href="/">Page Title</a>
        <p class="hidden-s hidden-l">I the page's tagline</p>
        <ul id="navlist">
            <li><a href="/">Link 1</a></li>
            <li><a href="/">Link 2</a></li>
            <li><a href="/">Link 3</a></li>
            <li><a href="#">Close Menu</a></li>
        </ul>
    </nav>
</header>

<main role="main">
    <article>
        <header>
            <h1><a href="#">Blog Post 1</a></h1>
        </header>
        <p>Short excerpt of Blog Post 1</p>
    </article>
    <article>
        <header>
            <h1><a href="#">Blog Post 2</a></h1>
        </header>
        <p>Short excerpt of Blog Post 2</p>
    </article>
</main>

<main role="main">
<div class="more-info">
    <header>
        <h1>Page Title</h1>
        <p>Some more info over the page you are reading.</p>
    </header>
</div>
<article>
    <header>
        <h1><a href="#">Blog Post 1</a></h1>
    </header>
    <p>Short excerpt of Blog Post 1</p>
</article>
<article>
    <header>
        <h1><a href="#">Blog Post 2</a></h1>
    </header>
    <p>Short excerpt of Blog Post 2</p>
</article>

你看，标语隐藏在小屏幕上，显示在中等大小的屏幕上，再隐藏在大屏幕上。我在大屏幕上隐藏标语是因为我想在大屏幕上的不同位置添加更多信息，如：

HTML

<header>
    <nav role="navigation">
        <a href="#navlist">☰</a>
        <a href="/">Page Title</a>
        <p class="hidden-s hidden-l">I the page's tagline</p>
        <ul id="navlist">
            <li><a href="/">Link 1</a></li>
            <li><a href="/">Link 2</a></li>
            <li><a href="/">Link 3</a></li>
            <li><a href="#">Close Menu</a></li>
        </ul>
    </nav>
</header>

<main role="main">
    <article>
        <header>
            <h1><a href="#">Blog Post 1</a></h1>
        </header>
        <p>Short excerpt of Blog Post 1</p>
    </article>
    <article>
        <header>
            <h1><a href="#">Blog Post 2</a></h1>
        </header>
        <p>Short excerpt of Blog Post 2</p>
    </article>
</main>

<main role="main">
<div class="more-info">
    <header>
        <h1>Page Title</h1>
        <p>Some more info over the page you are reading.</p>
    </header>
</div>
<article>
    <header>
        <h1><a href="#">Blog Post 1</a></h1>
    </header>
    <p>Short excerpt of Blog Post 1</p>
</article>
<article>
    <header>
        <h1><a href="#">Blog Post 2</a></h1>
    </header>
    <p>Short excerpt of Blog Post 2</p>
</article>

现在的问题是

标题

元素。让我引述：

当最近的祖先节内容或节根元素是body元素时，它将应用于整个页面

因此，通过将

nav

包装在

标题中，我基本上说nav及其内容适用于整个页面，这是真的吗？因为同时，我觉得将
nav
放在
标题
中只有在中型屏幕上才有意义，因为附加信息只在那里可见。对于较大的屏幕，
.more info
的内容是页眉。在小屏幕上，我甚至不知道在
中放什么

我可以把页面标题放在那里，但是一旦页面标题变成一个图像（logo或类似的东西），它又是一个糟糕的标记

我应该如何继续-页面上有两个
标题
s？据我所知，这是允许的，但我真的不确定在我的情况下是否可以/打算这样做？
一个页面上不应该有两个
标题
元素，即使这是可能的。这是因为搜索引擎使用
标题
来了解有关页面的更多信息。如果你有不止一个，他们会感到困惑。这也是为什么你不希望你的导航是标题，因为它不能帮助搜索引擎了解更多关于你的页面。header元素应该包括页面的标题。因此，明智的做法是将
h1
元素包装在标题中。此元素应包括页面的名称/用途。
首先，我认为到目前为止，您在语义方面做得很好

您可以在一个页面上有多个
标记，因为
标记（以及
）仅代表其最近祖先部分的标题区域（无论这是字面上的
还是您的案例中的
）

确实，如果您在全局标题中使用
标记，则表示该导航是您的全局网站导航。然而，从语义上讲，您是否在某些断点处隐藏它是无关紧要的

毫无疑问，语义学很重要，但我认为你不应该把它看作是项目的全部，也不应该因此而感到压力。只要尽你最大的努力，并知道你可以在未来改进它。有许多更重要的事情，你可以花你的时间在你的新网站上，如网页加载速度，这是越来越重要的搜索引擎优化，以及内容质量

为了进一步阅读，我建议您通过在上砸碎杂志来查看这篇文章。
谢谢您的回答，但您确定这是真的吗？我认为一个页面上可以有任意多的页眉元素——只需注意上下文。该标题的内容也由上下文决定。请参阅《我的小提琴》中的
文章
元素。它们都有一个标题元素，里面有一个
h1
，但该
h1
元素只标记每篇文章的标题。你可以有任意数量的标题，但你会受到谷歌等搜索引擎的惩罚，而谷歌正是专为这个元素设计的。因此，最好只使用一个
标题
元素。谢谢您的回答！你链接的那篇文章是我很长一段时间以来阅读过的内容最丰富的文章。同样令人高兴的是，拥有良好的语义更像是一个过程，而不仅仅是简单的操作。但是我有一个问题：你真的确定如果
标题直接列在
main
中，那么
标题就代表
main
中所有内容的标题吗？因为
部分
是部分内容，而
main
是分组内容，不会引入新的部分。我强烈建议阅读精彩的杂志文章，它们总是写得很好。他们的书也很棒。你问的问题很有趣。由于
main
元素是一个相当新的元素，关于它的文章还不多。但是，您可能是对的，
标题
元素更适合
节
，因此您可以在
主
中创建一个
节
，并将标题放在其中。它确实取决于项目，正如我所说的，将来当更多关于
main
元素的内容被编写时，它总是可以被更改的。祝你的项目好运@斯文-你是对的。main元素不是sectioncontent或sectionroot元素，因此在这种情况下，页眉应用于body元素，即整个页面。