メモ(2018-07-25)

色々あって、このウェブサイトのグローバル・ヘッダーを少しいじっている。その過程でオシャレっぽいウェブサイトを見て回っていたら、以下のようなマークアップになっているウェブサイトがあった。

<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要素にホームへのナビゲーションを張ったロゴを入れ込むことは事実上できない。

マークアップは難しい。