HTMLページをヘッダー・フッターに分割して読み込む方法

HTMLサイトの制作や編集作業を効率化するためには、HTMLファイルを以下の3つのパーツに分割して管理するのが効果的です。

• ヘッダー（Header）
• フッター（Footer）
• コンテンツ（Content）

なぜHTMLを分割するのか？

全ページで共通するヘッダーやフッターを各HTMLファイルに直接記述すると、デザイン変更のたびにすべてのページを修正し直す必要があります。あらかじめ共通部分を別ファイルに分割しておけば、1つのファイルを編集するだけで全ページに反映でき、保守性と作業効率が大幅に向上します。

静的HTMLだけでは実現できない

残念ながら、純粋な静的HTML（.htmlファイル）のみでは、他のファイルをインクルードして読み込むことはできません。この課題を解決するには、主に次の2つの方法があります。

方法1：PHPのincludeを使う

サーバーがPHPに対応していれば、include文やrequire文を使ってヘッダーやフッターを簡単に読み込めます。

<?php include('header.php'); ?>
<!-- ページ固有のコンテンツ -->
<?php include('footer.php'); ?>

サーバーサイドで処理されるため、SEOや表示速度への影響も少なく、最も推奨される方法です。

方法2：JavaScriptで動的に読み込む

PHPが利用できない環境では、JavaScriptを使ってメインページの読み込み後に部品を動的に挿入する方法があります。fetch APIやjQueryのload()メソッドを利用すれば、外部のHTMLファイルを取得して指定した要素に差し込むことが可能です。

ただし、JavaScriptによる読み込みは検索エンジンのクローラーが正しく認識できない場合があり、SEOの面で不利になることがあります。可能であれば、PHPなどのサーバーサイドインクルードを優先的に採用するのがおすすめです。