色々あって、このウェブサイトのグローバル・ヘッダーを少しいじっている。その過程でオシャレっぽいウェブサイトを見て回っていたら、以下のようなマークアップになっているウェブサイトがあった。
<body>
<header>
<nav>
<h1><img alt="Home" src="/img/logo.svg"></h1>
<ul>
<li><a href="/work/">Work</a></li>
<li><a href="/wrote/">Writing</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</header>
<main>
...
</main>
...
</body>ロゴがホームへのナビゲーションになっているので、nav要素に入れ込むのはあながち間違いではない。しかし、これだといわゆる「body element with no heading」になる。また、nav要素の見出しがHomeになるのも意味がわからない。
h1要素をp要素にしたり、li要素にしてリストに組み入れたりすれば良いかもしれない。しかしnav要素から見出しがなくなるのは(よくあることなので)良いとしても、body要素にないままだとまずいので、別の形で追加するべきだろう。そうなるとロゴが良さそうだ。つまりnav要素にホームへのナビゲーションを張ったロゴを入れ込むことは事実上できない。
マークアップは難しい。