Currently, I am developing a small website employing the mobile-first strategy. This means that I design for small screens first and then adapt as the screen size increases. To save space, I either show or hide certain information on the page or swap it out depending on the size of the screen. While this approach may appear visually appealing, it presents challenges when trying to maintain semantic markup.
Let's take a closer look at what I have accomplished thus far:
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;
}
}
The current setup involves hiding the tagline on smaller screens, displaying it on medium-sized screens, and hiding it again on larger screens. The reason behind hiding the tagline on large screens is to allocate more space for additional information displayed in a different location especially on larger screens. Here is an overview:
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;
}
}
An issue arises with the header element. Referring to the spec:
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
By enclosing the nav within a header, it implies that the navigation and its contents apply to the entire page. However, I feel that this arrangement makes sense only for medium-sized screens where additional information is visible. On larger screens, the content inside .more-info serves as the page header. As for smaller screens, determining what to include within an <h1> becomes challenging.
I could insert the page title, but switching it to an image such as a logo would result in poor markup.
What would be the best course of action - should I integrate two header elements on the page? Although technically permitted, I am uncertain if it aligns well with the intended purpose in my scenario?