How do i include an external html file in html?

Learn how to include HTML snippets in HTML.

The HTML

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

content.html

Google Maps

Animated Buttons

Modal Boxes

Animations

Progress Bars

Hover Dropdowns

Click Dropdowns

Responsive Tables

Include the HTML

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

Example

Add the JavaScript

HTML includes are done by JavaScript.

Example

function includeHTML[] {
  var z, i, elmnt, file, xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName["*"];
  for [i = 0; i < z.length; i++] {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute["w3-include-html"];
    if [file] {
      /* Make an HTTP request using the attribute value as the file name: */
      xhttp = new XMLHttpRequest[];
      xhttp.onreadystatechange = function[] {
        if [this.readyState == 4] {
          if [this.status == 200] {elmnt.innerHTML = this.responseText;}
          if [this.status == 404] {elmnt.innerHTML = "Page not found.";}
          /* Remove the attribute, and call this function once more: */
          elmnt.removeAttribute["w3-include-html"];
          includeHTML[];
        }
      }
      xhttp.open["GET", file, true];
      xhttp.send[];
      /* Exit the function: */
      return;
    }
  }
}

Call includeHTML[] at the bottom of the page:

Include Many HTML Snippets

You can include any number of HTML snippets:

Example

Try it Yourself »

How can I insert an external html file to my file?

For instance:

       Here show the external HTML code in the file, for example: name.html

Thank you very much!

asked Jun 17, 2013 at 13:14

5

Another way is to use the object tag. This works on Chrome, IE, Firefox, Safari and Opera.

 
    Your browser doesn’t support the object tag. 

more info at //www.w3schools.com/tags/tag_object.asp

mmohab

2,2134 gold badges27 silver badges42 bronze badges

answered May 21, 2014 at 17:01

Stuart GStuart G

5975 silver badges2 bronze badges

3

You can use jquery load for that.

$[document].ready[function[e] {
    $['#header'].load['name.html',function[]{alert['loaded']}];
}];

Don't forget to include jquery library befor above code.

answered Jun 17, 2013 at 13:20

1

You're looking for the tag, or, better yet, a server-side templating language.

answered Jun 17, 2013 at 13:15

SLaksSLaks

848k174 gold badges1877 silver badges1944 bronze badges

The iframe element.

But content that you way to have appear on multiple pages is better handled using templates.

3

How do you add an external HTML in HTML?

How do you display a file in HTML?

How do I put an external HTML in a div?