個人開発中に見た不可解な挙動を調べたらHTML Living Standardに行き着いた話

こんにちは @color_box です。

個人開発中に遭遇した疑問を調べていたら、HTMLのLiving Standardに行き着いた話について書きます。

不可解なタグ移動

不可解な挙動だとおもって詳しく調べていたらHTMLのLiving Standardに行き着いたという話です。

個人の趣味プロジェクトにて、下記のようなHTMLを表示しようとしたところ

<body>
  <table>
    <tbody>
      <tr>
        <a format="js" data-remote="true" rel="nofollow" data-method="put" href="/kaomojis/122/select">
          <td class='' id='122'>
            something
          </td>
        </a>
        <a format="js" data-remote="true" rel="nofollow" data-method="put" href="/kaomojis/123/select">
          <td class='' id='123'>
            something2 
          </td>
        </a>
      </tr>
    </tbody>
  </table>
</body>

ブラウザで表示した結果下記のようになりました。

<body>
  <a format="js" data-remote="true" rel="nofollow" data-method="put" href="/kaomojis/122/select">
  </a>
  <a format="js" data-remote="true" rel="nofollow" data-method="put" href="/kaomojis/123/select">
  </a>
  <table>
    <tbody>
      <tr>
        <td class='' id='122'>
          something
        </td>
        <td class='' id='123'>
          something2 
        </td>
      </tr>
    </tbody>
  </table>
</body>

<a> タグの位置が <table> タグの前に移動してしまい、ズレた場所に表示されています。

そもそも <a> タグの中に <td> タグを入れるなという話ではあります。しかし、ブラウザでの表示が壊れるとかではなく、タグの位置がずれたりするのは直感に反する動きだったのでこの挙動について詳しく調べることにしました。

HTMLの改変場所の調査

まず、curlコマンドで直接HTMLを取得したらどうなるかを確認します。その場合、最初の意図通りのHTMLが取得できました。

次に、ブラウザの種類に応じてこのような挙動になっているのかどうかが気になったため、複数のブラウザでの挙動を確認します。最初に確認した環境はChromeだったため、次にSafariでの挙動を確認しました。結果は変わらず、ChromeでもSafariでも表示されるHTMLに変化はありませんでした。

これらのことから、HTMLの改変はブラウザで発生しているのではないか？ということが推測できました。ブラウザの種類によらず、同様の改変がされているのであれば、ChromeとSafariの両ブラウザが共通としている仕様、つまりHTMLのLiving Standardに起因しているのではないかということが推測できました。

HTML Living Standardの調査

パースに関するページ内でtableなどのキーワードで検索して眺めているとそれっぽい記述が見つかります。

The highlighted b element start tag is not allowed directly inside a table like that, and the parser handles this case by placing the element before the table.

HTML Standard

例として言われているのは <b> タグですが、 <table> タグの前に移動させるという点がまさに直面している問題と同じ挙動でした。

このことから、最初に上げた不可解なタグの移動はHTMLの仕様によるものであるということがわかりました。

これはfoster-parentという仕組みだそうです。

HTML Standard