diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
index 57d4dcc79a..cc3856316c 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
@@ -4,22 +4,24 @@
 
 	export let todo;
 
-	let div;
+	let button;
 
 	afterUpdate(() => {
-		flash(div);
+		flash(button);
 	});
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<div bind:this={div} on:click>
+<button bind:this={button} type="button" on:click>
 	{todo.done ? '👍': ''} {todo.text}
-</div>
+</button>
 
 <style>
-	div {
+	button {
+		all: unset;
+		display: block;
 		cursor: pointer;
 		line-height: 1.5;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
index fa81d35989..848f167d02 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
@@ -6,22 +6,24 @@
 
 	export let todo;
 
-	let div;
+	let button;
 
 	afterUpdate(() => {
-		flash(div);
+		flash(button);
 	});
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<div bind:this={div} on:click>
+<button bind:this={button} type="button" on:click>
 	{todo.done ? '👍': ''} {todo.text}
-</div>
+</button>
 
 <style>
-	div {
+	button {
+		all: unset;
+		display: block;
 		cursor: pointer;
 		line-height: 1.5;
 	}
-</style>
\ No newline at end of file
+</style>