古いFirefoxで遭遇する問題ではありませんでした。</p> の省略について、より詳しくは HTML 文書の書き方 > 省略可能なタグとか。(2022/03/01)
しかし例外もあり、以下の様なケースでは最初の
p要素の終了タグは省略できません。<a href="/"><p>ホームページ</a> <section>...</section>親に
a要素を持つ場合は省略できない、というルールがあるからです。
本記事の検証を元に web-doc-base > RichLink を更新しました。(2021/09/03)
2行まとめ
- Firefox 3.5~3.6では
<a>要素内のブロック要素の閉じタグを省略した際に、<a>をコピーして各要素を包んだ独自のツリーをつくります。HTML Living Standard で閉じタグを省略できるとされていても、Firefox 3.5に対応する為には閉じタグの省略を辞めます。 - 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 3.5~3.6 で表示した場合です。</dt> や </dd> を省略した場合には、<a> がコピーされて各要素をラップするツリーが作られてしまいます。不要な下線の出現でその様子が分かります。(画像の2つめ)
また、一度閉じタグのない子を持つ <a> が出現すると、以降で閉じタグのある子を持つ <a> が出現しても現象が発生します。<a> の子は閉じタグを決して省略しないのが良さそうです。
Firefox 3.1 迄と 4 以降ではこの挙動に遭遇していません。
3. Lynxで遭遇する問題を回避する
Lynx ではハイパーリンクにならない問題が発生しました。<a href="#"><article /></a> の <article> を外すと解決しました。
また、<h2> に続く要素がブロック要素とインライン要素では、ハイパーリンクになる範囲が異なることも分かりました。
<a> 周りのデザインでは、タブフォーカス時にビビッドなカラーを要素に適用するのが好きな僕ですが、挙動が把握できていない部分があって悶々としていました。この度、エイヤッとテストして書きあげてホッとしております。Enjoy!