HTMLタグの入れ子ルールとループ処理への対応

HTMLコーディングはコーダーの作り方次第で後の改修不可が格段に変わります。このことは誰しもが理解はしているのですが、実際の現場では後工程を考えないで構築するケースが多いでしょう。おおよそ次のような状況と考えます。

• 受注者が納品して完了となるため
• HTML納品後にシステム部門が実装するため
• 現場が納期優先で作業を進めているため

初期構築と運用で担当が変わる、システム連動ありでテンプレート反映をコーダーが行わない、というように後工程を経験しない場合に起きがちです。ここでは運用しやすいHTMLコーディングについて考えます。

HTMLタグのネストは浅くする

まずHTMLタグは入れ子にし過ぎないこと、やっぱりこれは重要です。最近の方はご存知ないかと思いますが、一昔前はTABLEコーディングが主流な時代もありました。今はCSSのfloatやflexbox、Gridレイアウトで段組みしますが、以前はこれをTABLEタグで実装していました。そのためTABLEタグを入れ子にすると非常にわかりづらく、要素の入れ替えが非常に困難な作り方でした。

最近ではTABLEレイアウトはほぼないのですが、HTMLタグを入れ子にすると視認性は悪くなります。他の人がコーディングしたコードを見ると入れ子状況を把握するのに時間がかかります。だから不要なタグのネストは避けるべきです。

全てを把握している訳ではありませんが、CSSフレームワークを使用すると不要なネストが発生しやすいように思います。見た目を整えるためだけにHTMLタグを増やしていくとどんどんネストが深くなります。別の機会でお話ししますが、私はCSSを汎用化・部品化するよりも、ブロックごとに限定して設定する方が後工程で管理がしやすいです。一つの要素に複数のCLASSを指定する、またはCLASSごとにタグを入れ子にするような運用ルールにしてしまうと修正しづらい（できない）HTMLとなってしまいます。

HTMLタグは内容に応じて使い分ける

DIVタグを多用すると後工程で間違いが発生やすいです。DIVタグを入れ子にしているとタグの終わりの場所がわかりづらくなります。HTMLタグを内容に応じて使い分けると終了タグの位置も明確です。HTMLタグの使い分けはSEO（※）だけでなく管理面でも重要なのです。

※DIVタグ自体は内容に意味を持ちません。DIVタグでマークアップしたテキストは意味付けのない文章となります。

システム連携しやすいHTMLタグのループ処理

システムと連携する場合、静的なHTMLとは異なる観点でHTMLコーディングする必要があります。システム化する時に考えることはループ処理です。ループ処理とはその言葉通り繰り返し処理のことです。一定の範囲で繰り返しループする部分はシステム連携しやすいようにコーディングをします。前述とも被るのですが、HTMLタグのネストが浅い方がシステム連携しやすくなります。

不要なネストを避けるだけでシステム連携しやすい、管理しやすいHTMLとなります。またタグの使い分けもすることでSEO内部対策にもなります。HTMLコーディングはSEOと運用・保守面の両方から考えてマークアップすべきです。具体的なマークアップについては別項でお話しします。