THE WORLD'S LARGEST WEB DEVELOPER SITE

W3.JS Includes

Include HTML snippets in HTML

Include an HTML file:

w3.includeHTML()

The HTML

Save the HTML you want to include in an .html file:

content.html

<a href="https://www.w3schools.com/html/">HTML</a><br>
<a href="https://www.w3schools.com/css/">CSS</a><br>
<a href="https://www.w3schools.com/bootstrap/">Bootstrap</a><br>
<a href="https://www.w3schools.com/js/">JavaScript</a><br>
<a href="https://www.w3schools.com/sql/">SQL</a><br>
<a href="https://www.w3schools.com/php/">PHP</a><br>
<a href="https://www.w3schools.com/w3css/">W3.CSS</a><br>

Include the HTML

Including HTML is done by using a w3-include-html attribute:

Example

<div w3-include-html="content.html"></div>

Add the JavaScript

HTML includes are done by JavaScript.

Make sure your page has w3.js loaded and call w3.includeHTML():

Example

<script>
w3.includeHTML();
</script>


Full Example

Example

<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>

<div w3-include-html="content.html"></div>

<script>
w3.includeHTML();
</script>

</body>
</html>
Try it Yourself »

Include Many HTML Snippets

You can include any number of HTML snippets:

Example

<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>

<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>

<script>
w3.includeHTML();
</script>

</body>
<html>

Try it Yourself »


Adding a Callback Function

When you include HTML snippets in a web page, you must secure that other functions that depends on the included HTML do not execute before the HTML is properly included.

The easiest way to "hold back" code is to place it in a callback function.

A callback function can be added as an argument to w3.includeHTML():

Example

<script>
w3.includeHTML(myCallback);

function myCallback() {
   // code that has to wait goes here
}
</script>

You will find a callback example in the next chapter of this tutorial.