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

マークアップは難しい。