エメラルドマウンテンの麓。

ブロック要素を囲む<a>要素でのFirefox3.5とLynxのバグ回避、閉じタグ省略を辞めるパターン

本記事の検証を元に web-doc-base > RichLink を更新しました。(2021/09/03)

2行まとめ

  1. Firefox 3.5~3.6では <a> 要素内のブロック要素の閉じタグを省略した際に、<a> をコピーして各要素を包んだ独自のツリーをつくります。HTML Living Standard で閉じタグを省略できるとされていても、Firefox 3.5に対応する為には閉じタグの省略を辞めます。
  2. Lynx では <a> の子に <article> を置くとハイパーリンクが無効になる。

1. はじめに

HTML 4.01 Strict(W3C 勧告は1999年) ではインライン要素である <a> 内にブロック要素を書くことは invalid です。しかし当時の Web ブラウザはこの不正な文書ツリーを柔軟に解釈します。このおかげで Web デザイナーはブロック要素や <img> を配置したリッチなリンクを制作できました。

このマークアップの際に古めのフルブラウザとテキストブラウザで遭遇した問題とその回避法です。

なお HTML5 の <a> は、<a> の親要素によって <a> の子に出来る要素が変わります。このコンテンツモデルによって valid に記述できます。

検証前のHTMLタグの例

古めのフルブラウザ(Firefox 3.5)とテキストブラウザ(Lynx)で不具合が発生します。

<a href="https://www.w3.org/TR/1999/PR-html40-19990824/">
  <article>
    <h2>
      <img src="//www.w3.org/Icons/w3c_home">
      HTML 4.01 Specification
    </h2>
    <div>
      <span>1999/12/24</span>
    </div>
    <p>W3C Recommendation 24 December 1999
  </article>
</a>

対策済のHTMLタグの例

<a href="https://www.w3.org/TR/1999/PR-html40-19990824/">
  <h2>
    <img src="//www.w3.org/Icons/w3c_home">
    HTML 4.01 Specification
  </h2>
  <div>
    <span>1999/12/24</span>
  </div>
  <p>W3C Recommendation 24 December 1999</p>
</a>

2. 古いFirefoxで遭遇する問題を回避する

まずは最新の Firefox 91.0.2 で表示した場合を確認します。閉じタグの省略に関わらず意図した表示が得られています。

検証ページは Github pages で公開しています。

Firefox 3.5 Beta 4での表示

続いて Firefox 3.5~3.6 で表示した場合です。</dt> や </dd> を省略した場合には、<a> がコピーされて各要素をラップするツリーが作られてしまいます。不要な下線の出現でその様子が分かります。(画像の2つめ)

また、一度閉じタグのない子を持つ <a> が出現すると、以降で閉じタグのある子を持つ <a> が出現しても現象が発生します。<a> の子は閉じタグを決して省略しないのが良さそうです

Firefox 3.1 迄と 4 以降ではこの挙動に遭遇していません。

3. Lynxで遭遇する問題を回避する

Lynx 2.8.9.1016での表示

Lynx ではハイパーリンクにならない問題が発生しました。<a href="#"><article /></a><article> を外すと解決しました。

また、<h2> に続く要素がブロック要素とインライン要素では、ハイパーリンクになる範囲が異なることも分かりました。


<a> 周りのデザインでは、タブフォーカス時にビビッドなカラーを要素に適用するのが好きな僕ですが、挙動が把握できていない部分があって悶々としていました。この度、エイヤッとテストして書きあげてホッとしております。Enjoy!