diff --git a/encoding/html/templates/entity_page.gotpl b/encoding/html/templates/entity_page.gotpl
index 2a5c5c9..4f272ef 100644
--- a/encoding/html/templates/entity_page.gotpl
+++ b/encoding/html/templates/entity_page.gotpl
@@ -1,4 +1,5 @@
 {{ define "entity_page" }}
+<!doctype html>
 <html>
 	<head>
 		{{ template "entity_header" }}
diff --git a/examples/html-template/templates/entity.gotpl b/examples/html-template/templates/entity.gotpl
index 12133f5..42464e1 100644
--- a/examples/html-template/templates/entity.gotpl
+++ b/examples/html-template/templates/entity.gotpl
@@ -3,22 +3,25 @@
 	{{ with .Entity }}
 	<p>
 		<!-- TODO use fieldset -->
-		<div class="entity" id="entity-{{ .ID }}" hx-target="this" hx-select=".entity" hx-swap="outerHTML">
+		<div class="entity" id="entity-{{ . | idField }}" hx-target="this" hx-select=".entity" hx-swap="outerHTML">
+                        <fieldset>
 		{{- range $v := .Fields }}
-			{{ if eq $v.Key "ID" }}
-			<div><label>{{ $v.Key }}</label>: <a href="{{ $v.Value }}">{{ $v.Value }}</a></div>
+			{{ if $v.IsID }}
+                                <div role="group"><label>{{ $v.Key }}</label><a href="{{ $v.Value }}">{{ $v.Value }}</a></div>
 			{{ else }}
 				{{ if eq $v.Type "time.Time" }}
-			<div><label>{{ $v.Key }}</label>: <time datetime="{{ $v.Value }}">{{$v.Value}}<time></div>
+                                <div role="group"><label>{{ $v.Key }}</label><time datetime="{{ $v.Value }}">{{$v.Value}}<time></div>
 				{{ else }}
-			<div><label>{{ $v.Key }}</label>: {{ $v.Value }}</div>
+                                <div role="group"><label>{{ $v.Key }}</label>{{ $v.Value }}</div>
 				{{ end }}
 			{{ end }}
 		{{- end }}
+                        </fieldset>
 
 			<button hx-get="{{ $pathPrefix }}{{ .ID }}?{{ editModeQueryParam }}" hx-headers='{"Accept": "text/html"}' class="btn btn-primary" style="font-size: 2em;">&#9998;</button>
 			<button hx-delete="{{ $pathPrefix }}{{ .ID }}" hx-confirm="Are you sure you want to delete it?" class="btn btn-primary" style="font-size: 2em;">&#128465;</button>
 		</div>
+                <hr />
 	</p>
 	{{ end }}
 {{ end }}
diff --git a/examples/html-template/templates/entity_form.gotpl b/examples/html-template/templates/entity_form.gotpl
index 5a9721f..dcace1d 100644
--- a/examples/html-template/templates/entity_form.gotpl
+++ b/examples/html-template/templates/entity_form.gotpl
@@ -2,31 +2,33 @@
 	{{ $pathPrefix := .PathPrefix }}
 	{{ $method := "put" }}
 	{{ with .Entity }}
+	{{ $id := (.ID | toString) }}
 
-	{{ if eq .ID 0 }}
+	{{ if eq $id "" }}
 		{{ $method = "post" }}
-<form class="entity" id="entity-{{ .ID }}" method="{{ $method }}" target="{{ $pathPrefix }}">
+<form class="entity" id="entity-{{ $id }}" method="{{ $method }}" target="{{ $pathPrefix }}">
 	{{ else }}
-<form class="entity" id="entity-{{ .ID }}" hx-{{ $method }}="{{ $pathPrefix }}{{ .ID }}" hx-headers='{"Accept": "text/html"}' hx-target="this" hx-select=".entity" hx-swap="outerHTML">
+<form class="entity" id="entity-{{ $id }}" hx-{{ $method }}="{{ $pathPrefix }}{{ $id }}" hx-headers='{"Accept": "text/html"}' hx-target="this" hx-select=".entity" hx-swap="outerHTML">
 	{{ end }}
+        <fieldset>
 	{{- range $f := .Fields }}
-		{{ if ne $f.Key "ID" }}
-			{{ if ne ($f.Value | toString) "0" }}
-	<div >
-		<label>{{ $f.Key }}</label>:
-		<input type="text" name="{{ $f.Key }}" value="{{ $f.Value }}">
-	</div>
-			{{ end }}
+		{{ if not $f.IsID }}
+		<div role="group">
+			<label>{{ $f.Key }}</label>
+			<input type="text" name="{{ $f.Key }}" value="{{ $f.Value }}">
+		</div>
 		{{ else }}
-			{{ if ne ($f.Value | toString) "0" }}
-	<a href="{{ $f.Value }}"><div><label>{{ $f.Key }}</label>: {{ $f.Value }}</div></a>
+		<div role="group">
+			<label>{{ $f.Key }}</label>
+			<a href="{{ $f.Value }}">{{ $f.Value }}</a>
+		</div>
 		<input type="hidden" name="{{ $f.Key }}" value="{{ $f.Value }}">
-			{{ end }}
 		{{ end }}
 	{{- end }}
+        </fieldset>
 
 	<button class="btn btn-primary">Submit</button>
-	<button hx-get="{{ $pathPrefix }}{{ .ID }}" hx-headers='{"Accept": "text/html"}' class="btn">Cancel</button>
+	<button hx-get="{{ $pathPrefix }}{{ $id }}" hx-headers='{"Accept": "text/html"}' class="btn">Cancel</button>
 </form>
 	{{ end }}
 {{ end }}
diff --git a/examples/html-template/templates/entity_form_page.gotpl b/examples/html-template/templates/entity_form_page.gotpl
index b97273b..07ddb6c 100644
--- a/examples/html-template/templates/entity_form_page.gotpl
+++ b/examples/html-template/templates/entity_form_page.gotpl
@@ -5,7 +5,9 @@
 		{{ template "entity_header" }}
 	</head>
 	<body>
-		<h2 id="entity-name"><a href="{{ $pathPrefix }}">{{ .Name }}</a></h2>
+                <header>
+                        <h1 id="entity-name"><a href="{{ .PathPrefix }}">{{ .Name }}</a></h1>
+                </header>
 		{{ template "entity_form" . }}
 
 	</body>
diff --git a/examples/html-template/templates/entity_header.gotpl b/examples/html-template/templates/entity_header.gotpl
index 38bcaf1..4562fd6 100644
--- a/examples/html-template/templates/entity_header.gotpl
+++ b/examples/html-template/templates/entity_header.gotpl
@@ -1,16 +1,8 @@
 {{ define "entity_header" }}
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
 <script src="/js/htmx.min.js"></script>
-<style type="text/css">
-label {
-	font-weight: bold;
-}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.jade.min.css" >
 
-.entity {
-	padding: 2rem 1rem;
-	border-radius: 20px;
-	background: rgb(255,0,0);
-	background: linear-gradient(217deg, rgba(255,0,0,1) 0%, rgba(32,173,215,1) 100%); 
-}
-</style>
 {{ end }}
diff --git a/examples/html-template/templates/entity_list.gotpl b/examples/html-template/templates/entity_list.gotpl
index 4cca11e..317a470 100644
--- a/examples/html-template/templates/entity_list.gotpl
+++ b/examples/html-template/templates/entity_list.gotpl
@@ -1,16 +1,23 @@
 {{ define "entity_list" }}
 {{ $pathPrefix := .PathPrefix }}
-<h2 id="entity-name">
-	<a href="{{ $pathPrefix }}">{{ .EntityName }}</a>
-	<form method="get" action="{{ $pathPrefix }}?mode=edit">
-		<input type="hidden" name="mode" value="edit">
-		<button type="submit" style="font-size: 2em;">+</button>
-	</form>
-</h2>
+<header>
+        <h1 id="entity-name">
+                <a href="{{ $pathPrefix }}">{{ .EntityName }}</a>
+        </h1>
+</header>
 
+<main>
 {{ range $k, $v := .Entities }}
 	{{ $wrapped := wrapMetadata $pathPrefix $v }}
 	{{ template "entity" $wrapped }}
 {{ end }}
+</main>
+
+<footer>
+	<form method="get" action="{{ $pathPrefix }}?mode=edit">
+		<input type="hidden" name="mode" value="edit">
+		<button type="submit" style="font-size: 2em;">+</button>
+	</form>
+</footer>
 
 {{ end }}
diff --git a/examples/html-template/templates/entity_page.gotpl b/examples/html-template/templates/entity_page.gotpl
index 2a5c5c9..cc3e1ba 100644
--- a/examples/html-template/templates/entity_page.gotpl
+++ b/examples/html-template/templates/entity_page.gotpl
@@ -1,11 +1,18 @@
 {{ define "entity_page" }}
+<!doctype html>
 <html>
 	<head>
 		{{ template "entity_header" }}
 	</head>
 	<body>
-		<h2 id="entity-name"><a href="{{ .PathPrefix }}">{{ .Name }}</a></h2>
-		{{ template "entity" . }}
+                <header>
+                        <h1 id="entity-name"><a href="{{ .PathPrefix }}">{{ .Name }}</a></h1>
+                </header>
+                <section class="section">
+                        <div class="container">
+                                {{ template "entity" . }}
+                        </div>
+                </section>
 	</body>
 </html>
 {{ end }}
