Search code examples
htmlcode-organization

What is the best way to separate a large html file into three smaller html files?


I have a very large website, and I was wondering how to separate a single HTML file into 3 separate HTML files. In order, to organize the code as individual components of a whole like this:

Header.html

Body.html

Footer.html

How can I break the html code into three separate html files but still make them work together as a whole?


Solution

  • A straightforward method would be to use PHP to concatenate 3 includes:

    Step 1) In your .htaccess file, enable your server to parse .html & .htm files as .php files:

    AddType application/x-httpd-php .html .htm
    AddHandler application/x-httpd-php .html .htm
    

    Step 2) In page.html, write (only) the following:

    <?php
    
    include '/home/example/public_html/header.html';
    include '/home/example/public_html/body.html';
    include '/home/example/public_html/footer.html';
    
    ?>
    

    N.B. /home/example/public_html/ is an example relative-to-root server path. You'll need to change this to whatever your own relative-to-root server path is.

    Now, when you point your browser at page.html, your server will parse that .html file as a .php file and concatenate and deliver three separate PHP server-side include files as a single .html file.