HTML で空白文字列がデザインを崩す

– ソース整形で空白文字(空白、改行、タブ)をいれてたらデザインが微妙に崩れ、原因究明に手間取ってしまった。

   <td>
       <a href=’foo.html’
            alt=”foo”>
          foo
       </a>
   </td>

– TD タグや A タグなど、子要素でなくデータをとる系のタグでは、空白文字は無視されず、表示されてしまう。
– SGML では、全ての空白文字は無視されず、解釈の対象になるのが基本。ただ、全てが解釈されてしまうとコード整形ができなくなるので不便ということで、タグ、要素、属性間で部分的、意図的に無視するようになっている。開始タグの途中の改行も、親がデータ系なら表示されてしまう事になる。データを持つタグの中で無理に整形したいならコメントタグを使って、コメントとして改行するとか工夫しないとだめ。スマートに済ませるなら、データを持たないタグだけで改行する。

  <!– コメントを使って無理矢理(見目悪っ) –>
  <tr>
      <td><!–
          –><a href=’foo.html’ alt=”foo”><!–
             –>foo<!–
          –></a><!–
      –></td>
  </tr>
  <!– または –>
  <tr>
      <td><a href=’foo.html’ alt=”foo”>foo</a></td>
  </tr>
  <!– これは不要な空白が表示されるパターン –>
  <tr>
      <td>
          <a href=’foo.html’>foo</a>
      </td>
  </tr>
  <!– これも –>
  <tr>
      <td><a
           href=”foo.html”>foo</a>
      </td>
  </tr>
  <!– これは多分大丈夫?? –>
  <tr>
      <td
             align=”center”
             border=”1″
      ><a href=”foo.html”>foo</a></td>
  </tr>

長い開始タグとかをコメントしたくて…