Если Вы используете чистый HTML + JS, можно использовать
HTML Imports, но нужно учитывать то, что не все браузеры поддерживают этот функционал.
Простой пример:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Human Being</title>
<link rel="import" href="/imports/heart.html">
</head>
<body>
<p>What is a body without a heart?</p>
</body>
</html>
var link = document.querySelector('link[rel=import]');
var heart = link.import;
// Access DOM of the document in /imports/heart.html
var pulse = heart.querySelector('div.pulse');
Например, Mozilla предупреждает:
Firefox will not ship HTML Imports in its current form. See this status update for more information. Until there is a consensus on the standard or alternative mechanisms are worked out, you can use a polyfill such as Google's webcomponents.js.
https://developer.mozilla.org/en-US/docs/Web/Web_C...
Поэтому, рекомендуется использовать что-то вроде этого:
https://github.com/webcomponents/webcomponentsjs
https://github.com/webcomponents/html-imports 