Как связать html файлы

Сейчас нельзя просто связать два файла друг с другом, чтобы, например, хранить шапку в одном файле, блоки в другом и так далее. Такой функциональности у HTML нет.

Но можно использовать шаблонизаторы, которые имеют такую функцию, например — Pug. С его помощью можно создавать и подключать шаблоны друг в друга. Это помогает структурировать весь шаблон и комфортнее с ним работать. Вот как будет выглядеть пример шаблона на Pug:

//- Файл по пути includes/header.pug
header
  a.logo(href='#') Хекслет
  nav
    a(href='/programs') Программы
    a(href='/courses') Курсы
    a(href='/pricing') Цены
    a(href='/teams') Компаниям

//- Файл по пути includes/footer.pug
footer
  p Hexlet Ltd.

//- Файл index.pug
doctype html
html
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    meta(rel='icon' type='image/x-icon' href='favicon.ico')

    title Hexlet

    link(rel='stylesheet' href='./styles/app.css')
  body
    //- Подключение шапки сайта
    include includes/header.pug

    main
      h1 Научитесь программировать и получите востребованную профессию

    //- Подключение футера сайта
    include includes/footer.pug