语义标记和响应式设计——在这种特定情况下如何进行？

Question

我正在使用移动优先的方法构建一个小型网站，这意味着我从一个小屏幕开始，然后逐渐变大。为了节省空间，我在页面上显示/隐藏一些信息或根据屏幕大小替换信息。虽然这看起来很酷，但它确实让我头疼，试图让标记尽可能地符合语义。
让我们开始吧，这就是我目前所拥有的：

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>

CSS

nav { background-color: rgba(255, 0, 0, .4); }

#navlist {
    display:none;
}

#navlist:target {
    display:block;
}

.hidden-s {
    display: none;
}

@media screen and (min-width: 500px) {
    .hidden-s {
        display: block;
    }
}

@media screen and (min-width: 700px) {
    .hidden-l {
        display: none;
    }
}

Fiddle

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

HTML

<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>

CSS

.hidden-s,
.more-info {
    display: none;
}

@media screen and (min-width: 700px) {
    .hidden-l {
        display: none;
    }

    .more-info {
        display: block;
    }
}

Fiddle

现在问题出在header 元素上。让我引用the spec：

当最近的祖先分段内容或分段根元素是body元素时，则适用于整个页面。

所以通过将nav 包装在header 中，我基本上说导航及其内容适合整个页面，这是真的吗？因为与此同时，我觉得将nav 放在header 中只在中型屏幕上有意义，因为附加信息仅在那里可见。对于更大的屏幕，.more-info 的内容是页眉。在小屏幕上，我什至不知道在<h1> 中放什么。

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

我应该如何继续 - 页面上有两个 headers？据我所知，这是允许的，但我真的不确定在我的情况下是否可以/有意？

Answer 1

你不应该在一个页面上有两个header 元素，即使它是可能的。原因是搜索引擎使用header 来了解有关您的页面的更多信息。如果你有多个，他们会变得混乱。这也是您不希望您的导航成为标题的原因，因为它无助于搜索引擎更多地了解您的页面。 header 元素应包含页面的标题。因此，将h1 元素包装在标头中是明智的。此元素应包含您页面的名称/用途。

Answer 2

首先，我认为到目前为止，您在语义方面做得很好。

你可以在一页上有多个<header>标签，因为<header>标签（和<footer>就此而言）只代表它最近的祖先部分的标题区域（无论这个从字面上看是<section>，或者在你的情况下是<main>）。

确实，如果您在全局标题中使用<nav> 标记，那么您就是在说该导航是您的全局网站导航。但是，从语义上讲，是否在某些断点处隐藏它是无关紧要的。

毫无疑问，语义很重要，但我认为您不应将其视为项目的全部和结束，当然也不应为此感到压力。只要尽力而为，并且知道将来可以改进它。您可以将时间花在新网站上的许多更重要的事情上，例如在 SEO 中变得越来越重要的页面加载速度以及内容质量。

如需进一步阅读，我建议查看 Smashing Magazine 的这篇文章，地址为 SEO for Responsive Websites。