diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
index 2879760218..c97ee53681 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
@@ -1,17 +1,16 @@
 <!-- #docregion show-hero-1 -->
-{{hero}}
+<h2>{{hero}}</h2>
 <!-- #enddocregion show-hero-1 -->
 
 <!-- #docregion show-hero-2 -->
-<h2>{{hero.name}} Details</h2>
+<h3>{{hero.name}} Details</h3>
 <div><span>id: </span>{{hero.id}}</div>
 <div><span>name: </span>{{hero.name}}</div>
 <!-- #enddocregion show-hero-2 -->
 
 <!-- #docregion name-input -->
 <div>
-  <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name"/>
-  </label>
+  <label for='name'>Hero name: </label>
+  <input id='name' [(ngModel)]="hero.name" placeholder="name">
 </div>
 <!-- #enddocregion name-input -->
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
index e69de29bb2..73592eb3a6 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
@@ -0,0 +1,3 @@
+input {
+  padding: .5rem;
+}
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
index 9a5af7e30c..39935996f5 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
@@ -4,7 +4,6 @@
 <!-- #enddocregion pipe -->
 <div><span>id: </span>{{hero.id}}</div>
 <div>
-  <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name"/>
-  </label>
+  <label for='name'>Hero name: </label>
+  <input id='name' [(ngModel)]="hero.name" placeholder="name">
 </div>