マークアップをかなり変えた

思うところがあったのでマークアップを変更していた。「背景画像として表示されるべきではないものを背景画像として表示しているのは良くないのではないか？」みたいな夢を見た後、じゃあ「まず変えてみよう！」みたいな。なんか変だなと思ったらF5すれば直る(はず)。

ロゴは見出しなのどうなのみたいなのは深く考えると眠れなくなるので、あんまり考えない方が良い。変えたのはロゴは画像で背景じゃないのでimg要素使うようにしたかったみたいなのがあって、ついでにページの見出しちゃんと書くかと考え、ロゴに見出し要素使えなくなったので外したみたいな経緯でこうなった。ちゃんと見出し作っておいて隠すのなんなのみたいな感じだけど、うまく収める方法が思いつかなかったことによる暫定的な処置の予定。

main要素についてはやっぱりrole="main"も書かなくちゃならなそうな感じで、早まった気がしないでもない。

見出しレベルの調整は最初、h2とかをただ単にgrepしてレベルをひとつ減らすように置換したので、h2uがh1uになったりした……。稀に必要になるHTMLの要素の置換とかで誤爆させない正規表現考えるの面倒くさいので、ちゃんとHTMLをパースしてゴニョゴニョできる簡単なツールが欲しい。jQuery依存で良さそうなので、DOM(の断片)をjQuery使って書いたスクリプトでいじった結果で上書き保存できるみたいなのをPhantomJSで動かすのとかで良さそう。どっかにありそう。

グローバル・ヘッダーについては以下のようなマークアップになっている。

<header role="banner">
  <a href="/" id="logo"><img src="/images/logo.v6.svg" alt="Hail2u.net"></a>

  <h1>Weblog Archives</h1>

  <nav>
    <ul>
      <li><mark>Weblog</mark></li>
      <li><a href="/documents/">Documents</a></li>
      <li><a href="/projects/">Projects</a></li>
      <li><a href="/about/">About</a></li>
    </ul>
  </nav>
</header>

HTML5ではbody要素直下のheader要素はstrong native semantics持ちなのでrole="banner"は必要ないけど、HTML Standardsではそうなっていないので書いてる。main要素も似たような感じだけど、またちょっと違う理由でrole="main"を書いておいた方が良さそう。そういう意味でHTML Standardsでもstrong native semantics持ちなnav要素にはrole="navigation"は必要ない(ので外した)。なんで書いてたのか思い出せない。

あとはサブセクションをちゃんとsectionで括って、そこでも見出しにh1要素を使うようにすると「HTML5！」って感じになる。そうしたいんだけど、700以上あったので面倒になってやってない。こういうのもHTMLをパースしてゴニョゴニョして保存するツールとかあれば良いのか。