layout:fragmentを利用してhtmlを結合する

前提

thymeleaf.layoutを使用した画面の結合を行いたいです。
メイン画面のindex.htmlとヘッダー画面のheader.htmlはlayout:replaceを用いて結合して表示することができたのですが、
メイン画面のindex.htmlとフッター画面のfooter.htmlをlayout:fragmentを用いて結合して表示することができませんでした。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

複数のHTMLファイルを1つのHTMLに結合させて表示する

発生している問題・エラーメッセージ

該当のソースコード

pom.xml
1　　　　<!-- 省略 -->
2		<!-- thymeleaf-layout-dialect -->
3		<dependency>
4			<groupId>nz.net.ultraq.thymeleaf</groupId> 
5			<artifactId>thymeleaf-layout-dialect</artifactId>
6		</dependency>
7　　　　<!-- 省略 -->

index.html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org"
3xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=divice-width, initial-scale=1, shrink-to-fit=no">
7<title>レイアウト</title>
8</head>
9<body>
10<!-- ヘッダー -->
11<div layout:replace="~{html/header::header}"></div>
12<!-- フッター -->
13<div layout:fragment="footer"></div>
14</body>
15</html>

header.html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org"
3xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
4layout:decorate="~{/index}">
5<head>
6<meta charset="UTF-8">
7<title>Insert title here</title>
8</head>
9<body>
10	<div layout:fragment="header">
11		ここはヘッダーです
12	</div>
13</body>
14</html>

footer.html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org"
3xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
4layout:decorate="~{/index}">
5<head>
6<meta charset="UTF-8">
7<title>Insert title here</title>
8</head>
9<body>
10	<div layout:fragment="footer">
11		ここはフッターです
12	</div>
13</body>
14</html>

オブジェクトツリー

試したこと

pom.xmlにthymeleaf-layout-dialectのライブラリを追加する。
メインのindex.html内のフッターを読み込ませたい箇所に<div layout:fragment="footer"></div>を記述する
読込み先のfooter.htmlをindex.htmlと紐付けるために<html>タグにlayout:decorate="~{/index}と<div>タグにlayout:fragment="footer"と記述する。