Boost Front‑End Efficiency with HTML Inheritance Patterns

Many programmers experience endless overtime coding and bugs that go unnoticed until criticized by managers. This series addresses these issues from tool and architecture perspectives, aiming to improve product quality and development efficiency throughout the front‑end workflow.

Article Navigation Diagram

Front‑end development can be divided into five stages: development, integration, testing, deployment, and monitoring. This series examines efficiency and quality pain points in each stage. This first chapter focuses on the development stage.

Page Structure Inheritance

Developers often use JavaScript or CSS inheritance tricks for reusing functionality or styles, but few consider inheriting page structure or data for reuse. The following example illustrates HTML inheritance.

Assume developers A and B create pages A and B with identical headers, footers, and resources, differing only in body content. Developer B copies only the unique content while reusing A's common parts. However, when A's header or footer changes, both developers must manually synchronize updates, leading to modification and maintenance difficulties.

To address this, common parts can be extracted into separate files and included inline, as shown below.

While this approach reduces duplication, it lacks granular extensibility; extensive conditional logic may be required for slight variations, making maintenance hard. A more ideal architecture gives HTML an inheritance hierarchy: a base.html defines common structure and data, and all pages inherit from it.

The base.html includes shared attributes such as common CSS (reset.css), script libraries (jQuery), icons, and meta tags. Pages can override specific keys like meta, title, header, footer as needed.

After defining the base class, individual pages become much simpler.

The inheritance can be achieved by using a build tool that scans all HTML files, identifies the base class, and merges child attributes into the parent during compilation.

Conclusion

HTML inheritance, similar to mechanisms in dynamic template engines like Smarty or Velocity, enables better template management and development efficiency. Although HTML lacks native inheritance, the techniques described allow simple implementation of reusable structures, reducing maintenance burdens. The next article will discuss modularization to further boost development efficiency.