Como incluir HTML

Aprenda a incluir fragmentos de HTML no HTML.

HTML

Salve o HTML que será incluído para o arquivo .html:

content.html

<a href="howto_google_maps.asp">Mapas do Google</a><br>
<a href="howto_css_animate_buttons.asp">Botões Animados</a><br>
<a href="howto_css_modals.asp">Caixas Modais</a><br>
<a href="howto_js_animate.asp">Animações</a><br>
<a href="howto_js_progressbar.asp">Barras de Progresso</a><br>
<a href="howto_css_dropdown.asp">Dropdowns ao Hover</a><br>
<a href="howto_js_dropdown.asp">Clique nos Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Tabelas Responsivas</a><br>

para incluir HTML

Usar w3-include-html através de atributos para incluir HTML:

Exemplo

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

Adicionar JavaScript

A inclusão de HTML é feita pelo JavaScript.

Exemplo

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /* Varre a coleção de todos os elementos HTML: */
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /* Procurar elementos com atributo específico: */
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /* Usar o valor do atributo como nome de arquivo para enviar solicitação HTTP: */
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Página não encontrada.";}
          /* Remover atributo e chamar essa função novamente: */
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /* Sair da função: */
      return;
    }
  }
}
</script>

Chamar na parte inferior da página includeHTML():

Exemplo

<script>
includeHTML();
</script>

Experimente pessoalmente

Incluir múltiplos fragmentos de HTML

Você pode incluir quantos fragmentos de HTML quiser:

Exemplo

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

Experimente pessoalmente