HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Include an HTML file
Save the HTML you want to include in an .html file:
<a href="/html/">HTML</a><br>
<a
href="/css/">CSS</a><br>
<a
href="/bootstrap/">Bootstrap</a><br>
<a
href="/js/">JavaScript</a><br>
<a
href="/sql/">SQL</a><br>
<a
href="/php/">PHP</a><br>
<a
href="/w3css/">W3.CSS</a><br>
Including HTML is done by using a w3-include-html attribute:
<div w3-include-html="content.html"></div>
HTML includes are done by JavaScript.
Make sure your page has w3.js loaded and call w3.includeHTML():
<script>
w3.includeHTML();
</script>
<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
You can include any number of HTML snippets:
<!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>
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():
<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.