Hammer Includes

Learn how to use Hammer includes to create reusable components and build faster, more maintainable websites.

Introduction

Hammer includes allow you to reuse HTML content across multiple pages. This is perfect for headers, footers, navigation menus, and other components that appear throughout your site.

Using includes helps you:

  • Reduce code duplication
  • Maintain consistency across pages
  • Make updates in one place
  • Build faster, cleaner websites

Basic Usage

To include a file, use the @include directive:

<!-- @include path/to/file.html -->

You can include files using either:

  • Filename only: Hammer will automatically search for the file
  • Relative path: Specify the exact path for better clarity

Examples

Including a Header

<!-- @include _header -->

Including with a Path

<!-- @include includes/footer.html -->

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page</title>
</head>
<body>
    <!-- @include _header -->
    
    <main>
        <h1>Welcome</h1>
        <p>Content goes here</p>
    </main>
    
    <!-- @include _footer -->
</body>
</html>

Best Practices

Tip: Place commonly used includes in an includes/ directory for better organization.

Organization

  • Use descriptive filenames prefixed with underscore (e.g., _header.html)
  • Group related includes in subdirectories
  • Keep include files focused on a single purpose

Performance

  • Use relative paths for faster file resolution
  • Avoid circular includes (file A includes file B which includes file A)
  • Keep includes small and focused

Next Steps

Now that you understand Hammer includes, learn about: