Organizing HTML with Partials

As projects get longer and longer so do files. If you don’t organize and separate your files you might end up with 3,000 lines Javscript files or CSS files with redundancies. Organization becomes much more important if your working on a team. Everyone needs to know where things are and fast. So then it’s come at no surprise that many different methods and tools have come into existence to make organization a breeze. One of these is the use of partials in your code to better organize HTML elements.

Partials are just that. Partial HTML that you can call or render when you need them. Just as you would create a separate Model or Module to handle tasks you need for your application, you can create mini HTML pages and stick those in at times you need. Some applications might need to loop through elements in a database and render them. If you do this many times for different items you might find yourself with an HTML view with many hundreds, if not thousands of lines of code. When you becomes time to change something it could take you a while to find and change that element. This is where partials shine.

To use partial html files, you need to first create a folder in to hold them. Inside you can then create the elements required that you might want to called later.

The actual code will depend on your usage and language but for something like looping through a database, you could write a simple loop.

Data can get passed to the partial using parameters so that you can render your data correctly. You can even use Javascript to dynamically add partials to your page or even remove them to make a custom box for users to interact with.

In this way you can organize your HTML into bite size, manageable chunks just as you might with Javascript or CSS files.