レガシーPHPリファクタ 11:HTMLヘッダーの現代化 — XHTML 1.0からHTML5への移行と不要な記述の断捨離

本シリーズでは、2007年執筆当時のレガシーなPHPアプリケーションコードを、現代のWeb開発基準(PHP 8.5、Smarty 5、PHPStan等)に合わせて段階的にリファクタリングしていくプロセスをご紹介しています。

第11回目となる今回は、すべてのページの根幹である HTMLヘッダー周辺の近代化(XHTML 1.0からHTML5への移行) を取り上げます。


1. 今回のリファクタリングの概要

長年放置されていたレガシーコードの <html> や <head> 部分には、2000年代半ばのXHTML全盛期のの名残が色濃く残っていました。今回のプルリクエストでは、これらを現代のHTML5標準に一斉に書き換えました。

リファクタポイント

  1. DOCTYPE を XHTML 1.0 Transitional から HTML5 へ移行
  2. <html> タグから不要な xmlns 属性を削除
  3. meta Content-Type を HTML5 標準の charset 指定へ簡略化
  4. 不要な Content-Style-Type / Content-Script-Type メタタグを削除
  5. 空要素の自己閉じタグ /> を削除し、HTML5 標準の書き方に統一

修正前後のコード比較

修正前

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />

修正後

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">

2. リファクタリング・コラム:DOCTYPEの変遷とコードの現代化

2007年当時:なぜ XHTML 1.0 Transitional だったのか?

本リポジトリのオリジナルコード(2007年執筆時)では、文書型宣言に XHTML 1.0 Transitional を採用していました。当時この選択をした背景には、2000年代半ばのWeb業界における明確な文脈と葛藤がありました。

  • W3Cが掲げた「Webの未来=XHTML」という潮流 当時、W3CはHTML 4.01の次世代規格として、XMLベースの厳格な文法を持つXHTMLへの移行を強力に推し進めていました。技術書やWebアプリケーション開発において「これからの標準」を見据える際、XHTMLの採用は最も先進的で自然な選択肢でした。
  • 現場の現実解としての Transitional 理想的な Strict(厳格モード)では、当時のWeb開発の現場(特にInternet Explorer 6を中心としたブラウザ互換性やレガシーなHTML要素の残存)においてレイアウト崩れや制約が多すぎました。そのため、「XHTMLの将来性」と「実務での柔軟性・互換性」を両立させる現実的な落としどころが XHTML 1.0 Transitional でした。

現代の視点:HTML5への移行とリファクタリング方針

その後、XMLの厳格さを追求したXHTML 2.0の路線はWebの現実(ブラウザの互換性要求や柔軟なエラー処理)と乖離し、実務者やブラウザベンダー主導(WHATWG)で策定された HTML5 が世界標準となりました。

本リポジトリでは、現在の保守性と開発体験(DX)を考慮し、DOCTYPEを <!DOCTYPE html>(HTML5)へ移行しています。


3. 各変更項目の詳細と改善効果

1. DOCTYPEの移行とIDE(PhpStorm等)の誤警告解消

  • 背景: XHTML 1.0 DTD仕様に基づき、例えば <input type="image"> に対する width/height 属性など、実務上標準的な記述に対してPhpStorm等のIDEで構文警告が発生していました。
  • 効果: HTML5ではこれが正式な仕様として定義されているため、無駄なコード変更(属性の削除や無理なCSS化)を行わずにIDEの警告を正常化できました。また、すべてのモダンブラウザで一貫した「完全な標準モード(Standards Mode)」として描画されるようになります。

2. 不要な xmlns 属性の削除

  • 背景: HTML5規格では、要素が自動的にHTML名前空間として扱われます。
  • 効果: xmlns="
    XHTML namespace
    (http://www.w3.org/1999/xhtml)"
    のような明示的な宣言が不要になるため、マークアップをスリム化できます。

3. meta Content-Type から charset への簡略化

  • 背景: 長い http-equiv 指定は、レガシーなブラウザ互換性のための名残でした。
  • 効果: HTML5標準である <meta charset="utf-8"> に一本化することで、コードが劇的にシンプルになり、IDE上での Wrong attribute value などの誤警告も一掃されました。

4. Content-Style-Type / Content-Script-Type の削除

  • 背景: 現代のHTML(HTML5)では、それぞれCSSやJavaScriptがデフォルトの言語であることが仕様として定義されています。
  • 効果: メタタグによる冗長な定義が不要となったため、記述を削ってメンテナンス性を向上させました。

5. 閉じタグ /> の削除

  • 背景: XHTMLでは空要素(<br /> や <meta ... /> など)の末尾にスラッシュが必須でしたが、HTML5ではオプショナル(基本は不要)となっています。
  • 効果: HTML5標準の書き方に統一することで、コードベース全体の記法の一貫性を保ちます。

まとめ

今回は、HTMLの根本である文書型宣言とヘッダーのメタタグを現代化しました。

IDEの無駄な警告を取り除くことで、開発体験(DX)が向上しました。

今後、必要に応じて HTML5 のセマンティックなタグ構造やアクセシビリティ改善(input type="date"など)を導入することができます。

参考PR

refactor: DOCTYPE を XHTML 1.0 Transitional から HTML5 へ移行 by ninton · Pull Request #701 · ninton/smartybook
参考refactor: DOCTYPE を XHTML 1.0 Transitional から HTML5 へ移行 #691refactor: 不要なContent-Style-Type/Content-Script-Typeメタタグを削除...
レガシーPHPリファクタ 11:HTMLヘッダーの現代化 — XHTML 1.0からHTML5への移行と不要な記述の断捨離
Smarty動的Webサイト構築入門サンプルソース. Contribute to ninton/smartybook development by creating an account on GitHub.
タイトルとURLをコピーしました