THE WORLD'S LARGEST WEB DEVELOPER SITE

How TO - Include HTML


Learn how to include HTML snippets in HTML.


The HTML

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

content.html

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</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.

Add the script w3.js to your web page:

Example

<script src="https://www.w3schools.com/lib/w3.js"></script>

Call w3.includeHTML() to include the HTML:

Example

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


Full Example

Example

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/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="https://www.w3schools.com/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 »