Sinceramente acredito que com HTML não tenha como, mas isso não é o fim do mundo. =)
Existem duas alternativas, mas que não são puramente HTML:
1. JavaScript/JQuery:
Dentre várias maneira, pode simplesmente usar o $.get()
junto com um .html()
, para inserir o conteúdo obtido.
O $.get()
irá obter o HTML do URL informado, depois basta inserir o HTML obtido em algum elemento que deseja, por exemplo $('menu').html(meu_html)
.
Em um exemplo básico seria:
<menu></menu>
<script>
$.get('seu_menu.html',
function(data) {
$('menu').html(data);
}
);
</script>
Quer um exemplo? Então...
$.get('https://developer.mozilla.org/en-US/docs/Web/',
function(data) {
topbar = data.split('<header id="main-header">');
topbar = topbar['1'].split('</header>');
$('menu').html('<header id="main-header">'+topbar['0']+'</header>');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://developer.cdn.mozilla.net/static/build/styles/mdn.90e6d84d58ff.css" rel="stylesheet" type="text/css">
<link href="https://developer.cdn.mozilla.net/static/build/styles/wiki.978c53db5cdd.css" rel="stylesheet" type="text/css">
<menu></menu>
<main id="content">
Resto do meu site
</main>
2. Server-Side:
Pode incluir conteúdo de maneira fácil via PHP, por exemplo, usando include
.
<?php
include('meu_menu.html');
?>
O include
neste caso irá inserir o conteúdo de outro arquivo. Dessa forma poderá ter um documento (geralmente: menu de nevegação, topo, rodapé) sendo parte de todas as páginas. Uma vez que este documetno for atualizado, todas as páginas irão mostrar o arquvio modificado, sem quer que editar um a um.