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

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 :

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

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

我可以将页面标题放在那里，但是一旦页面标题更改为图像( Logo 或类似的东西)，它又是错误的标记。

我应该如何进行 - 有两个 header在页面上？据我所知，这是允许的，但我真的不确定这是否适合我的情况？

Answer 1

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

你可以有多个<header>一页上的标签，如 <header>标记(和 <footer> 就此而言)仅代表其最近的祖先部分的标题区域(无论这实际上是 <section> 还是在您的情况下是 <main>)。

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

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

要进一步阅读，我建议您查看 Smashing Magazine 在 SEO for Responsive Websites 上发表的这篇文章.