Include another HTML file in a HTML file

html

responsive-design

server-side-includes

tooltip

byAlex Kataev·Sep 25, 2024

Inject an external HTML into the DOM using the JavaScript fetch API or just load it in with an iframe:

<div id="content"></div>
<script>
fetch('someFile.html')
.then(response => response.text())
.then(html => {document.getElementById('content').innerHTML = html;});
</script>

Or load content separately in an iframe:

<iframe src="someFile.html"></iframe>

Use JavaScript for seamless integration, iframes for compartmentalization.

HTML presto! The jQuery .load() method

jQuery .load() allows to include HTML files swiftly. First, add jQuery to your main file 'a.html' in <head>:

<head>
  <script src="jquery.js"></script> <!-- Make sure to have jquery.js in your directory -->
</head>

Next, mark where you'd like b.html to show up in a.html:

<div id="includedContent"></div> <!-- This is where 'b' will pop. -->

Lastly, make it happen with jQuery .load():

$(function(){
  $('#includedContent').load('b.html'); // abracadabra!
});

Writing on the Wall with document.write

JavaScript's document.write appends HTML directly into the DOM during page load. It's simple and classic like a vinyl record.

document.write('<h1>Welcome to My Site!</h1>'); // Now that's a grand entrance!

Remember: handle with care! HTML special characters need escaping.

A Juicer with .js flavour

Converting HTML files b.html into .js files works like a charm too. JavaScript template literals allow for multiline inclusion, like a perfectly folded burrito.

HTML5 imports: The Interface from the Future

HTML imports, part of the Web Components kick, allow imports straight into head:

<head>
  <link rel="import" href="b.html"> <!-- Check 'b.html' for typos! -->
</head>

Sadly, it's on the chopping block due to limited browser support.

The Harmony of HTML file organization

Create views/ directory for housing CHUNKS of reusable HTML. Like well-trained hummingbirds fetching nectar, these can be drafted easily for display.

Beating the Clutter: Handling multiple inclusion

Use custom data-include attributes for including components dynamically and easily. Commands at your fingertip!

Lightning-fast Server-Side Includes (SSI)

Having a web host that supports Server-Side Includes(SSI) lets you leverage its power for snappier page loads.

<!--#include virtual="header.html" --> <!-- Voila! The header magically appears. -->

Your site host's documentation is the potion book for SSI magic!

Employ a JavaScript library called Tooltip.js to manage dynamic tooltips segregating them in HTML elements for easy mapping.

Third-party Magic: csi.js

Third-party solutions like csi.js by LexmarkWeb aid in embedding HTML vigorously. Comprehensive guidelines available too!

explain-codes / Html / Include another HTML file in a HTML file

Linked

Include jQuery in the JavaScript Console



How do I link a JavaScript file to an HTML file?



Refresh/reload the content in Div using jquery/ajax



Relative path in HTML



How can I add an element after another element?



Common Header / Footer with Static HTML



Uncaught ReferenceError: $ is not defined?



HTML presto! The jQuery .load() method Writing on the Wall with document.write A Juicer with .js flavour HTML5 imports: The Interface from the Future The Harmony of HTML file organization Beating the Clutter: Handling multiple inclusion Lightning-fast Server-Side Includes (SSI)Element tooltips with JavaScript's Tooltip library Third-party Magic: csi.js