Solución:
Editar:
Una opción que vale la pena explorar es la object etiqueta. Puede incluir otro archivo (de cualquier tipo) en su página.
Esta parece una opción más adecuada en comparación con el resto de opciones a continuación.
<object type="text/html" data="file.html"></object>
Funciona de forma similar a la importación de HTML5.
los object La etiqueta es parte de HTML 4, por lo tanto, es compatible desde IE6 +, Firefox 2+, Chrome 1+, etc.
Usando la importación de HTML5. Tiene soporte muy limitado / navegadores que lo implementan.
<link href="https://foroayuda.es/extern.html" rel="import" />
Aparte de eso, necesitará Javascript como mínimo para importar otro archivo si desea hacerlo desde el lado del cliente. Hay una variedad de opciones disponibles para hacerlo desde el back-end dependiendo de su tecnología.
Otra posibilidad, como destacó Pete, es el uso de iframes (aunque preferiría no usarlos).
Se desaconseja el uso de HTML5 Imports, como puede ver aquí.
Aquí hay algunas notas tomadas del enlace anterior:
-
Estado de MS Edge: en consideración
-
Estado de Chrome: obsoleto
-
Estado de Firefox: no planeado
-
Estado de WebKit: No considerando
-
Firefox no tiene planes de admitir importaciones de HTML, aunque por ahora se puede habilitar a través de la preferencia “dom.webcomponents.enabled” en about: config
No, esto no se puede hacer con HTML simple.
Alternativas:
- Ejecute código del lado del servidor como PHP
- Utilice un generador de sitios estáticos para crear su página
- Use javascript en la página para incorporar componentes comunes (aunque esto no funciona bien cuando intenta eliminar la duplicación de código entre páginas)
No puede hacerlo con HTML simple, pero puede usar javascript dentro de la etiqueta de script en su archivo html como este ejemplo de jQuery
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#header').load("header.html");
$('#footer').load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
your content........
<div id="footer"></div>
</body>
</html>