top of page

The Simplest Way to Modularise HTML

  • Writer: Kimone Premlall
    Kimone Premlall
  • May 14, 2020
  • 3 min read

Updated: Jun 17

Recently, I started working on a pet project that focussed a lot on the user interface and design principles. Because of the heavy use of HTML and CSS, I wanted to split the HTML code into separate components. For example, I'd have elements that appear on every screen, such as the navigation bar and footer, separated into different HTML files. Doing this would reduce the amount of code repetition in each screen. The code would also be much easier to read and update.


The problem was finding the right method of separating HTML code into components. Some methods involved installing tools like Gulp. I didn't really want to install an entirely new tool just for this.


I tried using php code to do the job. Unfortunately, I was not able to test the php code because I used Visual Studio Code's Live Server extension. This extension made running HTML code easier and quicker. But Live Server only ran .html files. When adding the php code to my .html file, I had to change the file extension to .php. Live Server didn't like that and refused to run my code. So I had to find an easier way to modularise the code.


The method that worked for me was using ajax. I didn't need to install anything extra or change any file extensions. Here's how I did it:


1. I created a .html file with the code that I wanted to extract. This code was for the page header, which would contain the page's navigation bar. I called this file signup-navbar.html.

<header>
  <nav class="navbar navbar-inverse navbar-fixed-top" data-spy="affix">
 <div class="container-fluid">
 <div class="navbar-header">
 <h7 class="title" href="#">Title</h7> 
 </div>
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#"><span class="glyphicon glyphicon-user"></span>  Sign Up</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>  Sign In</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>  About</a></li>
 </ul>
   </div>
  </nav>
</header>

2. In the main file, called SignUp.html, I added the code below in the <head> tag. Wherever a <div> has the id 'signup-navbar', the <div> will be filled with the contents of the signup-navbar.html file.

It is important to note that with the example, SignUp.html and signup-navbar.html were located in the same folder. You will need to specify the path of the signup-navbar.html file if it will be located in a separate folder.

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
 $(function(){
 $('#signup-navbar').load('signup-navbar.html');
  });
 </script>
</head>

3. Then I created a <div> with the 'signup-navbar' id in the SignUp.html file so that the navigation bar would appear on the screen. I added this code to the <body> of SignUp.html.

<div id="signup-navbar"></div>

4. I ran the SignUp.html file with Live Server and the navigation bar that I coded in the signup-navbar.html file appeared on screen.

Comments

bottom of page