ルーティングエラー画面のHTML構造を修正

ActionDispatchのルーティングエラー画面において、<p>タグ内に配置されていた<h2>と<ol>タグを外部に移動し、HTML仕様に準拠したDOM構造に修正しました。

背景

HTMLの<p>要素はブロックレベル要素を含めない、という仕様上の制約が守られていませんでした。HTML仕様によれば、<p>要素に含められるのは「フレージングコンテンツ（phrasing content）」のみです。<h2>や<ol>のようなブロックレベル要素は<p>の中に配置することが許可されておらず、ブラウザによる暗黙的な段落クローズが発生し、意図しないDOM構造を生み出していました。

この問題が存在していたのは actionpack/lib/action_dispatch/middleware/templates/rescues/routing_error.html.erb 、すなわちRailsアプリケーションがルーティングエラーを起こした際に表示されるデバッグ画面のテンプレートです。エラー画面は開発中に頻繁に目にするUIであるため、HTMLとして正しく構造化されていることが望ましいです。

技術的な変更

routing_error.html.erbにおいて、不正なネスト構造を解消するため<p>タグが取り除かれました。

変更前:

<% unless @exception_wrapper.failures.empty? %>
  <p>
    <h2>Failure reasons:</h2>
    <ol>
    <% @exception_wrapper.failures.each do |route, reason| %>
      <li><code><%= route.inspect.delete('\\') %></code> failed because <%= reason.downcase %></li>
    <% end %>
    </ol>
  </p>
<% end %>

変更後:

<% unless @exception_wrapper.failures.empty? %>
  <h2>Failure reasons:</h2>
  <ol>
  <% @exception_wrapper.failures.each do |route, reason| %>
    <li><code><%= route.inspect.delete('\\') %></code> failed because <%= reason.downcase %></li>
  <% end %>
  </ol>
<% end %>

<p>タグを削除し、<h2>と<ol>を直接<% unless %>ブロック直下に配置するだけの変更です。視覚的なレンダリングへの影響は最小限ながら、ブラウザが暗黙的に修正していたDOM構造が、ソースコード上でも正しい形になります。

設計判断

<p>タグの削除のみという最小限の変更が選択されました。

本来「Failure reasons:」以下のコンテンツをグループ化する意図で<p>タグが使われていたと推測できますが、それを<div>やその他のコンテナ要素に置き換えるのではなく、ラッパー要素ごと取り除く方針が採られています。<h2>と<ol>はすでにブロックレベル要素として独立した意味を持っており、追加のラッパーを必要としないため、この判断は構造をシンプルに保つ上でも合理的です。

また、変更行数がわずか14行（6追加・8削除）と非常に小さいことからも、既存の見た目や機能に影響を与えないよう、修正範囲を必要最小限に絞る意図が読み取れます。

まとめ

この変更はRailsが内部的に提供するデバッグ用テンプレートのHTML品質を向上させるものです。機能的な変化はなくとも、仕様に準拠した正しいDOMを出力することで、ブラウザのパーサーが暗黙的な修正処理を行わずに済み、スタイルやスクリプトが意図通りに動作する信頼性の高い基盤を提供します。