How TO - Include HTML
Learn how to include HTML snippets in HTML.
A Basic Web Page
To demonstrate how to include HTML snippets in HTML, we can use a simple web page.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First
HTML Include</h1>
<div
w3-include-HTML="content.html">My
HTML include will go here.</div>
</body>
<html>
Try it yourself »
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>
Add the JavaScript
HTML includes are done by a JavaScript function:
Example
<!DOCTYPE html>
<html>
<body>
<div w3-include-html="content.html"></div>
<script src="w3-include-HTML.js"></script>
</body>
</html>
Try it yourself »
 |
Download w3-include-HTML.js |
|---|
Include Many HTML Snippets
You can include any number of HTML snippets:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First
HTML Include</h1>
<div
w3-include-HTML="h1.html"></div>
<div
w3-include-HTML="content.html"></div>
<script src="w3-include-HTML.js"></script>
</body>
<html>
Try it yourself »
