Web Development Field Guide

Structure your HTML

Thursday, June 25, 2015 5:15 AM

As already done with your CSS and Javascript you should also think of reusable elements in your HTML and therefore outsource them as components to be included.

src
|-- inc
|    |-- site-header.inc.html
|    |-- site-footer.inc.html
|    `-- teaser.inc.html
|
|-- index.html            // Includes site-header.inc.html and site-footer.inc.html
`-- products.html         // Includes site-header.inc.html,
                             site-footer.inc.html and teaser.inc.html

Using the power of our build script we don't need to give up on including outsourced files. By simply adding the following snippet anywhere in our HMTL source, the build script takes care to include the given files when building our distribution version

<body>

    //= include inc/site-header.inc.html

    <div class="site-main">

    </div>

    //= include inc/site-footer.inc.html

</body>