diff --git a/resources/views/foods/delete.blade.php b/resources/views/foods/delete.blade.php
index 9d7c26a..fde158a 100644
--- a/resources/views/foods/delete.blade.php
+++ b/resources/views/foods/delete.blade.php
@@ -1,9 +1,9 @@
 <x-app-layout>
     <x-slot name="title">Delete {{ $food->name }}</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight">
             Delete {{ $food->name }}?
-        </h2>
+        </h1>
     </x-slot>
     <form method="POST" action="{{ route('foods.destroy', $food) }}">
         @method('delete')
diff --git a/resources/views/foods/edit.blade.php b/resources/views/foods/edit.blade.php
index 888f002..0062b67 100644
--- a/resources/views/foods/edit.blade.php
+++ b/resources/views/foods/edit.blade.php
@@ -2,7 +2,7 @@
     {{ $title = ($food->exists ? "Edit {$food->name}" : 'Add Food') }}
     <x-slot name="title">{{ $title }}</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h2>
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h1>
     </x-slot>
     <form method="POST" action="{{ ($food->exists ? route('foods.update', $food) : route('foods.store')) }}">
                         @if ($food->exists)@method('put')@endif
diff --git a/resources/views/foods/index.blade.php b/resources/views/foods/index.blade.php
index 5da3d76..5963563 100644
--- a/resources/views/foods/index.blade.php
+++ b/resources/views/foods/index.blade.php
@@ -2,7 +2,7 @@
     <x-slot name="title">Foods</x-slot>
     <x-slot name="header">
         <div class="flex justify-between items-center">
-            <h2 class="font-semibold text-2xl text-gray-800 leading-tight">Foods</h2>
+            <h1 class="font-semibold text-2xl text-gray-800 leading-tight">Foods</h1>
             <a href="{{ route('foods.create') }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
                 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
@@ -14,55 +14,55 @@
     <x-search-view :route="route('api:v1:foods.index')" :tags="$tags">
         <x-slot name="results">
             <template x-for="food in results" :key="food">
-                <div class="p-1 border-2 border-black font-sans">
-                    <div class="text-2xl lowercase font-extrabold leading-none">
+                <article class="p-1 border-2 border-black font-sans">
+                    <h1 class="text-2xl lowercase font-extrabold leading-none">
                         <a x-bind:href="food.showUrl"
                            class="hover:text-gray-600">
                             <span x-text="food.name"></span><span class="text-gray-500" x-text="`, ${food.detail}`" x-show="food.detail"></span>
                         </a>
-                    </div>
-                    <div class="lowercase text-lg text-gray-600" x-text="food.brand" x-show="food.brand"></div>
-                    <div class="flex justify-between font-bold border-b-8 border-black">
-                        <div>Serving size</div>
-                        <div>
+                    </h1>
+                    <h2 class="lowercase text-lg text-gray-600" x-text="food.brand" x-show="food.brand"></h2>
+                    <section class="flex justify-between font-bold border-b-8 border-black">
+                        <h1>Serving size</h1>
+                        <p>
                             <span x-text="food.servingSizeFormatted"></span>
                             <span x-text="food.servingUnitFormatted ?? food.name"></span>
                             <span x-text="`(${food.servingWeight}g)`"></span>
-                        </div>
-                    </div>
-                    <div class="font-bold text-right">Amount per serving</div>
-                    <div class="flex justify-between items-end font-extrabold">
-                        <div class="text-xl">Calories</div>
+                        </p>
+                    </section>
+                    <h2 class="font-bold text-right">Amount per serving</h2>
+                    <section class="flex justify-between items-end font-extrabold">
+                        <h1 class="text-xl">Calories</h1>
                         <div class="text-xl" x-text="food.calories"></div>
-                    </div>
+                    </section>
                     <div class="border-t-4 border-black text-sm">
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Total Fat</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Total Fat</h1>
                             <div x-text="`${food.fat}g`"></div>
-                        </div>
+                        </section>
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Cholesterol</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Cholesterol</h1>
                             <div x-text="`${food.cholesterol}mg`"></div>
-                        </div>
+                        </section>
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Sodium</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Sodium</h1>
                             <div x-text="`${food.sodium}mg`"></div>
-                        </div>
+                        </section>
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Total Carbohydrate</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Total Carbohydrate</h1>
                             <div x-text="`${food.carbohydrates}g`"></div>
-                        </div>
+                        </section>
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Protein</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Protein</h1>
                             <div x-text="`${food.protein}g`"></div>
-                        </div>
+                        </section>
                     </div>
-                </div>
+                </article>
             </template>
         </x-slot>
     </x-search-view>
diff --git a/resources/views/foods/show.blade.php b/resources/views/foods/show.blade.php
index 6598735..9901a32 100644
--- a/resources/views/foods/show.blade.php
+++ b/resources/views/foods/show.blade.php
@@ -1,7 +1,7 @@
 <x-app-layout>
     <x-slot name="title">{{ $food->name }}</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto items-center">
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto items-center">
             <div>
                 {{ $food->name }}@if($food->detail), {{ $food->detail }}@endif
                 @if($food->brand)
@@ -21,55 +21,55 @@
                     <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                 </svg>
             </a>
-        </h2>
+        </h1>
     </x-slot>
-    <div class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
-        <div class="p-1 mb-2 border-2 border-black font-sans md:w-72">
-            <div class="text-3xl font-extrabold leading-none">Nutrition Facts</div>
-            <div class="flex justify-between font-bold border-b-8 border-black">
-                <div>Serving size</div>
+    <article class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
+        <section class="p-1 mb-2 border-2 border-black font-sans md:w-72">
+            <h1 class="text-3xl font-extrabold leading-none">Nutrition Facts</h1>
+            <section class="flex justify-between font-bold border-b-8 border-black">
+                <h1>Serving size</h1>
                 <div>
                     {{ $food->servingSizeFormatted }}
                     {{ $food->servingUnitFormatted ?? $food->name }}
                     ({{ $food->serving_weight }}g)
                 </div>
-            </div>
-            <div class="font-bold text-right">Amount per serving</div>
-            <div class="flex justify-between items-end font-extrabold">
-                <div class="text-3xl">Calories</div>
+            </section>
+            <h2 class="font-bold text-right">Amount per serving</h2>
+            <section class="flex justify-between items-end font-extrabold">
+                <h1 class="text-3xl">Calories</h1>
                 <div class="text-4xl">{{ $food->calories }}</div>
-            </div>
+            </section>
             <div class="border-t-4 border-black text-sm">
                 <hr class="border-gray-500"/>
-                <div class="flex justify-between">
-                    <div class="font-bold">Total Fat</div>
+                <section class="flex justify-between">
+                    <h1 class="font-bold">Total Fat</h1>
                     <div>{{ $food->fat }}g</div>
-                </div>
+                </section>
                 <hr class="border-gray-500"/>
-                <div class="flex justify-between">
-                    <div class="font-bold">Cholesterol</div>
+                <section class="flex justify-between">
+                    <h1 class="font-bold">Cholesterol</h1>
                     <div>{{ $food->cholesterol }}mg</div>
-                </div>
+                </section>
                 <hr class="border-gray-500"/>
-                <div class="flex justify-between">
-                    <div class="font-bold">Sodium</div>
+                <section class="flex justify-between">
+                    <h1 class="font-bold">Sodium</h1>
                     <div>{{ $food->sodium }}mg</div>
-                </div>
+                </section>
                 <hr class="border-gray-500"/>
-                <div class="flex justify-between">
-                    <div class="font-bold">Total Carbohydrate</div>
+                <section class="flex justify-between">
+                    <h1 class="font-bold">Total Carbohydrate</h1>
                     <div>{{ $food->carbohydrates }}g</div>
-                </div>
+                </section>
                 <hr class="border-gray-500"/>
-                <div class="flex justify-between">
-                    <div class="font-bold">Protein</div>
+                <section class="flex justify-between">
+                    <h1 class="font-bold">Protein</h1>
                     <div>{{ $food->protein }}g</div>
-                </div>
+                </section>
             </div>
-        </div>
-        <div class="flex flex-col space-y-2">
+        </section>
+        <section class="flex flex-col space-y-2">
             @if(!$food->tags->isEmpty())
-                <h3 class="font-bold text-2xl">Tags</h3>
+                <h1 class="font-bold text-2xl">Tags</h1>
                 <div class="flex flex-wrap">
                     @foreach ($food->tags as $tag)
                         <span class="m-1 bg-gray-200 rounded-full px-2 leading-loose">{{ $tag->name }}</span>
@@ -77,11 +77,11 @@
                 </div>
             @endif
             @if($food->description)
-                <h3 class="font-bold text-2xl">Description</h3>
-                <div class="text-gray-800">{{ $food->description }}</div>
+                <h1 class="font-bold text-2xl">Description</h1>
+                <p class="text-gray-800">{{ $food->description }}</p>
             @endif
                 @if(!$food->ingredientAmountRelationships->isEmpty())
-                    <h3 class="font-bold text-2xl">Recipes</h3>
+                    <h1 class="font-bold text-2xl">Recipes</h1>
                     <ul class="list-disc list-inside ml-3 space-y-1">
                         @foreach ($food->ingredientAmountRelationships as $ia)
                             <li> <a class="text-gray-500 hover:text-gray-700"
@@ -90,15 +90,15 @@
                     </ul>
                 @endif
             @if($food->source)
-                <h3 class="font-bold text-2xl">Source</h3>
-                <div>
+                <h1 class="font-bold text-2xl">Source</h1>
+                <p>
                     @if(filter_var($food->source, FILTER_VALIDATE_URL))
                         <a class="text-gray-500 hover:text-gray-700" href="{{ $food->source }}">{{ $food->source }}</a>
                     @else
                         {{ $food->source }}
                     @endif
-                </div>
+                </p>
             @endif
-        </div>
-    </div>
+        </section>
+    </article>
 </x-app-layout>
diff --git a/resources/views/goals/delete.blade.php b/resources/views/goals/delete.blade.php
index 1647d08..07bb70b 100644
--- a/resources/views/goals/delete.blade.php
+++ b/resources/views/goals/delete.blade.php
@@ -1,9 +1,9 @@
 <x-app-layout>
     <x-slot name="title">Delete Goal</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight">
             Delete {{ $goal->goal }} goal?
-        </h2>
+        </h1>
     </x-slot>
     <form method="POST" action="{{ route('goals.destroy', $goal) }}">
         @method('delete')
diff --git a/resources/views/goals/edit.blade.php b/resources/views/goals/edit.blade.php
index 8fc8018..0415e6b 100644
--- a/resources/views/goals/edit.blade.php
+++ b/resources/views/goals/edit.blade.php
@@ -2,7 +2,7 @@
     {{ $title = ($goal->exists ? 'Edit' : 'Add') . ' Goal' }}
     <x-slot name="title">{{ $title }}</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h2>
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h1>
     </x-slot>
     <form method="POST" action="{{ ($goal->exists ? route('goals.update', $goal) : route('goals.store')) }}">
         @if ($goal->exists)@method('put')@endif
diff --git a/resources/views/goals/index.blade.php b/resources/views/goals/index.blade.php
index 90537a2..f2e15f1 100644
--- a/resources/views/goals/index.blade.php
+++ b/resources/views/goals/index.blade.php
@@ -2,7 +2,7 @@
     <x-slot name="title">My Goals - {{ $date->format('D, j M Y') }}</x-slot>
     <x-slot name="header">
         <div class="flex justify-between items-center">
-            <h2 class="leading-tight text-center">
+            <h1 class="leading-tight text-center">
                 <div class="text-2xl font-semibold text-gray-800">My Goals</div>
                 <div class="flex items-center space-x-2">
                     <div>
@@ -23,7 +23,7 @@
                         </a>
                     </div>
                 </div>
-            </h2>
+            </h1>
             <a href="{{ route('goals.create') }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
                 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
diff --git a/resources/views/goals/show.blade.php b/resources/views/goals/show.blade.php
index 3605ff9..0e593e5 100644
--- a/resources/views/goals/show.blade.php
+++ b/resources/views/goals/show.blade.php
@@ -1,7 +1,7 @@
 <x-app-layout>
     <x-slot name="title">Goal</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
             {{ $goal->summary }}
             <a class="ml-2 text-gray-500 hover:text-gray-700 hover:border-gray-300 text-sm"
                href="{{ route('goals.edit', $goal) }}">
@@ -16,7 +16,7 @@
                     <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                 </svg>
             </a>
-        </h2>
+        </h1>
     </x-slot>
     <div class="grid grid-cols-2 gap-y-1 gap-x-3 max-w-md inline-grid">
         <div class="font-bold">From</div>
diff --git a/resources/views/journal-entries/create-from-nutrients.blade.php b/resources/views/journal-entries/create-from-nutrients.blade.php
index 82d95b1..f32af89 100644
--- a/resources/views/journal-entries/create-from-nutrients.blade.php
+++ b/resources/views/journal-entries/create-from-nutrients.blade.php
@@ -2,7 +2,7 @@
     <x-slot name="title">Add Entry</x-slot>
     <x-slot name="header">
         <div class="flex justify-between items-center">
-            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Add Entry</h2>
+            <h1 class="font-semibold text-xl text-gray-800 leading-tight">Add Entry</h1>
             <a href="{{ route('journal-entries.create', ['date' => $default_date->format('Y-m-d')]) }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
                 Add by Recipes/Food
             </a>
diff --git a/resources/views/journal-entries/create.blade.php b/resources/views/journal-entries/create.blade.php
index af31486..01c3b7a 100644
--- a/resources/views/journal-entries/create.blade.php
+++ b/resources/views/journal-entries/create.blade.php
@@ -2,7 +2,7 @@
     <x-slot name="title">Add Entries</x-slot>
     <x-slot name="header">
         <div class="flex justify-between items-center">
-            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Add Entries</h2>
+            <h1 class="font-semibold text-xl text-gray-800 leading-tight">Add Entries</h1>
             <a href="{{ route('journal-entries.create.from-nutrients', ['date' => $default_date->format('Y-m-d')]) }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
                 Add by Nutrients
             </a>
diff --git a/resources/views/journal-entries/delete.blade.php b/resources/views/journal-entries/delete.blade.php
index 3ef7108..aec7590 100644
--- a/resources/views/journal-entries/delete.blade.php
+++ b/resources/views/journal-entries/delete.blade.php
@@ -1,9 +1,9 @@
 <x-app-layout>
     <x-slot name="title">Delete Entry</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight">
             Delete {{ $entry->summary }}?
-        </h2>
+        </h1>
     </x-slot>
     <form method="POST" action="{{ route('journal-entries.destroy', $entry) }}">
         @method('delete')
diff --git a/resources/views/journal-entries/index.blade.php b/resources/views/journal-entries/index.blade.php
index e5b5954..540913f 100644
--- a/resources/views/journal-entries/index.blade.php
+++ b/resources/views/journal-entries/index.blade.php
@@ -2,7 +2,7 @@
     <x-slot name="title">My Journal - {{ $date->format('D, j M Y') }}</x-slot>
     <x-slot name="header">
         <div class="flex justify-between items-center">
-            <h2 class="leading-tight text-center">
+            <h1 class="leading-tight text-center">
                 <div class="text-2xl font-semibold text-gray-800">My Journal</div>
                 <div class="flex items-center space-x-2">
                     <div>
@@ -23,7 +23,7 @@
                         </a>
                     </div>
                 </div>
-            </h2>
+            </h1>
             <a href="{{ route('journal-entries.create', ['date' => $date->format('Y-m-d')]) }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
                 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
diff --git a/resources/views/recipes/delete.blade.php b/resources/views/recipes/delete.blade.php
index de20ea7..4cb6d3d 100644
--- a/resources/views/recipes/delete.blade.php
+++ b/resources/views/recipes/delete.blade.php
@@ -1,9 +1,9 @@
 <x-app-layout>
     <x-slot name="title">Delete {{ $recipe->name }}</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight">
             Delete {{ $recipe->name }}?
-        </h2>
+        </h1>
     </x-slot>
     <form method="POST" action="{{ route('recipes.destroy', $recipe) }}">
         @method('delete')
diff --git a/resources/views/recipes/edit.blade.php b/resources/views/recipes/edit.blade.php
index 8607a48..f330ee8 100644
--- a/resources/views/recipes/edit.blade.php
+++ b/resources/views/recipes/edit.blade.php
@@ -2,7 +2,7 @@
     {{ $title = ($recipe->exists ? "Edit {$recipe->name}" : 'Add Recipe') }}
     <x-slot name="title">{{ $title }}</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h2>
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h1>
     </x-slot>
     <form method="POST" action="{{ ($recipe->exists ? route('recipes.update', $recipe) : route('recipes.store')) }}">
         @if ($recipe->exists)@method('put')@endif
diff --git a/resources/views/recipes/index.blade.php b/resources/views/recipes/index.blade.php
index cbf3f57..eb17b43 100644
--- a/resources/views/recipes/index.blade.php
+++ b/resources/views/recipes/index.blade.php
@@ -2,7 +2,7 @@
     <x-slot name="title">Recipes</x-slot>
     <x-slot name="header">
         <div class="flex justify-between items-center">
-            <h2 class="font-semibold text-2xl text-gray-800 leading-tight">Recipes</h2>
+            <h1 class="font-semibold text-2xl text-gray-800 leading-tight">Recipes</h1>
             <a href="{{ route('recipes.create') }}" class="inline-flex items-center rounded-md font-semibold text-white p-2 bg-green-500 tracking-widest hover:bg-green-700 active:bg-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-600 disabled:opacity-25 transition ease-in-out duration-150">
                 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
@@ -14,51 +14,49 @@
     <x-search-view :route="route('api:v1:recipes.index')" :tags="$tags">
         <x-slot name="results">
             <template x-for="recipe in results" :key="recipe">
-                <div class="p-1 border-2 border-black font-sans">
-                    <div class="text-2xl font-extrabold">
+                <article class="p-1 border-2 border-black font-sans">
+                    <h1 class="text-2xl font-extrabold">
                         <a x-bind:href="recipe.showUrl"
                            class="hover:text-gray-600" x-text="recipe.name"></a>
-                    </div>
-                    <div class="flex justify-between">
-                        <div class="leading-snug" x-text="`${recipe.servings} servings`"></div>
-                    </div>
-                    <div class="flex justify-between items-end font-extrabold" x-show="recipe.serving_weight">
-                        <div>Serving weight</div>
+                    </h1>
+                    <h2 class="leading-snug" x-text="`${recipe.servings} servings`"></h2>
+                    <section class="flex justify-between items-end font-extrabold" x-show="recipe.serving_weight">
+                        <h1>Serving weight</h1>
                         <div x-text="`${recipe.serving_weight}g`"></div>
-                    </div>
-                    <div class="font-bold text-right border-t-8 border-black">Amount per serving</div>
-                    <div class="flex justify-between items-end font-extrabold">
-                        <div class="text-xl">Calories</div>
+                    </section>
+                    <h2 class="font-bold text-right border-t-8 border-black">Amount per serving</h2>
+                    <section class="flex justify-between items-end font-extrabold">
+                        <h1 class="text-xl">Calories</h1>
                         <div class="text-xl" x-text="`${recipe.caloriesPerServing}`"></div>
-                    </div>
+                    </section>
                     <div class="border-t-4 border-black text-sm">
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Total Fat</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Total Fat</h1>
                             <div x-text="`${recipe.fatPerServing}g`"></div>
-                        </div>
+                        </section>
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Cholesterol</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Cholesterol</h1>
                             <div x-text="`${recipe.cholesterolPerServing}mg`"></div>
-                        </div>
+                        </section>
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Sodium</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Sodium</h1>
                             <div x-text="`${recipe.sodiumPerServing}mg`"></div>
-                        </div>
+                        </section>
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Total Carbohydrate</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Total Carbohydrate</h1>
                             <div x-text="`${recipe.carbohydratesPerServing}g`"></div>
-                        </div>
+                        </section>
                         <hr class="border-gray-500"/>
-                        <div class="flex justify-between">
-                            <div class="font-bold">Protein</div>
+                        <section class="flex justify-between">
+                            <h1 class="font-bold">Protein</h1>
                             <div x-text="`${recipe.proteinPerServing}g`"></div>
-                        </div>
+                        </section>
                     </div>
-                </div>
+                </article>
             </template>
         </x-slot>
     </x-search-view>
diff --git a/resources/views/recipes/show.blade.php b/resources/views/recipes/show.blade.php
index e8e2995..b7f23e8 100644
--- a/resources/views/recipes/show.blade.php
+++ b/resources/views/recipes/show.blade.php
@@ -1,7 +1,7 @@
 <x-app-layout>
     <x-slot name="title">{{ $recipe->name }}</x-slot>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
+        <h1 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
             {{ $recipe->name }}
             <a class="ml-2 text-gray-500 hover:text-gray-700 hover:border-gray-300 text-sm"
                href="{{ route('recipes.edit', $recipe) }}">
@@ -16,28 +16,28 @@
                     <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                 </svg>
             </a>
-        </h2>
+        </h1>
     </x-slot>
     <div class="flex flex-col-reverse justify-between pb-4 sm:flex-row">
         <div x-data="{showNutrientsSummary: false}">
             @if(!$recipe->tags->isEmpty())
                 <section class="mb-2 text-gray-700 text-sm">
-                    <h3 class="font-extrabold inline">Tags:</h3>
+                    <h1 class="font-extrabold inline">Tags:</h1>
                     {{ implode(', ', $recipe->tags->pluck('name')->all()) }}
                 </section>
             @endif
             @if($recipe->description)
                 <section>
-                    <h3 class="mb-2 font-bold text-2xl">Description</h3>
+                    <h1 class="mb-2 font-bold text-2xl">Description</h1>
                     <p class="mb-2 text-gray-800">{{ $recipe->description }}</p>
                 </section>
             @endif
             <section x-data="{showNutrientsSummary: false}">
-                <h3 class="mb-2 font-bold text-2xl">
+                <h1 class="mb-2 font-bold text-2xl">
                     Ingredients
                     <span class="text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 font-normal cursor-pointer"
                           x-on:click="showNutrientsSummary = !showNutrientsSummary">[toggle nutrients]</span>
-                </h3>
+                </h1>
                 <ul class="space-y-2">
                     @foreach($recipe->ingredientAmounts as $ia)
                         <li>
@@ -104,7 +104,7 @@
         </aside>
     </div>
     <section>
-        <h3 class="mb-2 font-bold text-2xl">Steps</h3>
+        <h1 class="mb-2 font-bold text-2xl">Steps</h1>
         @foreach($recipe->steps as $step)
             <div class="flex flex-row space-x-4 mb-4">
                 <p class="text-3xl text-gray-400 text-center">{{ $step->number }}</p>
@@ -114,7 +114,7 @@
     </section>
     @if($recipe->source)
         <footer class="mb-2 text-gray-500 text-sm">
-            <h3 class="font-extrabold inline">Source:</h3>
+            <h1 class="font-extrabold inline">Source:</h1>
             @if(filter_var($recipe->source, FILTER_VALIDATE_URL))
                 <a href="{{ $recipe->source }}">{{ $recipe->source }}</a>
             @else