How can I put a piece of HTML in a separate file, and reuse the code.
I have a MENU that will be used on several pages of the project. But in the case of doing code maintenance, it would be easier if you created a page: MENU.html.
And in the next pages, I called the menu that should be inside a DIV
As stated in the comments you can use the iframe tag.
iframe.html
<iframe src="menu_frame.html" style="border:none;"></iframe>
menu_frame.html
<a href="#">Menu</a>
You can also use the object tag. Check browser compatibility.
object.html
<object data="menu_frame.html"></object>
Develop an app that has menus in separate menu files of the content, you solve the maintenance problem, but it creates another problem, rendering.
As you did not give details of your project, I'll assume you're using a css and php framework, basically you can split your pages into three parts
File menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
Content.html file
<h1>Seu conteudo Aqui!</h1>
Footer.html file
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
In your index.php file
<?php
require "menu.html";
$url = explode('/', $_SERVER['REQUEST_URI']); // Obtem a url e passa em forma de array
switch($url[1]) { // compara o url para saber qual pagina carregar
case "home":
require "content.html";
case "sobre":
require "sobre.html";
default:
require "content.html";
}
require "footer.html";
?>
In this case, in other words, you will create your route system.
I have an example that I am still studying, but take a look there and you will understand better what I tried to explain.